Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sankey flow chart
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sankey Flow Chart</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Dependencies -->
<script src="lib/d3.js"></script>
<!-- C3 -->
<link rel="stylesheet" href="../css/c3.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="../js/c3-graph.js"></script>
<style>
.c3.chart, h1 {
font-family: sans-serif;
}
footer {
font-size: x-small;
}
form {
margin-bottom: 1em;
}
.c3.sankey .link.backedge path {
stroke: red !important;
}
</style>
</head>
<body>
<p>
Estimated energy production and use in the United States.
Lawrence Livermore National Laboratory produces a well-known sankey flow chart visualization
of energy use. So, this seemed like a good example for demonstrating flow charts using C3.
</p>
<section>
<h1>
US Energy Use
&nbsp;&nbsp;&nbsp;&nbsp;
<small>
<label>
(Year:
<select id="us_year">
<option value="2014" selected>2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>)
</label>
</small>
</h1>
<form name="us_sankey">
<label>
Animation:
<input id="us_animate" type="checkbox" checked />
</label>
<br/>
<label>
Layout algorithm iterations:
<input id="us_iterations" type="range" min=0 max=64 value=32 />
</label>
<br/>
<label>
Layout alpha factor:
<input id="us_alpha" type="range" min=0.1 max=0.99 step=0.01 value=0.99 />
</label>
<br/>
<label>
Node Width:
<input id="us_node_width" type="range" min=1 max=100 value=100 />
</label>
<label>
<input type="radio" name="us_node_width_type" value="pixels" checked />
Pixels
</label>
<label>
<input type="radio" name="us_node_width_type" value="percent" />
Percent
</label>
<br/>
<label>
Node Padding:
<input id="us_node_padding" type="range" min=1 max=100 value=20 />
</label>
<label>
<input type="radio" name="us_node_padding_type" value="pixels" />
Pixels
</label>
<label>
<input type="radio" name="us_node_padding_type" value="percent" checked />
Percent
</label>
<br/>
<label>
Link paths:
<select id="us_link_path">
<option value="curve" selected>Curved</option>
<option value="straight">Straight</option>
</select>
</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label>
Curvature:
<input type="range" id="us_link_path_curvature" min=0 max=1 value=0.5 step=0.01 />
</label>
<br/>
Labels:
<label>
<input type="radio" name="us_node_label_orientation" value="horizontal" checked />
Horizontal
</label>
<label>
<input type="radio" name="us_node_label_orientation" value="vertical" />
Vertical
</label>
</form>
<div id="us_sankey_flowchart"></div>
<hr />
<footer>
<b>Source</b>: <i>Lawrence Livermore National Laboratory</i>
If this information or a reproduction of it is used, credit must be given to the Livermore National
Laboratory and the Department of Energy, under whose auspices the work was performed.
Distributed electricity represents only retail electricity sales and does not include
self-generation. EIA reports consumption of renewable resources (i.e. hydro, wind, geothermal,
and solar) for electricity in BTU-equivalent values by assuming a typical fossil fuel plant
"heat rate." The efficiency of electricity production is calculated as the total retail electricity
delivered divided by the primary energy input into electricity generation. End use efficiency is
estimated as 65% for the residential and commercial sectors 80% for the industrial sector, and
21% for the transportation sector. Totals may not equal sum of components due to independent rounding.
</footer>
</section>
<section>
<h1>UK Energy Use</h1>
<p>
The following example is similar, but uses energy data from the UK.
This example has been used by other charting libraries, so it seemed useful as an example.
</p>
<form name="uk_sankey">
<label>
<input type="checkbox" id="uk_backedge" checked />
Add <b>cycle</b> / <b>backedge</b> (<i>made up data</i>)
</label>
<br /><br />
<label>
Alignment:
<select id="uk_align">
<option value="left">Left</option>
<option value="both" selected>Both</option>
</select>
</label>
<br />
<label>
Layout algorithm iterations:
<input id="uk_iterations" type="range" min=0 max=64 value=32 />
</label>
<br />
<label>
Layout alpha factor:
<input id="uk_alpha" type="range" min=0.1 max=0.99 step=0.01 value=0.99 />
</label>
<br />
<label>
Node Width:
<input id="uk_node_width" type="range" min=1 max=100 value=30 />
</label>
<label>
<input type="radio" name="uk_node_width_type" value="pixels" checked />
Pixels
</label>
<label>
<input type="radio" name="uk_node_width_type" value="percent" />
Percent
</label>
<br />
<label>
Node Padding:
<input id="uk_node_padding" type="range" min=1 max=100 value=15 />
</label>
<label>
<input type="radio" name="uk_node_padding_type" value="pixels" checked />
Pixels
</label>
<label>
<input type="radio" name="uk_node_padding_type" value="percent" />
Percent
</label>
<br />
<label>
Link paths:
<select id="uk_link_path">
<option value="curve" selected>Curved</option>
<option value="straight">Straight</option>
</select>
</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label>
Curvature:
<input type="range" id="uk_link_path_curvature" min=0 max=1 value=0.5 step=0.01 />
</label>
<br />
<label>
<input type="checkbox" id="uk_node_labels" checked />
Node Labels
</label>
</form>
<div id="uk_sankey_flowchart"></div>
<hr />
<footer>
<b>Sources</b>: <i>
<a href="http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx">UK Department of Energy &amp; Climate Change</a>,
<a href="https://bost.ocks.org/mike/sankey/">D3 Sankey Plugin</a>,
<a href="http://tamc.github.com/Sankey/">Tom Counsell</a>
</i>
</footer>
</section>
<script src="sankey_example.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.