inspired by http://bl.ocks.org/mbostock/4063269
Last active
May 31, 2016 18:55
-
-
Save jiankuang/bafd2de14a9391c3d249fc449a6599fd to your computer and use it in GitHub Desktop.
D3 Layout Bubble
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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