jiankuang/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This Tree Layout demo comes from

https://www.youtube.com/watch?v=iZ6MSHA4FMU&index=15&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p

  
## index.html
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var chart = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)
  .append("g")
  	.attr("transform", "translate(50, 50)");

var tree = d3.layout.tree()
	.size([400, 400]);

d3.json("myknowledgedomain.json", function(data) {
  var nodes = tree.nodes(data); // create data nodes suitable for tree structure
  var links = tree.links(nodes); // create links to connect source(parent) and target(child) nodes

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

  nodes.append("circle")
  	  .attr("r", 5)
  	  .attr("fill", "steelblue");
  nodes.append("text")
  	  .text(function(d){ return d.name; });

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

  chart.selectAll(".link")
  	  .data(links).enter()
  	.append("path")
  	  .attr("class", "link")
  	  .attr("fill", "none").attr("stroke", "#ADADAD")
  	  .attr("d", diagonal);

});
</script>
</body>

## myknowledgedomain.json
{
  "name": "Data Development",
  "children": [
    {
      "name": "Data Visualization",
      "children": [
        {"name": "D3.js"},
        {"name": "Dimple.js"},
        {"name": "matplotlib(python)"},
        {"name": "ggplot(R)"}
      ]
    },
    {
      "name": "Data Analysis",
      "children": [
        {"name": "numpy"},
        {"name": "scikit-learn"}
      ]
    }
  ]
}
	<body>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var chart = d3.select("body").append("svg")
	.attr("width", 500)
	.attr("height", 500)
	.append("g")
	.attr("transform", "translate(50, 50)");

	var tree = d3.layout.tree()
	.size([400, 400]);

	d3.json("myknowledgedomain.json", function(data) {
	var nodes = tree.nodes(data); // create data nodes suitable for tree structure
	var links = tree.links(nodes); // create links to connect source(parent) and target(child) nodes

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

	nodes.append("circle")
	.attr("r", 5)
	.attr("fill", "steelblue");
	nodes.append("text")
	.text(function(d){ return d.name; });

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

	chart.selectAll(".link")
	.data(links).enter()
	.append("path")
	.attr("class", "link")
	.attr("fill", "none").attr("stroke", "#ADADAD")
	.attr("d", diagonal);

	});
	</script>
	</body>
	{
	"name": "Data Development",
	"children": [
	{
	"name": "Data Visualization",
	"children": [
	{"name": "D3.js"},
	{"name": "Dimple.js"},
	{"name": "matplotlib(python)"},
	{"name": "ggplot(R)"}
	]
	},
	{
	"name": "Data Analysis",
	"children": [
	{"name": "numpy"},
	{"name": "scikit-learn"}
	]
	}
	]
	}