[ Launch: Supply chain circles - tree example ] 4646770 by roundrobin
[ Launch: An inlet to Tributary ] 4567531 by cmutel
-
-
Save roundrobin/4646770 to your computer and use it in GitHub Desktop.
Supply chain circles - tree example
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
{"description":"Supply chain circles - tree example","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/4WtoJHn.png"} |
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
// LCA supply chain circular visualization using D3.js | |
// TODO: | |
// Decide on input data format | |
// Color of paths? | |
// Button to toggle individual / cumulative weights | |
var circle_data = [25, 12, 47], | |
data = { | |
"name": "fu", | |
"category": ["water"], | |
"size": 1000, | |
"children": [{ | |
"name": "process 1", | |
"category": ["water"], | |
"size": 500, | |
"children": [{ | |
"name": "subprocess 1\nTest linebreaks!", | |
"category": ["water"], | |
"size": 50 | |
}, { | |
"name": "subprocess 1", | |
"category": ["resources"], | |
"size": 150 | |
}, { | |
"name": "subprocess 1", | |
"category": ["mining"], | |
"size": 300, | |
"children": [{ | |
"name": "subsubprocess 1", | |
"category": ["machinery"], | |
"size": 150 | |
}, { | |
"name": "subsubprocess 1", | |
"category": ["machinery"], | |
"size": 150 | |
}, { | |
"name": "subsubprocess 1", | |
"category": ["machinery"], | |
"size": 150 | |
}, { | |
"name": "subsubprocess 1", | |
"category": ["mining"], | |
"size": 150 | |
}] | |
}] | |
}, { | |
"name": "process 2", | |
"category": ["electricity"], | |
"size": 500, | |
"children": [{ | |
"name": "subprocess 2", | |
"category": ["hydro"], | |
"size": 200 | |
}, { | |
"name": "subprocess 2", | |
"category": ["hydro"], | |
"size": 150 | |
}, { | |
"name": "subprocess 2", | |
"category": ["infrastructure"], | |
"size": 50 | |
}, { | |
"name": "subprocess 2", | |
"category": ["infrastructure"], | |
"size": 50 | |
}, { | |
"name": "subprocess 2", | |
"category": ["transmission"], | |
"size": 50 | |
}] | |
}] | |
}, | |
w = 1200, | |
h = 800, | |
spacing = 100; | |
var lca_circular_result = function (selector, width, height, spacing, circle_widths, data) { | |
var svg = d3.select(selector), | |
circles = svg.selectAll("circle").data(circle_widths), | |
// Default color scheme | |
category_scale = d3.scale.category20(); | |
circles.enter().append("circle") | |
.style("stroke", "darkgrey") | |
.attr("cy", height / 2) | |
.attr("cx", width / 2) | |
.attr("fill", "none") | |
.attr("r", function (d, i) { return (i + 1) * spacing; }) | |
.attr("stroke-width", function (d) { return d; }); | |
var tree = d3.layout.tree() | |
// 360 degrees, number of levels * 100 | |
/// Should probably use a linear scale instead | |
// (or even non-linear scale - outer circles closer?) | |
.size([360, circle_widths.length * spacing]) | |
.sort(null) | |
.separation(function separation(a, b) { | |
return (a.parent == b.parent ? 1 : 2) / a.depth; | |
}), | |
nodes = tree.nodes(data); | |
var diagonal = d3.svg.diagonal.radial() | |
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); | |
var vis = svg.append("svg:g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
var node = vis.selectAll("g.node") | |
.data(nodes) | |
.enter().append("svg:g") | |
.attr("class", "node") | |
.attr("transform", function(d) { | |
return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")"; | |
}); | |
node.append("svg:title") | |
.text(function (d) { return d.name;}); | |
node.append("svg:circle") | |
// Size shouldn't be in pixels (probably) - can compute ourselves | |
// or use a linear scale | |
.attr("r", function (d) { return 3 * Math.sqrt(d.size / Math.PI); } ) | |
.attr("fill", function (d) { return category_scale(d.category.valueOf(1)); }); | |
var link = vis.selectAll("path.link") | |
.data(tree.links(nodes)) | |
.enter().append("svg:path") | |
.attr("class", "link") | |
.attr("fill", "none") | |
// Use 15 - i to show the difference strokes | |
// FIXME | |
.attr("stroke-width", function (d, i) { return 15 - i; }) | |
// Scale for color? | |
.attr("stroke", "black") | |
.attr("d", diagonal); | |
} | |
lca_circular_result("svg", w, h, spacing, circle_data, data); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment