Skip to content

Instantly share code, notes, and snippets.

@jiankuang

jiankuang/index.html

Last active May 31, 2016 18:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jiankuang/bafd2de14a9391c3d249fc449a6599fd to your computer and use it in GitHub Desktop.
Save jiankuang/bafd2de14a9391c3d249fc449a6599fd to your computer and use it in GitHub Desktop.
Download ZIP
D3 Layout Bubble
Raw
index.html
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 960, height = 900,
color = d3.scale.category10();
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);
var force = d3.layout.force()
.size([width, height - 50]);
d3.json("knowledgedomains.json", function(data) {
force.nodes(data).start();
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 + ")"; })
.call(force.drag);
node.append("circle")
.attr("r",function(d) { return d.r; })
.attr("fill", function(d){ return d.children ? "#fff" : color(d.domain); }) //make nodes with children invisible
.attr("opacity", 0.6)
node.append("a")
.attr("href", function(d){ return d.link; })
.append("text")
.attr("dy", ".3em").style("text-anchor", "middle")
.text(function(d) { return d.children ? "" : d.name; });
});
</script>
</body>
Raw
knowledgedomains.json
{
"name": "knowledge domains",
"value": 100,
"children": [
{"domain": "Data Visualization", "name": "D3.js", "link": "https://jiankuang.pythonanywhere.com/datavis/d3/scatter", "value": 10},
{"domain": "Data Visualization", "name": "Dimple.js", "link": "http://bl.ocks.org/jiankuang", "value": 8},
{"domain": "Data Visualization", "name": "matplotlib(python)", "value": 6},
{"domain": "Data Visualization", "name": "ggplot(R)", "value": 4},
{"domain": "Data Analysis", "name": "Numpy", "value": 9},
{"domain": "Data Analysis", "name": "scikit-learn", "value": 8},
{"domain": "R", "name": "Machine Learning", "link": "https://www.coursera.org/account/accomplishments/records/XQRELS5AR3F4", "value": 10},
{"domain": "R", "name": "Getting and Cleaning Data", "link": "https://www.coursera.org/account/accomplishments/records/Wb3WPYcj7AmNQhqR", "value": 6},
{"domain": "R", "name": "Regression Models", "link": "https://www.coursera.org/account/accomplishments/records/VMUH8KBM9ME3", "value": 7},
{"domain": "R", "name": "Data Science", "link": "https://www.coursera.org/account/accomplishments/records/w8cMseL6hRwhC77p", "value": 8},
{"domain": "R", "name": "R", "link": "https://www.coursera.org/account/accomplishments/records/4TmUy2WKLTTSzh6h", "value": 5},
{"domain": "R", "name": "Exploratory Data Analysis", "link": "https://www.coursera.org/account/accomplishments/records/SYnkP64tq8kDz2LQ", "value": 8},
{"domain": "R", "name": "Statistical Inference", "link": "https://www.coursera.org/account/accomplishments/records/6YSr2p6PbujwEMt9", "value": 8},
{"domain": "Webserver Development", "name": "Asp.net MVC", "link": "http://www.bjcancer.org/Html/News/Main/131.html", "value": 3},
{"domain": "Webserver Development", "name": "Web2Py", "link": "http://jiankuang.pythonanywhere.com/datavis", "value": 3},
{"domain": "Webserver Development", "name": "NodeJS", "link": "http://invictusblog.herokuapp.com/", "value": 3},
{"domain": "Programming Language", "name": "JavaScript", "value": 10},
{"domain": "Education", "name": "Cisco Skillzone", "link": "http://csr.cisco.com/skillzone/", "value": 10}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment