Skip to content

Instantly share code, notes, and snippets.

@maurerit

maurerit/data.json

Last active January 19, 2017 02:08
Show Gist options
  • Save maurerit/9be8ae253dd11d217fa672342e41127a to your computer and use it in GitHub Desktop.
Save maurerit/9be8ae253dd11d217fa672342e41127a to your computer and use it in GitHub Desktop.
Download ZIP
Visualizing 150mm Railgun II's using a sankey chart
Raw
data.json
{
"nodes" : [
{
"name" : "150mm Railgun II",
"id" : "final_score"
},
{
"name" : "150mm Railgun I",
"id" : "t1_score"
},
{
"name" : "Morphite",
"id" : "mineral_score"
},
{
"name" : "Robotics",
"id" : "pi_score"
},
{
"name" : "Tritanium",
"id" : "mineral_190"
},
{
"name" : "Pyerite",
"id" : "mineral_228"
},
{
"name" : "Mexallon",
"id" : "mineral_283"
},
{
"name" : "Isogen",
"id" : "mineral_272"
},
{
"name" : "Nocxium",
"id" : "mineral_score"
},
{
"name" : "Zydrine",
"id" : "mineral_score"
},
{
"name" : "R.A.M.- Weapon Tech",
"id" : "component_score"
},
{
"name" : "Superconductor Rails",
"id" : "component_score"
},
{
"name" : "Hypersynaptic Fibers",
"id" : "reaction_score"
},
{
"name" : "Fullerides",
"id" : "reaction_score"
},
{
"name" : "Titanium Carbide",
"id" : "reaction_score"
},
{
"name" : "Child labour",
"id" : "child_score"
},
{
"name" : "Vanadium Halfnite",
"id" : "moongoo_238"
},
{
"name" : "Solerium",
"id" : "moongoo_score"
},
{
"name" : "Dysporite",
"id" : "moongoo_score"
},
{
"name" : "Carbon Polymers",
"id" : "moongoo_score"
},
{
"name" : "Platinum Technite",
"id" : "moongoo_score"
},
{
"name" : "Titamium Chromide",
"id" : "moongoo_score"
},
{
"name" : "Silicon Diborite",
"id" : "moongoo_score"
}
],
"links" : [
{
"source" : 0,
"value" : 1,
"target" : 1
},
{
"source" : 2,
"value" : 2457,
"target" : 4
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>d3.chart.sankey (product demo)</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.rawgit.com/newrelic-forks/d3-plugins-sankey/master/sankey.js"></script>
<script src="//cdn.rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
<script src="//cdn.rawgit.com/q-m/d3.chart.sankey/master/d3.chart.sankey.min.js"></script>
<style>
body {
padding: 10px;
min-width: 600px;
max-width: 1200px;
margin: auto;
}
#chart {
height: 500px;
font: 13px sans-serif;
}
.node rect {
fill-opacity: .9;
shape-rendering: crispEdges;
stroke-width: 0;
}
.node text {
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var colors = {
'product': '#edbd00',
't1': '#367d85',
'component': '#97ba4c',
'reaction': '#f5662b',
'moongoo': '#3f3e47',
'mineral': '#9f9fa3'
};
d3.json("https://rawgit.com/maurerit/9be8ae253dd11d217fa672342e41127a/raw/d37164fb3889ddcec86892fc472d8293feb522cb/data.json", function(error, json) {
var chart = d3.select("#chart").append("svg").chart("Sankey.Path");
chart
.name(label)
.colorNodes(function(name, node) {
return color(node, 1) || colors.fallback;
})
.colorLinks(function(link) {
return color(link.source, 4) || color(link.target, 1) || colors.fallback;
})
.nodeWidth(15)
.nodePadding(10)
.spread(true)
.iterations(0)
.draw(json);
function label(node) {
return node.name.replace(/\s*\(.*?\)$/, '');
}
function color(node, depth) {
var id = node.id.replace(/(_score)?(_\d+)?$/, '');
if (colors[id]) {
return colors[id];
} else if (depth > 0 && node.targetLinks && node.targetLinks.length == 1) {
return color(node.targetLinks[0].source, depth-1);
} else {
return null;
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment