[ Launch: An inlet to Tributary ] 4567531 by cmutel
-
-
Save cmutel/4567531 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} |
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 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); | |
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)); }); | |
} | |
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