Skip to content

Instantly share code, notes, and snippets.

@jiankuang

jiankuang/bubblechart.html

Last active May 29, 2016 19:49
Show Gist options
  • Save jiankuang/93dba6fac49222458b3b35e7c233bace to your computer and use it in GitHub Desktop.
Save jiankuang/93dba6fac49222458b3b35e7c233bace to your computer and use it in GitHub Desktop.
Download ZIP
D3 Layout Pack
Raw
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>
Raw
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>
Raw
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}
]
}
Raw
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}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment