jiankuang/bubblechart.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This Pack Layout comes from:

https://www.youtube.com/watch?v=Z0PpaI0UlkE&list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p&index=16

  
## bubblechart.html
<body>
<nav><ul>
  <li><a href="index.html">Pack Layout</a></li>
  <li><a href="bubblechart.html">Bubble Layout</a></li>
</ul></nav>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 800, height = 600;

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

var pack = d3.layout.pack()
	.size([width, height - 50])
	.padding(10);

d3.json("knowledge_domain_flat.json", function(data) {
  var nodes = pack.nodes(data);

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

  node.append("circle")
  	  .attr("r",function(d) { return d.r; })
  	  .attr("fill", function(d){ return d.children ? "#fff" : "steelblue"; }) //make nodes with children invisible
  	  .attr("opacity", 0.25)
  	  .attr("stroke", function(d) { return d.children ? "#fff":"#ADADAD"; } ) //make nodes with children invisible
  	  .attr("stroke-width", 2);

  node.append("text")
  	  .text(function(d) { return d.children ? "" : d.name; });
});

</script>
</body>

## index.html
<body>
<nav><ul>
  <li><a href="index.html">Pack Layout</a></li>
  <li><a href="bubblechart.html">Bubble Layout</a></li>
</ul></nav>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 800, height = 600;

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

var pack = d3.layout.pack()
	.size([width, height - 50])
	.padding(10);

d3.json("knowledgedomainscore.json", function(data) {
  var nodes = pack.nodes(data);

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

  node.append("circle")
  	  .attr("r",function(d) { return d.r; })
  	  .attr("fill", "steelblue")
  	  .attr("opacity", 0.25)
  	  .attr("stroke", "#ADADAD")
  	  .attr("stroke-width", 2);

  node.append("text")
  	  .text(function(d) { return d.children ? "" : d.name; });
});

</script>
</body>

## knowledge_domain_flat.json
{
  "name": "Data Development",
  "value": 60,
  "children": [
    {"name": "D3.js", "value": 10},
    {"name": "Dimple.js", "value": 8},
    {"name": "matplotlib(python)", "value": 6},
    {"name": "ggplot(R)", "value": 4},
    {"name": "numpy", "value": 9},
    {"name": "scikit-learn", "value": 8}
  ]
}

## knowledgedomainscore.json
{
  "name": "Data Development",
  "value": 60,
  "children": [
    {
      "name": "Data Visualization",
      "value": 40,
      "children": [
        {"name": "D3.js", "value": 10},
        {"name": "Dimple.js", "value": 9},
        {"name": "matplotlib(python)", "value": 8},
        {"name": "ggplot(R)", "value": 7}
      ]
    },
    {
      "name": "Data Analysis",
      "value": 20,
      "children": [
        {"name": "numpy", "value": 9},
        {"name": "scikit-learn", "value": 8}
      ]
    }
  ]
}
	<body>
	<nav><ul>
	<li><a href="index.html">Pack Layout</a></li>
	<li><a href="bubblechart.html">Bubble Layout</a></li>
	</ul></nav>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var width = 800, height = 600;

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

	var pack = d3.layout.pack()
	.size([width, height - 50])
	.padding(10);

	d3.json("knowledge_domain_flat.json", function(data) {
	var nodes = pack.nodes(data);

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

	node.append("circle")
	.attr("r",function(d) { return d.r; })
	.attr("fill", function(d){ return d.children ? "#fff" : "steelblue"; }) //make nodes with children invisible
	.attr("opacity", 0.25)
	.attr("stroke", function(d) { return d.children ? "#fff":"#ADADAD"; } ) //make nodes with children invisible
	.attr("stroke-width", 2);

	node.append("text")
	.text(function(d) { return d.children ? "" : d.name; });
	});

	</script>
	</body>
	{
	"name": "Data Development",
	"value": 60,
	"children": [
	{"name": "D3.js", "value": 10},
	{"name": "Dimple.js", "value": 8},
	{"name": "matplotlib(python)", "value": 6},
	{"name": "ggplot(R)", "value": 4},
	{"name": "numpy", "value": 9},
	{"name": "scikit-learn", "value": 8}
	]
	}