Skip to content

Instantly share code, notes, and snippets.



Last active Jan 16, 2020
What would you like to do?
d3.chart.sankey (product demo)

d3.chart.sankey: Reusable D3 Sankey diagram using d3.Chart.

This diagram shows how the ingredients may contribute to the total sustainability of a chocolate bar through different issues.

<!DOCTYPE html>
<meta charset="utf-8">
<title>d3.chart.sankey (product demo)</title>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
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;
<div id="chart"></div>
var colors = {
'environment': '#edbd00',
'social': '#367d85',
'animals': '#97ba4c',
'health': '#f5662b',
'research_ingredient': '#3f3e47',
'fallback': '#9f9fa3'
d3.json("//", function(error, json) {
var chart ="#chart").append("svg").chart("Sankey.Path");
.colorNodes(function(name, node) {
return color(node, 1) || colors.fallback;
.colorLinks(function(link) {
return color(link.source, 4) || color(, 1) || colors.fallback;
function label(node) {
return\s*\(.*?\)$/, '');
function color(node, depth) {
var id =\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;

This comment has been minimized.

Copy link

@rijk82 rijk82 commented Jun 3, 2016

This is great. I'm looking to replicate this using different data - do you have any advice on preparing/structuring the data for the json input? Must the sources and targets under the links be numerical? Is there a straightforward way of mapping these to the node labels?

Many thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment