Skip to content

Instantly share code, notes, and snippets.

@eli-s-goldberg

eli-s-goldberg/index.html

Created November 10, 2015 17:55
Show Gist options
  • Save eli-s-goldberg/12d0b42d3e76ccb486c6 to your computer and use it in GitHub Desktop.
Save eli-s-goldberg/12d0b42d3e76ccb486c6 to your computer and use it in GitHub Desktop.
Download ZIP
colorSankey
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='http://timelyportfolio.github.io/rCharts_d3_sankey//css/sankey.css'>
<script src='http://timelyportfolio.github.io/rCharts_d3_sankey//js/d3.v3.js' type='text/javascript'></script>
<script src='http://timelyportfolio.github.io/rCharts_d3_sankey//js/sankey.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 600px;
}
</style>
</head>
<body >
<div id = 'chart21541f297cdc' class = 'rChart rCharts_d3_sankey'></div>
<!--Attribution:
Mike Bostock https://github.com/d3/d3-plugins/tree/master/sankey
Mike Bostock http://bost.ocks.org/mike/sankey/
-->
<script>
(function(){
var params = {
"dom": "chart21541f297cdc",
"width": 1000,
"height": 600,
"data": {
"source": [ 'Ag', 'C60', 'C60', 'CeO2', 'CuO', 'Fe', 'MWCNT', 'QD', 'SiO2', 'TiO2', 'TiO2',
'TiO2', 'ZnO', 'ZnO', 'ZnO', 'ZnO', 'ZnO', 'ZnO', 'nBiochar', 'nBiochar',
'nHAP', 'nHAP', 'CaCl2', 'CaCl2', 'CaCl2','CaCl3', 'CaCl4', 'CaCl5', 'KCl', 'KNO3',
'NaCl', 'NaCl', 'NaCl', 'NaCl', 'NaCl', 'NaCl', 'NaHCO3', 'pure', 'pure', 'pure', 'pure', 'pure',
'pure', 'Alg', 'Citric', 'FA', 'Formic', 'HA', 'HA', 'HA','Oxalic', 'SRHA', 'SRHA',
'TRIZMA', 'noNOM', 'noNOM', 'FeOOH', 'IronOxide', 'IronOxide',
'noCoating', 'noCoating', 'noCoating', 'asp:1e-2-1e-3', 'asp:1e-2-1e-3', 'asp:1e-3-1e-4',
'asp:1e-3-1e-4', 'asp:1e-3-1e-4', 'asp:1e-4-1e-5', 'asp:1e-4-1e-5', '3-6', '3-6', '3-6', '3-6',
'<3', '<3', '<3', '>6', '>6', '>6', 'Darcy:1e-1-1', 'Darcy:1e-2-1e-3', 'Darcy:1e-3-1e-4',
'Darcy:1e-3-1e-4', 'Darcy:1e-3-1e-4', 'Darcy:1e-3-1e-4', 'Darcy:1e-3-1e-4', 'Darcy:1e-4-1e-5',
'Darcy:1e-4-1e-5', 'Darcy:1e-4-1e-5', 'Darcy:1e-4-1e-5', 'Darcy:1e-4-1e-5', 'Darcy:1e-4-1e-5',
'Darcy:1e-4-1e-5', 'Darcy:<1e-5', 'Darcy:<1e-5', 'Darcy:<1e-5', '0.35-0.359', '0.37-0.379',
'0.37-0.379', '0.38-0.389', '0.38-0.389', '0.38-0.389', '0.38-0.389', '0.39-0.399',
'0.39-0.399', '0.39-0.399', '0.39-0.399', '0.4-0.409', '0.4-0.409', '0.4-0.409',
'0.4-0.409', '0.41-0.419', '0.41-0.419', '0.41-0.419', '0.42-0.429', '0.42-0.429',
'0.42-0.429', '0.42-0.429', '0.42-0.429'],
"target": [ 'KNO3', 'CaCl2', 'NaCl', 'NaCl', 'NaCl', 'NaCl', 'KCl', 'NaCl', 'NaCl', 'CaCl2', 'KCl', 'NaCl',
'CaCl2', 'CaCl3', 'CaCl4', 'CaCl5', 'NaCl', 'pure', 'NaCl', 'NaHCO3', 'CaCl2', 'NaCl', 'Alg',
'SRHA', 'noNOM', 'noNOM', 'noNOM', 'noNOM', 'noNOM', 'noNOM', 'Alg', 'FA', 'HA', 'SRHA',
'TRIZMA', 'noNOM', 'noNOM', 'Citric', 'FA', 'Formic', 'HA', 'Oxalic', 'noNOM', 'noCoating',
'noCoating', 'noCoating', 'noCoating', 'FeOOH', 'IronOxide', 'noCoating', 'noCoating',
'IronOxide', 'noCoating', 'noCoating', 'IronOxide', 'noCoating', 'asp:1e-3-1e-4',
'asp:1e-2-1e-3', 'asp:1e-3-1e-4', 'asp:1e-2-1e-3', 'asp:1e-3-1e-4', 'asp:1e-4-1e-5', '3-6', '>6',
'3-6', '<3', '>6', '3-6', '<3', 'Darcy:1e-1-1', 'Darcy:1e-3-1e-4', 'Darcy:1e-4-1e-5', 'Darcy:<1e-5',
'Darcy:1e-3-1e-4', 'Darcy:1e-4-1e-5', 'Darcy:<1e-5', 'Darcy:1e-2-1e-3', 'Darcy:1e-3-1e-4', 'Darcy:1e-4-1e-5',
'0.37-0.379', '0.38-0.389', '0.38-0.389', '0.39-0.399', '0.4-0.409', '0.41-0.419', '0.42-0.429',
'0.35-0.359', '0.37-0.379', '0.38-0.389', '0.39-0.399', '0.4-0.409', '0.41-0.419', '0.42-0.429',
'0.37-0.379', '0.38-0.389', '0.42-0.429', 'HE', 'IRwD', 'SIR', 'EXP', 'HE', 'IRwD', 'SIR', 'EXP',
'HE', 'IRwD', 'SIR', 'EXP', 'HE', 'LD', 'SIR', 'EXP', 'HE', 'SIR', 'EXP', 'HE', 'IRwD', 'LD',
'SIR'],
"value": [ 11, 5, 6, 3, 9, 4, 5, 5, 3, 14, 16, 24, 18, 2, 2, 2, 30, 8, 20, 4, 4, 22, 4, 8, 29, 2,
2, 2, 21, 11, 4, 1, 28, 17, 3, 73, 4, 1, 2, 1, 2, 1, 1, 8, 1, 3, 1, 9, 6, 15, 1, 12, 13, 3,
12, 133, 9, 3, 27, 39, 129, 10, 39, 3, 147, 6, 12, 3, 7, 1, 37, 146, 5, 11, 1, 1, 2, 5,
8, 1, 2, 3, 1, 11, 3, 35, 4, 13, 21, 13, 10, 4, 90, 1, 1, 4, 4, 10, 5, 2, 20, 1, 4, 2, 9, 1,
2, 4, 14, 1, 2, 2, 2, 3, 22, 83, 2, 6, 16 ]
},
"nodeWidth": 15,
"nodePadding": 10,
"layout": 5,
"id": "chart21541f297cdc"
};
params.units ? units = " " + params.units : units = "";
//hard code these now but eventually make available
var formatNumber = d3.format("0,.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + units; },
color = d3.scale.category20();
if(params.labelFormat){
formatNumber = d3.format(".2%");
}
var svg = d3.select('#' + params.id).append("svg")
.attr("width", params.width)
.attr("height", params.height);
var sankey = d3.sankey()
.nodeWidth(params.nodeWidth)
.nodePadding(params.nodePadding)
.layout(params.layout)
.size([params.width,params.height]);
var path = sankey.link();
var data = params.data,
links = [],
nodes = [];
//get all source and target into nodes
//will reduce to unique in the next step
//also get links in object form
data.source.forEach(function (d, i) {
nodes.push({ "name": data.source[i] });
nodes.push({ "name": data.target[i] });
links.push({ "source": data.source[i], "target": data.target[i], "value": +data.value[i] });
});
//now get nodes based on links data
//thanks Mike Bostock https://groups.google.com/d/msg/d3-js/pl297cFtIQk/Eso4q_eBu1IJ
//this handy little function returns only the distinct / unique nodes
nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(nodes));
//it appears d3 with force layout wants a numeric source and target
//so loop through each link replacing the text with its index from node
links.forEach(function (d, i) {
links[i].source = nodes.indexOf(links[i].source);
links[i].target = nodes.indexOf(links[i].target);
});
//now loop through each nodes to make nodes an array of objects rather than an array of strings
nodes.forEach(function (d, i) {
nodes[i] = { "name": d };
});
sankey
.nodes(nodes)
.links(links)
.layout(params.layout);
var link = svg.append("g").selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function (d) { return Math.max(1, d.dy); })
.sort(function (a, b) { return b.dy - a.dy; });
link.append("title")
.text(function (d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
var node = svg.append("g").selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function (d) { return d; })
.on("dragstart", function () { this.parentNode.appendChild(this); })
.on("drag", dragmove));
node.append("rect")
.attr("height", function (d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function (d) { return d3.rgb(d.color).darker(0); })
.append("title")
.text(function (d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function (d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function (d) { return d.name; })
.filter(function (d) { return d.x < params.width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + (
d.x = Math.max(0, Math.min(params.width - d.dx, d3.event.x))
) + "," + (
d.y = Math.max(0, Math.min(params.height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
})();
</script>
<script>
// to be specific in case you have more than one chart
d3.selectAll('#chart21541f297cdc svg path.link')
.style('stroke', function(d){
//here we will use the source color
//if you want target then sub target for source
//or if you want something other than gray
//supply a constant
//or use a categorical scale or gradient
return d.source.color;
})
//note no changes were made to opacity
//to do uncomment below but will affect mouseover
//so will need to define mouseover and mouseout
//happy to show how to do this also
// .style('stroke-opacity', .1)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment