Skip to content

Instantly share code, notes, and snippets.

@carlvlewis

carlvlewis/gist:fd784e60a8e75c0a27ca258270b33136

Created February 16, 2017 07:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carlvlewis/fd784e60a8e75c0a27ca258270b33136 to your computer and use it in GitHub Desktop.
Save carlvlewis/fd784e60a8e75c0a27ca258270b33136 to your computer and use it in GitHub Desktop.
Download ZIP
sankey flow chart
Raw
gistfile1.txt
<!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