jiankuang/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    inspired by http://bl.ocks.org/mbostock/4339184

  
## index.html
<head>
<style>
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960, height = 1000;

var tree = d3.layout.tree()
    .size([height, width - 180]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width).attr("height", height)
  .append("g")
    .attr("transform", "translate(90, 0)");

d3.json("technologies.json", function(error, json) {
  if(error) throw error;

  var nodes = tree.nodes(json),
      links = tree.links(nodes);

  var link = svg.selectAll("path.link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d){ return "translate("+ d.y +","+ d.x +")"; });

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", function(d){ return d.children?-8:8; })
      .attr("dy", 3)
      .attr("text-anchor", function(d) { return d.children?"end":"start"; })
      .text(function(d){ return d.name; });
});
</script>
</body>

## technologies.json
{
 "name": "Technologies",
 "children": [
  {
   "name": "JavaScript",
   "children": [
    {
     "name": "D3.js",
     "children": [
      {"name": "Core", "size": 3938},
      {"name": "Scales", "size": 3812},
      {"name": "SVG", "size": 6714},
      {"name": "Layouts", "size": 743}
     ]
    },
    {
     "name": "jQuery",
     "children": [
      {"name": "Ajax", "size": 5914},
      {"name": "Callbacks Object", "size": 3416},
      {"name": "Events", "size": 5731},
      {"name": "Forms", "size": 7840},
      {"name": "Selectors", "size": 3534}
     ]
    },
    {
     "name": "Node.js",
     "children": [
      {"name": "Express.js", "size": 7074}
     ]
    }
   ]
  },
  {
   "name": "Python",
   "children": [
    {"name": "Numpy", "size": 17010},
    {"name": "matplotlib", "size": 5842},
    {
     "name": "scikit-learn",
     "children": [
      {"name": "Classification", "size": 1983},
      {"name": "Regression", "size": 2047},
      {"name": "Clustering", "size": 1375},
      {"name": "Dimensionality reduction", "size": 8746},
      {"name": "Model selection", "size": 2202},
      {"name": "Preprocessing", "size": 1382}
     ]
    },
    {"name": "Web2Py", "size": 1041}
   ]
  },
  {
   "name": "Java",
   "children": [
    {
     "name": "Hadoop MapReduce",
     "children": [
      {"name": "Mapper", "size": 721},
      {"name": "Reducer", "size": 4294},
      {"name": "Combiner", "size": 9800}
     ]
    },
    {"name": "JSP", "size": 1759}
   ]
  },
  {
   "name": "C#",
   "children": [
    {"name": "Asp.net MVC", "size": 8833},
    {"name": "Spring.net", "size": 1732},
    {"name": "NHerbinate", "size": 3623},
    {"name": "Entity Framework", "size": 10066}
   ]
  },
  {
   "name": "PHP",
   "children": [
    {"name": "CodeIgniter", "size": 4116}
   ]
  },
  {
   "name": "SQL",
   "children": [
    {"name": "MySQL", "size": 1082},
    {"name": "SQLServer", "size": 1336},
    {"name": "Oracle", "size": 319},
    {"name": "MongoDB", "size": 10498},
    {"name": "Cassandra", "size": 2822},
    {"name": "Hive", "size": 9983}
   ]
  },
  {
   "name": "Hadoop",
   "children": [
    {"name": "HDFS", "size": 1616},
    {"name": "MapReduce", "size": 1027},
    {"name": "YARN", "size": 3891},
    {"name": "Hive", "size": 891},
    {"name": "Cassandra", "size": 2893}
   ]
  },
  {
   "name": "Network",
   "children": [
    {"name": "IPV4", "size": 2105},
    {"name": "IPV6", "size": 1316},
    {"name": "WAN", "size": 3151},
    {"name": "LAN", "size": 3770}
   ]
  },
  {
   "name": "Linux",
   "children": [
    {"name": "Bash Scripting", "size": 8258},
    {"name": "Crontab", "size": 10001}
   ]
  }
 ]
}
	<head>
	<style>
	.node circle {
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	.node {
	font: 10px sans-serif;
	}
	.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
	}
	</style>
	</head>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 960, height = 1000;

	var tree = d3.layout.tree()
	.size([height, width - 180]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var svg = d3.select("body").append("svg")
	.attr("width", width).attr("height", height)
	.append("g")
	.attr("transform", "translate(90, 0)");

	d3.json("technologies.json", function(error, json) {
	if(error) throw error;

	var nodes = tree.nodes(json),
	links = tree.links(nodes);

	var link = svg.selectAll("path.link")
	.data(links)
	.enter().append("path")
	.attr("class", "link")
	.attr("d", diagonal);

	var node = svg.selectAll("g.node")
	.data(nodes)
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d){ return "translate("+ d.y +","+ d.x +")"; });

	node.append("circle")
	.attr("r", 4.5);

	node.append("text")
	.attr("dx", function(d){ return d.children?-8:8; })
	.attr("dy", 3)
	.attr("text-anchor", function(d) { return d.children?"end":"start"; })
	.text(function(d){ return d.name; });
	});
	</script>
	</body>
	{
	"name": "Technologies",
	"children": [
	{
	"name": "JavaScript",
	"children": [
	{
	"name": "D3.js",
	"children": [
	{"name": "Core", "size": 3938},
	{"name": "Scales", "size": 3812},
	{"name": "SVG", "size": 6714},
	{"name": "Layouts", "size": 743}
	]
	},
	{
	"name": "jQuery",
	"children": [
	{"name": "Ajax", "size": 5914},
	{"name": "Callbacks Object", "size": 3416},
	{"name": "Events", "size": 5731},
	{"name": "Forms", "size": 7840},
	{"name": "Selectors", "size": 3534}
	]
	},
	{
	"name": "Node.js",
	"children": [
	{"name": "Express.js", "size": 7074}
	]
	}
	]
	},
	{
	"name": "Python",
	"children": [
	{"name": "Numpy", "size": 17010},
	{"name": "matplotlib", "size": 5842},
	{
	"name": "scikit-learn",
	"children": [
	{"name": "Classification", "size": 1983},
	{"name": "Regression", "size": 2047},
	{"name": "Clustering", "size": 1375},
	{"name": "Dimensionality reduction", "size": 8746},
	{"name": "Model selection", "size": 2202},
	{"name": "Preprocessing", "size": 1382}
	]
	},
	{"name": "Web2Py", "size": 1041}
	]
	},
	{
	"name": "Java",
	"children": [
	{
	"name": "Hadoop MapReduce",
	"children": [
	{"name": "Mapper", "size": 721},
	{"name": "Reducer", "size": 4294},
	{"name": "Combiner", "size": 9800}
	]
	},
	{"name": "JSP", "size": 1759}
	]
	},
	{
	"name": "C#",
	"children": [
	{"name": "Asp.net MVC", "size": 8833},
	{"name": "Spring.net", "size": 1732},
	{"name": "NHerbinate", "size": 3623},
	{"name": "Entity Framework", "size": 10066}
	]
	},
	{
	"name": "PHP",
	"children": [
	{"name": "CodeIgniter", "size": 4116}
	]
	},
	{
	"name": "SQL",
	"children": [
	{"name": "MySQL", "size": 1082},
	{"name": "SQLServer", "size": 1336},
	{"name": "Oracle", "size": 319},
	{"name": "MongoDB", "size": 10498},
	{"name": "Cassandra", "size": 2822},
	{"name": "Hive", "size": 9983}
	]
	},
	{
	"name": "Hadoop",
	"children": [
	{"name": "HDFS", "size": 1616},
	{"name": "MapReduce", "size": 1027},
	{"name": "YARN", "size": 3891},
	{"name": "Hive", "size": 891},
	{"name": "Cassandra", "size": 2893}
	]
	},
	{
	"name": "Network",
	"children": [
	{"name": "IPV4", "size": 2105},
	{"name": "IPV6", "size": 1316},
	{"name": "WAN", "size": 3151},
	{"name": "LAN", "size": 3770}
	]
	},
	{
	"name": "Linux",
	"children": [
	{"name": "Bash Scripting", "size": 8258},
	{"name": "Crontab", "size": 10001}
	]
	}
	]
	}