Jump To … +

butterfly_example.ts dark_example.ts flamechart_example.ts icicle_sunburst_example.ts legend_example.ts pie_example.ts plot_area_example.ts plot_zoom_example.ts region_example.ts sankey_example.ts scatterplot_example.ts stack_example.ts swimlanes_example.ts sync_example.ts table_searchable_example.ts table_selectable_example.ts table_sortable_example.ts timeline_example.ts worldbank_example.ts

¶

C3 Sankey Energy Use Flow Chart

Demonstrates a Sankey flow chart of energy production and use.
¶

Function to set the color based on the energy node name.
```
var source_color = d3.scale.category20b();
```
¶

Create Sankey visualization for the US
¶

Create Sankey visualization object for United States Energy Data
```
var us_sankey = new c3.Sankey<USEnergyData, USEnergyLink>({
```

Bind to the DOM and set the height

    anchor: '#us_sankey_flowchart',
    height: 600,

Accessor functions to describe how to access the US energy data.

    key: (d) => d.name,
    value: (d) => d.btu,
    link_value: (l) => l.btu,

¶

Set initial node width
```
    node_width: 100,
```

Create tooltips for the energy name.

    node_options: {
        title: (d) => d.name + '\n' + d.btu,
        animate: true,
    },

Style and animate the nodes based on name.

    rect_options: {
        styles: {
            fill: (d) => source_color(d.name),
            stroke: 'black',
        },
        animate: true,
    },

Create tooltips for the links between nodes

    link_options: {
        title: (l) => l.source + " → " + l.target + ": " + l.btu,
    },

Style and animate the links between nodes.

    path_options: {
        styles: {
            stroke: 'blue',
            opacity: 0.5,
        },
        animate: true,
    },

Add text labels for each node

    node_label_options: {
        text: (d) => d.name,
        styles: {
            'font-weight': 'bold',
            'text-shadow': '1px 1px 3px whitesmoke',
        },
        animate: true,
    },
});

Creat Sankey visualization for the UK

var uk_node_label_options: c3.SankeyLabelOptions<UKEnergyData>;

¶

Create Sankey visualization object for United Kingdom Energy Data
```
var uk_sankey = new c3.Sankey<UKEnergyData, UKEnergyLink>({
```

Bind to the DOM and set the height

    anchor: '#uk_sankey_flowchart',
    height: 600,

¶

Accessor functions to describe how to access the UK energy data. In this case, all of these link accessors happen to be the default, so not strictly required. Because no key accessor is provided for the nodes, the key is simply the index into the data array. Because no value accessor is provided for the nodes, the value of the node is derived as the maximum of the input or output links.
```
    link_value: (l) => l.value,
    link_source: (l) => l.source,
    link_target: (l) => l.target,
```
¶

Set the nodes to align on both the left and right sides for those nodes without any inputs or outputs respectively.
```
    align: 'both',
```
¶

Set the default vertical padding between nodes to be 15 pixels. This could also be set to a string for a percentage, such as 20%.
```
    node_padding: 15,
```

Create tooltips for the energy name.

    node_options: {
        title: (d) => d.name,
    },

Style the nodes based on name.

    rect_options: {
        styles: {
            fill: (d) => source_color(d.name.split(' ')[0]),
            stroke: 'black',
        },
    },

Create tooltips for the links between nodes

    link_options: {
        title: (l) => uk_energy_data.nodes[l.source].name + " → " + uk_energy_data.nodes[l.target].name + ": " + l.value,
    },

Style the links between nodes.

    path_options: {
        styles: {
            stroke: 'blue',
            opacity: 0.5,
        },
    },

Add text labels for each node

    node_label_options: uk_node_label_options =  {
        text: (d) => d.name,
        styles: {
            'font-weight': 'bold',
            'text-shadow': '1px 1px 3px whitesmoke',
        },
    },
});

¶

Configure charts based on user behavior

Resize the charts if the window is resized

window.onresize = function () {
    us_sankey.resize();
    uk_sankey.resize();
};

¶

Adjust US flow graph from interactive form

Animate flow changes when changing to data for different years

document.getElementById('us_year').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    us_sankey.data = us_energy_data[+element.value].nodes;
    us_sankey.links = us_energy_data[+element.value].links;
    us_sankey.redraw();
});

Enable animation

document.getElementById('us_animate').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    us_sankey.node_options.animate = element.checked;
    us_sankey.rect_options.animate = element.checked;
    us_sankey.path_options.animate = element.checked;
    us_sankey.node_label_options.animate = element.checked;
});

IE doesn’t support input events

for (let event_name of ['input', 'change']) {

Set layout algorithm iterations

    document.querySelector('#us_iterations').addEventListener(event_name, function () {
        us_sankey.iterations = +this.value;
        us_sankey.redraw();
    });

Set layout algorithm alpha

    document.querySelector('#us_alpha').addEventListener(event_name, function () {
        us_sankey.alpha = +this.value;
        us_sankey.redraw();
    });

Set node width

    document.querySelector('#us_node_width').addEventListener(event_name, function () {
        us_sankey.node_width = +this.value;
        if ((<HTMLInputElement>document.querySelector('input[name=us_node_width_type]:checked')).value === 'percent')
            us_sankey.node_width = us_sankey.node_width + '%';
        us_sankey.redraw();
    });

Set node padding

    document.querySelector('#us_node_padding').addEventListener(event_name, function () {
        us_sankey.node_padding = +this.value;
        if ((<HTMLInputElement>document.querySelector('input[name=us_node_padding_type]:checked')).value === 'percent')
            us_sankey.node_padding = us_sankey.node_padding + '%';
        us_sankey.redraw();
    });

Set link path curvature

    document.getElementById('us_link_path_curvature').addEventListener(event_name, function () {
        us_sankey.link_path_curvature = +this.value;
        us_sankey.redraw();
    });
}

Change node width when changing between percent or pixel based units.

for (let radio of document.forms['us_sankey'].elements['us_node_width_type']) {
    radio.addEventListener('change', function () {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        document.getElementById('us_node_width').dispatchEvent(event);
    });
}

Change node padding when changing between percent or pixel based units.

for (let radio of document.forms['us_sankey'].elements['us_node_padding_type']) {
    radio.addEventListener('change', function () {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        document.getElementById('us_node_padding').dispatchEvent(event);
    });
}

Change between straight and curved paths for links.

document.getElementById('us_link_path').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    us_sankey.link_path = element.value;
    us_sankey.redraw();

NOTE: curved paths should style the stroke while straight paths should style the fill.

    if (element.value === 'curve')
        us_sankey.path_options.styles = { fill: 'none', stroke: 'blue', opacity: 0.5 };
    else if (element.value === 'straight')
        us_sankey.path_options.styles = { fill: 'green', stroke: 'none', opacity: 0.5 };
    us_sankey.restyle();
});

Select horizontal or vertical labels

for (let radio of document.forms['us_sankey'].elements['us_node_label_orientation']) {
    radio.addEventListener('change', function () {
        us_sankey.node_label_options.orientation = this.value;
        us_sankey.redraw();
    });
}

¶

Adjust UK flow graph from interactive form

Set node alignment justification

document.getElementById('uk_align').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    uk_sankey.align = element.value;
    uk_sankey.redraw();
});

IE doesn’t support input events

for (let event_name of ['input', 'change']) {

Set layout algorithm iterations

    document.querySelector('#uk_iterations').addEventListener(event_name, function () {
        uk_sankey.iterations = +this.value;
        uk_sankey.redraw();
    });

Set layout algorithm alpha

    document.querySelector('#uk_alpha').addEventListener(event_name, function () {
        uk_sankey.alpha = +this.value;
        uk_sankey.redraw();
    });

Set node width

    document.querySelector('#uk_node_width').addEventListener(event_name, function () {
        uk_sankey.node_width = +this.value;
        if ((<HTMLInputElement>document.querySelector('input[name=uk_node_width_type]:checked')).value === 'percent')
            uk_sankey.node_width = uk_sankey.node_width + '%';
        uk_sankey.redraw();
    });

Set node padding

    document.querySelector('#uk_node_padding').addEventListener(event_name, function () {
        uk_sankey.node_padding = +this.value;
        if ((<HTMLInputElement>document.querySelector('input[name=uk_node_padding_type]:checked')).value === 'percent')
            uk_sankey.node_padding = uk_sankey.node_padding + '%';
        uk_sankey.redraw();
    });

Set link path curvature

    document.getElementById('uk_link_path_curvature').addEventListener(event_name, function () {
        uk_sankey.link_path_curvature = +this.value;
        uk_sankey.redraw();
    });
}

Change node width when changing between percent or pixel based units.

for (let radio of document.forms['uk_sankey'].elements['uk_node_width_type']) {
    radio.addEventListener('change', function () {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        document.getElementById('uk_node_width').dispatchEvent(event);
    });
}

Change node padding when changing between percent or pixel based units.

for (let radio of document.forms['uk_sankey'].elements['uk_node_padding_type']) {
    radio.addEventListener('change', function () {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        document.getElementById('uk_node_padding').dispatchEvent(event);
    });
}

Change between straight and curved paths for links.

document.getElementById('uk_link_path').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    uk_sankey.link_path = element.value;
    uk_sankey.redraw();

NOTE: curved paths should style the stroke while straight paths should style the fill.

    if (element.value === 'curve')
        uk_sankey.path_options.styles = { fill: 'none', stroke: 'blue', opacity: 0.5 };
    else if (element.value === 'straight')
        uk_sankey.path_options.styles = { fill: 'green', stroke: 'none', opacity: 0.5 };
    uk_sankey.restyle();
});

Enable extra data with backedges to demonstrate support for graphs with backedges / cycles

document.getElementById('uk_backedge').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    uk_sankey.links = element.checked
      ? d3.merge([uk_energy_data.links, uk_energy_data_backedges])
      : uk_energy_data.links;
    uk_sankey.redraw();
});

Enable/disable node labels

document.getElementById('uk_node_labels').addEventListener('change', function () {
    let element = <HTMLInputElement>this;
    uk_sankey.node_label_options = element.checked ? uk_node_label_options : null;
    uk_sankey.redraw();
});

¶

Sample Energy Data
¶

Structure for US energy data
¶

Structure for US energy nodes. name for the name of the node. btu represents the energy flow in Quads BTU units.
```
interface USEnergyData {
    name: string;
    btu: number;
}
```
¶

Structure for the links between US energy nodes. source is the name of the source node for each link. target is the name of the target node for each link. btu represents the energy flow in Quads BTU units.
```
interface USEnergyLink {
    source: string;
    target: string;
    btu: number;
}
```

US Energy Data from Lawrence Livermore National Laboratory

var us_energy_data = {
    2014: {
        nodes: [
            { name: "Solar", btu: 0.427 },
            { name: "Nuclear", btu: 8.33 },
            { name: "Hydro", btu: 2.47 },
            { name: "Wind", btu: 1.73 },
            { name: "Geothermal", btu: 0.202 },
            { name: "Natural Gas", btu: 27.5 },
            { name: "Coal", btu: 17.9 },
            { name: "Biomass", btu: 4.78 },
            { name: "Petroleum", btu: 34.8 },
            { name: "Electricity", btu: 38.564 },
            { name: "Imports", btu: 0.164 },
            { name: "Residential", btu: 11.8 },
            { name: "Commercial", btu: 8.93 },
            { name: "Industrial", btu: 24.7 },
            { name: "Transportation", btu: 27.1 },
            { name: "Wasted", btu: 59.4 },
            { name: "Useful", btu: 38.9 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.17 },
            { source: "Solar", target: "Residential", btu: 0.252 },
            { source: "Nuclear", target: "Electricity", btu: 8.33 },
            { source: "Hydro", target: "Electricity", btu: 2.44 },
            { source: "Hydro", target: "Industrial", btu: 0.0257 },
            { source: "Wind", target: "Electricity", btu: 1.73 },
            { source: "Geothermal", target: "Electricity", btu: 0.159 },
            { source: "Geothermal", target: "Residential", btu: 0.0197 },
            { source: "Geothermal", target: "Commercial", btu: 0.0197 },
            { source: "Natural Gas", target: "Electricity", btu: 8.37 },
            { source: "Natural Gas", target: "Residential", btu: 5.2 },
            { source: "Natural Gas", target: "Commercial", btu: 3.55 },
            { source: "Natural Gas", target: "Industrial", btu: 9.46 },
            { source: "Natural Gas", target: "Transportation", btu: 0.942 },
            { source: "Coal", target: "Electricity", btu: 16.4 },
            { source: "Coal", target: "Commercial", btu: 0.047 },
            { source: "Coal", target: "Industrial", btu: 1.51 },
            { source: "Biomass", target: "Electricity", btu: 0.507 },
            { source: "Biomass", target: "Residential", btu: 0.58 },
            { source: "Biomass", target: "Commercial", btu: 0.119 },
            { source: "Biomass", target: "Industrial", btu: 2.3 },
            { source: "Biomass", target: "Transportation", btu: 1.27 },
            { source: "Petroleum", target: "Electricity", btu: 0.294 },
            { source: "Petroleum", target: "Residential", btu: 0.945 },
            { source: "Petroleum", target: "Commercial", btu: 0.561 },
            { source: "Petroleum", target: "Industrial", btu: 8.16 },
            { source: "Petroleum", target: "Transportation", btu: 24.8 },
            { source: "Imports", target: "Electricity", btu: .164 },
            { source: "Electricity", target: "Wasted", btu: 25.8 },
            { source: "Electricity", target: "Residential", btu: 4.79 },
            { source: "Electricity", target: "Commercial", btu: 4.63 },
            { source: "Electricity", target: "Industrial", btu: 3.26 },
            { source: "Electricity", target: "Transportation", btu: 0.0265 },
            { source: "Residential", target: "Wasted", btu: 4.12 },
            { source: "Commercial", target: "Wasted", btu: 3.13 },
            { source: "Industrial", target: "Wasted", btu: 4.95 },
            { source: "Transportation", target: "Wasted", btu: 21.4 },
            { source: "Residential", target: "Useful", btu: 7.66 },
            { source: "Commercial", target: "Useful", btu: 5.81 },
            { source: "Industrial", target: "Useful", btu: 19.8 },
            { source: "Transportation", target: "Useful", btu: 5.68 },
        ]
    },
    2013: {
        nodes: [
            { name: "Solar", btu: 0.32 },
            { name: "Nuclear", btu: 8.27 },
            { name: "Hydro", btu: 2.56 },
            { name: "Wind", btu: 1.6 },
            { name: "Geothermal", btu: 0.201 },
            { name: "Natural Gas", btu: 26.6 },
            { name: "Coal", btu: 18},
            { name: "Biomass", btu: 4.49 },
            { name: "Petroleum", btu: 35.1 },
            { name: "Electricity", btu: 38.379 },
            { name: "Imports", btu: 0.179 },
            { name: "Residential", btu: 11.4 },
            { name: "Commercial", btu: 8.59 },
            { name: "Industrial", btu: 24.7 },
            { name: "Transportation", btu: 27.0 },
            { name: "Wasted", btu: 59 },
            { name: "Useful", btu: 38.4 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.0849 },
            { source: "Solar", target: "Residential", btu: 0.232 },
            { source: "Nuclear", target: "Electricity", btu: 8.27 },
            { source: "Hydro", target: "Electricity", btu: 2.53 },
            { source: "Hydro", target: "Industrial", btu: 0.032 },
            { source: "Wind", target: "Electricity", btu: 1.59 },
            { source: "Geothermal", target: "Electricity", btu: 0.157 },
            { source: "Geothermal", target: "Residential", btu: 0.0197 },
            { source: "Geothermal", target: "Commercial", btu: 0.0197 },
            { source: "Natural Gas", target: "Electricity", btu: 8.34 },
            { source: "Natural Gas", target: "Residential", btu: 5.05 },
            { source: "Natural Gas", target: "Commercial", btu: 3.36 },
            { source: "Natural Gas", target: "Industrial", btu: 9.08 },
            { source: "Natural Gas", target: "Transportation", btu: 0.795 },
            { source: "Coal", target: "Electricity", btu: 16.5 },
            { source: "Coal", target: "Commercial", btu: 0.0454 },
            { source: "Coal", target: "Industrial", btu: 1.5 },
            { source: "Biomass", target: "Electricity", btu: 0.465 },
            { source: "Biomass", target: "Residential", btu: 0.42 },
            { source: "Biomass", target: "Commercial", btu: 0.112 },
            { source: "Biomass", target: "Industrial", btu: 2.25 },
            { source: "Biomass", target: "Transportation", btu: 1.24 },
            { source: "Petroleum", target: "Electricity", btu: 0.262 },
            { source: "Petroleum", target: "Residential", btu: 0.893 },
            { source: "Petroleum", target: "Commercial", btu: 0.477 },
            { source: "Petroleum", target: "Industrial", btu: 8.58 },
            { source: "Petroleum", target: "Transportation", btu: 24.9 },
            { source: "Imports", target: "Electricity", btu: .179 },
            { source: "Electricity", target: "Wasted", btu: 25.8 },
            { source: "Electricity", target: "Residential", btu: 4.75 },
            { source: "Electricity", target: "Commercial", btu: 4.57 },
            { source: "Electricity", target: "Industrial", btu: 3.26 },
            { source: "Electricity", target: "Transportation", btu: 0.0257 },
            { source: "Residential", target: "Wasted", btu: 3.98 },
            { source: "Commercial", target: "Wasted", btu: 3.01 },
            { source: "Industrial", target: "Wasted", btu: 4.94 },
            { source: "Transportation", target: "Wasted", btu: 21.3 },
            { source: "Residential", target: "Useful", btu: 7.39 },
            { source: "Commercial", target: "Useful", btu: 5.58 },
            { source: "Industrial", target: "Useful", btu: 19.8 },
            { source: "Transportation", target: "Useful", btu: 5.66 },
        ]
    },
    2012: {
        nodes: [
            { name: "Solar", btu: 0.0408 },
            { name: "Nuclear", btu: 8.05 },
            { name: "Hydro", btu: 2.69 },
            { name: "Wind", btu: 1.36 },
            { name: "Geothermal", btu: 0.227 },
            { name: "Natural Gas", btu: 26 },
            { name: "Coal", btu: 17.4 },
            { name: "Biomass", btu: 4.32 },
            { name: "Petroleum", btu: 34.7 },
            { name: "Electricity", btu: 38.261 },
            { name: "Imports", btu: 0.161 },
            { name: "Residential", btu: 10.6 },
            { name: "Commercial", btu: 8.29 },
            { name: "Industrial", btu: 23.9 },
            { name: "Transportation", btu: 26.7 },
            { name: "Wasted", btu: 58.1 },
            { name: "Useful", btu: 37 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.0408 },
            { source: "Solar", target: "Residential", btu: 0.193 },
            { source: "Nuclear", target: "Electricity", btu: 8.05 },
            { source: "Hydro", target: "Electricity", btu: 2.67 },
            { source: "Hydro", target: "Industrial", btu: 0.018 },
            { source: "Wind", target: "Electricity", btu: 1.36 },
            { source: "Geothermal", target: "Electricity", btu: 0.163 },
            { source: "Geothermal", target: "Residential", btu: 0.0396 },
            { source: "Geothermal", target: "Commercial", btu: 0.0197 },
            { source: "Natural Gas", target: "Electricity", btu: 9.31 },
            { source: "Natural Gas", target: "Residential", btu: 4.26 },
            { source: "Natural Gas", target: "Commercial", btu: 2.96 },
            { source: "Natural Gas", target: "Industrial", btu: 8.7 },
            { source: "Natural Gas", target: "Transportation", btu: 0.764 },
            { source: "Coal", target: "Electricity", btu: 15.9 },
            { source: "Coal", target: "Commercial", btu: 0.0433 },
            { source: "Coal", target: "Industrial", btu: 1.48 },
            { source: "Biomass", target: "Electricity", btu: 0.429 },
            { source: "Biomass", target: "Residential", btu: 0.42 },
            { source: "Biomass", target: "Commercial", btu: 0.109 },
            { source: "Biomass", target: "Industrial", btu: 2.2 },
            { source: "Biomass", target: "Transportation", btu: 1.16 },
            { source: "Petroleum", target: "Electricity", btu: 0.218 },
            { source: "Petroleum", target: "Residential", btu: 1.02 },
            { source: "Petroleum", target: "Commercial", btu: 0.632 },
            { source: "Petroleum", target: "Industrial", btu: 8.12 },
            { source: "Petroleum", target: "Transportation", btu: 24.7 },
            { source: "Imports", target: "Electricity", btu: .161 },
            { source: "Electricity", target: "Wasted", btu: 25.7 },
            { source: "Electricity", target: "Residential", btu: 4.69 },
            { source: "Electricity", target: "Commercial", btu: 4.52 },
            { source: "Electricity", target: "Industrial", btu: 3.35 },
            { source: "Electricity", target: "Transportation", btu: 0.0256 },
            { source: "Residential", target: "Wasted", btu: 3.72 },
            { source: "Commercial", target: "Wasted", btu: 2.9 },
            { source: "Industrial", target: "Wasted", btu: 4.77 },
            { source: "Transportation", target: "Wasted", btu: 21.1 },
            { source: "Residential", target: "Useful", btu: 6.9 },
            { source: "Commercial", target: "Useful", btu: 5.39 },
            { source: "Industrial", target: "Useful", btu: 19.1 },
            { source: "Transportation", target: "Useful", btu: 5.6 },
        ]
    },
    2011: {
        nodes: [
            { name: "Solar", btu: 0.158 },
            { name: "Nuclear", btu: 8.26 },
            { name: "Hydro", btu: 3.17 },
            { name: "Wind", btu: 1.17 },
            { name: "Geothermal", btu: 0.226 },
            { name: "Natural Gas", btu: 24.9 },
            { name: "Coal", btu: 19.7 },
            { name: "Biomass", btu: 4.41 },
            { name: "Petroleum", btu: 35.3 },
            { name: "Electricity", btu: 39.327 },
            { name: "Imports", btu: 0.127 },
            { name: "Residential", btu: 11.4 },
            { name: "Commercial", btu: 8.59 },
            { name: "Industrial", btu: 23.6 },
            { name: "Transportation", btu: 27 },
            { name: "Wasted", btu: 55.6 },
            { name: "Useful", btu: 41.7 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.0175 },
            { source: "Solar", target: "Residential", btu: 0.14 },
            { source: "Nuclear", target: "Electricity", btu: 8.26 },
            { source: "Hydro", target: "Electricity", btu: 3.15 },
            { source: "Hydro", target: "Industrial", btu: 0.0179 },
            { source: "Wind", target: "Electricity", btu: 1.17 },
            { source: "Geothermal", target: "Electricity", btu: 0.163 },
            { source: "Geothermal", target: "Residential", btu: 0.0396 },
            { source: "Geothermal", target: "Commercial", btu: 0.0197 },
            { source: "Natural Gas", target: "Electricity", btu: 7.74 },
            { source: "Natural Gas", target: "Residential", btu: 4.83 },
            { source: "Natural Gas", target: "Commercial", btu: 3.23 },
            { source: "Natural Gas", target: "Industrial", btu: 8.32 },
            { source: "Natural Gas", target: "Transportation", btu: 0.735 },
            { source: "Coal", target: "Electricity", btu: 18 },
            { source: "Coal", target: "Commercial", btu: 0.0512 },
            { source: "Coal", target: "Industrial", btu: 1.61 },
            { source: "Biomass", target: "Electricity", btu: 0.444 },
            { source: "Biomass", target: "Residential", btu: 0.43 },
            { source: "Biomass", target: "Commercial", btu: 0.11 },
            { source: "Biomass", target: "Industrial", btu: 2.27 },
            { source: "Biomass", target: "Transportation", btu: 1.15 },
            { source: "Petroleum", target: "Electricity", btu: 0.288 },
            { source: "Petroleum", target: "Residential", btu: 1.14 },
            { source: "Petroleum", target: "Commercial", btu: 0.683 },
            { source: "Petroleum", target: "Industrial", btu: 8.06 },
            { source: "Petroleum", target: "Transportation", btu: 25.1 },
            { source: "Imports", target: "Electricity", btu: .127 },
            { source: "Electricity", target: "Wasted", btu: 26.6 },
            { source: "Electricity", target: "Residential", btu: 4.86 },
            { source: "Electricity", target: "Commercial", btu: 4.5 },
            { source: "Electricity", target: "Industrial", btu: 3.33 },
            { source: "Electricity", target: "Transportation", btu: 0.026 },
            { source: "Residential", target: "Wasted", btu: 2.29 },
            { source: "Commercial", target: "Wasted", btu: 1.72 },
            { source: "Industrial", target: "Wasted", btu: 4.72 },
            { source: "Transportation", target: "Wasted", btu: 20.3 },
            { source: "Residential", target: "Useful", btu: 9.15 },
            { source: "Commercial", target: "Useful", btu: 6.87 },
            { source: "Industrial", target: "Useful", btu: 18.9 },
            { source: "Transportation", target: "Useful", btu: 6.76 },
        ]
    },
    2010: {
        nodes: [
            { name: "Solar", btu: 0.13 },
            { name: "Nuclear", btu: 8.4 },
            { name: "Hydro", btu: 2.5 },
            { name: "Wind", btu: 0.92 },
            { name: "Geothermal", btu: 0.210 },
            { name: "Natural Gas", btu: 25 },
            { name: "Coal", btu: 21 },
            { name: "Biomass", btu: 3.5 },
            { name: "Petroleum", btu: 36 },
            { name: "Electricity", btu: 40.029 },
            { name: "Imports", btu: 0.029 },
            { name: "Residential", btu: 12 },
            { name: "Commercial", btu: 8.5 },
            { name: "Industrial", btu: 24 },
            { name: "Transportation", btu: 27 },
            { name: "Wasted", btu: 60 },
            { name: "Useful", btu: 38 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.012 },
            { source: "Solar", target: "Residential", btu: 0.110 },
            { source: "Nuclear", target: "Electricity", btu: 8.4 },
            { source: "Hydro", target: "Electricity", btu: 2.5 },
            { source: "Hydro", target: "Commercial", btu: .79 },
            { source: "Hydro", target: "Industrial", btu: 0.016 },
            { source: "Wind", target: "Electricity", btu: 0.92 },
            { source: "Geothermal", target: "Electricity", btu: 0.15 },
            { source: "Geothermal", target: "Residential", btu: 0.037 },
            { source: "Geothermal", target: "Commercial", btu: 0.019 },
            { source: "Geothermal", target: "Industrial", btu: 0.0042 },
            { source: "Natural Gas", target: "Electricity", btu: 7.6 },
            { source: "Natural Gas", target: "Residential", btu: 4.9 },
            { source: "Natural Gas", target: "Commercial", btu: 3.2 },
            { source: "Natural Gas", target: "Industrial", btu: 8.3 },
            { source: "Natural Gas", target: "Transportation", btu: 0.72 },
            { source: "Coal", target: "Electricity", btu: 19 },
            { source: "Coal", target: "Commercial", btu: 0.07 },
            { source: "Coal", target: "Industrial", btu: 1.6 },
            { source: "Biomass", target: "Electricity", btu: 0.46 },
            { source: "Biomass", target: "Residential", btu: 0.44 },
            { source: "Biomass", target: "Commercial", btu: 0.11 },
            { source: "Biomass", target: "Industrial", btu: 1.5 },
            { source: "Biomass", target: "Transportation", btu: 1 },
            { source: "Petroleum", target: "Electricity", btu: 0.38 },
            { source: "Petroleum", target: "Residential", btu: 1.1 },
            { source: "Petroleum", target: "Commercial", btu: 0.65 },
            { source: "Petroleum", target: "Industrial", btu: 8.2 },
            { source: "Petroleum", target: "Transportation", btu: 26 },
            { source: "Imports", target: "Electricity", btu: 0.029 },
            { source: "Electricity", target: "Wasted", btu: 27 },
            { source: "Electricity", target: "Residential", btu: 4.9 },
            { source: "Electricity", target: "Commercial", btu: 4.5 },
            { source: "Electricity", target: "Industrial", btu: 3.33 },
            { source: "Electricity", target: "Transportation", btu: 0.026 },
            { source: "Residential", target: "Wasted", btu: 4 },
            { source: "Commercial", target: "Wasted", btu: 3 },
            { source: "Industrial", target: "Wasted", btu: 4.7 },
            { source: "Transportation", target: "Wasted", btu: 22 },
            { source: "Residential", target: "Useful", btu: 7.5 },
            { source: "Commercial", target: "Useful", btu: 5.6 },
            { source: "Industrial", target: "Useful", btu: 19 },
            { source: "Transportation", target: "Useful", btu: 5.8 },
        ]
    },
    2009: {
        nodes: [
            { name: "Solar", btu: 0.32 },
            { name: "Nuclear", btu: 8.27 },
            { name: "Hydro", btu: 2.56 },
            { name: "Wind", btu: 1.6 },
            { name: "Geothermal", btu: 0.201 },
            { name: "Natural Gas", btu: 26.6 },
            { name: "Coal", btu: 18 },
            { name: "Biomass", btu: 4.49 },
            { name: "Petroleum", btu: 35.1 },
            { name: "Electricity", btu: 38.379 },
            { name: "Imports", btu: 0.179 },
            { name: "Residential", btu: 11.4 },
            { name: "Commercial", btu: 8.59 },
            { name: "Industrial", btu: 24.7 },
            { name: "Transportation", btu: 27 },
            { name: "Wasted", btu: 59 },
            { name: "Useful", btu: 38.4 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.0849 },
            { source: "Solar", target: "Residential", btu: 0.232 },
            { source: "Nuclear", target: "Electricity", btu: 8.27 },
            { source: "Hydro", target: "Electricity", btu: 2.53 },
            { source: "Hydro", target: "Industrial", btu: 0.032 },
            { source: "Wind", target: "Electricity", btu: 1.59 },
            { source: "Geothermal", target: "Electricity", btu: 0.157 },
            { source: "Geothermal", target: "Residential", btu: 0.0197 },
            { source: "Geothermal", target: "Commercial", btu: 0.0197 },
            { source: "Natural Gas", target: "Electricity", btu: 8.34 },
            { source: "Natural Gas", target: "Residential", btu: 5.05 },
            { source: "Natural Gas", target: "Commercial", btu: 3.36 },
            { source: "Natural Gas", target: "Industrial", btu: 9.08 },
            { source: "Natural Gas", target: "Transportation", btu: 0.795 },
            { source: "Coal", target: "Electricity", btu: 16.5 },
            { source: "Coal", target: "Commercial", btu: 0.0454 },
            { source: "Coal", target: "Industrial", btu: 1.5 },
            { source: "Biomass", target: "Electricity", btu: 0.465 },
            { source: "Biomass", target: "Residential", btu: 0.42 },
            { source: "Biomass", target: "Commercial", btu: 0.112 },
            { source: "Biomass", target: "Industrial", btu: 2.25 },
            { source: "Biomass", target: "Transportation", btu: 1.24 },
            { source: "Petroleum", target: "Electricity", btu: 0.262 },
            { source: "Petroleum", target: "Residential", btu: 0.893 },
            { source: "Petroleum", target: "Commercial", btu: 0.477 },
            { source: "Petroleum", target: "Industrial", btu: 8.58 },
            { source: "Petroleum", target: "Transportation", btu: 24.9 },
            { source: "Imports", target: "Electricity", btu: 0.179 },
            { source: "Electricity", target: "Wasted", btu: 25.8 },
            { source: "Electricity", target: "Residential", btu: 4.75 },
            { source: "Electricity", target: "Commercial", btu: 4.57 },
            { source: "Electricity", target: "Industrial", btu: 3.26 },
            { source: "Electricity", target: "Transportation", btu: 0.0257 },
            { source: "Residential", target: "Wasted", btu: 3.98 },
            { source: "Commercial", target: "Wasted", btu: 3.01 },
            { source: "Industrial", target: "Wasted", btu: 4.94 },
            { source: "Transportation", target: "Wasted", btu: 21.3 },
            { source: "Residential", target: "Useful", btu: 7.39 },
            { source: "Commercial", target: "Useful", btu: 5.58 },
            { source: "Industrial", target: "Useful", btu: 19.8 },
            { source: "Transportation", target: "Useful", btu: 5.66 },
        ]
    },
    2008: {
        nodes: [
            { name: "Solar", btu: 0.09 },
            { name: "Nuclear", btu: 8.45 },
            { name: "Hydro", btu: 2.45 },
            { name: "Wind", btu: 0.51 },
            { name: "Geothermal", btu: 0.35 },
            { name: "Natural Gas", btu: 23.84 },
            { name: "Coal", btu: 22.42 },
            { name: "Biomass", btu: 3.88 },
            { name: "Petroleum", btu: 37.13 },
            { name: "Electricity", btu: 40.08 },
            { name: "Imports", btu: 0.11 },
            { name: "Residential", btu: 11.48 },
            { name: "Commercial", btu: 8.58 },
            { name: "Industrial", btu: 23.94 },
            { name: "Transportation", btu: 27.86 },
            { name: "Wasted", btu: 57.07 },
            { name: "Useful", btu: 42.15 },
            { name: "EXTRA NODE", btu: 99999 },  // Demonstrate node with no links is not rendered
        ], links: [
            { source: "Solar", target: "Electricity", btu: 0.01 },
            { source: "Solar", target: "Residential", btu: 0.08 },
            { source: "Nuclear", target: "Electricity", btu: 8.45 },
            { source: "Hydro", target: "Electricity", btu: 2.43 },
            { source: "Hydro", target: "Industrial", btu: 0.01 },
            { source: "Wind", target: "Electricity", btu: 0.51 },
            { source: "Geothermal", target: "Electricity", btu: 0.31 },
            { source: "Geothermal", target: "Residential", btu: 0.02 },
            { source: "Geothermal", target: "Commercial", btu: 0.01 },
            { source: "Natural Gas", target: "Electricity", btu: 6.82 },
            { source: "Natural Gas", target: "Residential", btu: 4.99 },
            { source: "Natural Gas", target: "Commercial", btu: 3.2 },
            { source: "Natural Gas", target: "Industrial", btu: 8.14 },
            { source: "Natural Gas", target: "Transportation", btu: 0.67 },
            { source: "Coal", target: "Electricity", btu: 20.54 },
            { source: "Coal", target: "Commercial", btu: 0.06 },
            { source: "Coal", target: "Industrial", btu: 1.79 },
            { source: "Biomass", target: "Electricity", btu: 0.42 },
            { source: "Biomass", target: "Residential", btu: 0.49 },
            { source: "Biomass", target: "Commercial", btu: 0.1 },
            { source: "Biomass", target: "Industrial", btu: 2.03 },
            { source: "Biomass", target: "Transportation", btu: 0.83 },
            { source: "Petroleum", target: "Electricity", btu: 0.46 },
            { source: "Petroleum", target: "Residential", btu: 1.17 },
            { source: "Petroleum", target: "Commercial", btu: 0.57 },
            { source: "Petroleum", target: "Industrial", btu: 8.58 },
            { source: "Petroleum", target: "Transportation", btu: 26.33 },
            { source: "Imports", target: "Electricity", btu: 0.11 },
            { source: "Electricity", target: "Wasted", btu: 27.39 },
            { source: "Electricity", target: "Residential", btu: 4.7 },
            { source: "Electricity", target: "Commercial", btu: 4.61 },
            { source: "Electricity", target: "Industrial", btu: 3.35 },
            { source: "Electricity", target: "Transportation", btu: 0.02 },
            { source: "Residential", target: "Wasted", btu: 2.29 },
            { source: "Commercial", target: "Wasted", btu: 1.71 },
            { source: "Industrial", target: "Wasted", btu: 4.78 },
            { source: "Transportation", target: "Wasted", btu: 20.9 },
            { source: "Residential", target: "Useful", btu: 9.18 },
            { source: "Commercial", target: "Useful", btu: 6.86 },
            { source: "Industrial", target: "Useful", btu: 19.15 },
            { source: "Transportation", target: "Useful", btu: 6.96 },
        ]
    },
};

Render the Sankey Flow Graph with US energy data

us_sankey.render({ data: us_energy_data[2014].nodes, links: us_energy_data[2014].links });

¶

Structure for UK energy data
¶

Structure for UK energy nodes just contain a name of the node
```
interface UKEnergyData {
    name: string;
}
```
¶

Structure for UK links between nodes. source index of the energy node for the source side of this link. target index of the energy node for the target side of this link. value of the energy flow through this link.
```
interface UKEnergyLink {
    source: number;
    target: number;
    value: number;
}
```

UK Energy Data from the UK Dept of Energy & Climate Change

var uk_energy_data = {
    nodes: [
        { "name": "Agricultural 'waste'" },
        { "name": "Bio-conversion" },
        { "name": "Liquid" },
        { "name": "Losses" },
        { "name": "Solid" },
        { "name": "Gas" }, // 5
        { "name": "Biofuel imports" },
        { "name": "Biomass imports" },
        { "name": "Coal imports" },
        { "name": "Coal" },
        { "name": "Coal reserves" },
        { "name": "District heating" },
        { "name": "Industry" },
        { "name": "Heating and cooling - commercial" },
        { "name": "Heating and cooling - homes" },
        { "name": "Electricity grid" }, // 15
        { "name": "Over generation / exports" },
        { "name": "H2 conversion" },
        { "name": "Road transport" },
        { "name": "Agriculture" },
        { "name": "Rail transport" },
        { "name": "Lighting & appliances - commercial" },
        { "name": "Lighting & appliances - homes" },
        { "name": "Gas imports" },
        { "name": "Ngas" }, // 24
        { "name": "Gas reserves" },
        { "name": "Thermal generation" },
        { "name": "Geothermal" },
        { "name": "H2" },
        { "name": "Hydro" },
        { "name": "International shipping" },
        { "name": "Domestic aviation" },
        { "name": "International aviation" },
        { "name": "National navigation" },
        { "name": "Marine algae" },
        { "name": "Nuclear" },
        { "name": "Oil imports" },
        { "name": "Oil" }, // 37
        { "name": "Oil reserves" },
        { "name": "Other waste" },
        { "name": "Pumped heat" },
        { "name": "Solar PV" },
        { "name": "Solar Thermal" },
        { "name": "Solar" },
        { "name": "Tidal" },
        { "name": "UK land based bioenergy" },
        { "name": "Wave" },
        { "name": "Wind" }
    ],
    links: [
        { "source": 0, "target": 1, "value": 124.729 },
        { "source": 1, "target": 2, "value": 0.597 },
        { "source": 1, "target": 3, "value": 26.862 },
        { "source": 1, "target": 4, "value": 280.322 },
        { "source": 1, "target": 5, "value": 81.144 },
        { "source": 6, "target": 2, "value": 35 },
        { "source": 7, "target": 4, "value": 35 },
        { "source": 8, "target": 9, "value": 11.606 },
        { "source": 10, "target": 9, "value": 63.965 },
        { "source": 9, "target": 4, "value": 75.571 },
        { "source": 11, "target": 12, "value": 10.639 },
        { "source": 11, "target": 13, "value": 22.505 },
        { "source": 11, "target": 14, "value": 46.184 },
        { "source": 15, "target": 16, "value": 104.453 },
        { "source": 15, "target": 14, "value": 113.726 },
        { "source": 15, "target": 17, "value": 27.14 },
        { "source": 15, "target": 12, "value": 342.165 },
        { "source": 15, "target": 18, "value": 37.797 },
        { "source": 15, "target": 19, "value": 4.412 },
        { "source": 15, "target": 13, "value": 40.858 },
        { "source": 15, "target": 3, "value": 56.691 },
        { "source": 15, "target": 20, "value": 7.863 },
        { "source": 15, "target": 21, "value": 90.008 },
        { "source": 15, "target": 22, "value": 93.494 },
        { "source": 23, "target": 24, "value": 40.719 },
        { "source": 25, "target": 24, "value": 82.233 },
        { "source": 5, "target": 13, "value": 0.129 },
        { "source": 5, "target": 3, "value": 1.401 },
        { "source": 5, "target": 26, "value": 151.891 },
        { "source": 5, "target": 19, "value": 2.096 },
        { "source": 5, "target": 12, "value": 48.58 },
        { "source": 27, "target": 15, "value": 7.013 },
        { "source": 17, "target": 28, "value": 20.897 },
        { "source": 17, "target": 3, "value": 6.242 },
        { "source": 28, "target": 18, "value": 20.897 },
        { "source": 29, "target": 15, "value": 6.995 },
        { "source": 2, "target": 12, "value": 121.066 },
        { "source": 2, "target": 30, "value": 128.69 },
        { "source": 2, "target": 18, "value": 135.835 },
        { "source": 2, "target": 31, "value": 14.458 },
        { "source": 2, "target": 32, "value": 206.267 },
        { "source": 2, "target": 19, "value": 3.64 },
        { "source": 2, "target": 33, "value": 33.218 },
        { "source": 2, "target": 20, "value": 4.413 },
        { "source": 34, "target": 1, "value": 4.375 },
        { "source": 24, "target": 5, "value": 122.952 },
        { "source": 35, "target": 26, "value": 839.978 },
        { "source": 36, "target": 37, "value": 504.287 },
        { "source": 38, "target": 37, "value": 107.703 },
        { "source": 37, "target": 2, "value": 611.99 },
        { "source": 39, "target": 4, "value": 56.587 },
        { "source": 39, "target": 1, "value": 77.81 },
        { "source": 40, "target": 14, "value": 193.026 },
        { "source": 40, "target": 13, "value": 70.672 },
        { "source": 41, "target": 15, "value": 59.901 },
        { "source": 42, "target": 14, "value": 19.263 },
        { "source": 43, "target": 42, "value": 19.263 },
        { "source": 43, "target": 41, "value": 59.901 },
        { "source": 4, "target": 19, "value": 0.882 },
        { "source": 4, "target": 26, "value": 400.12 },
        { "source": 4, "target": 12, "value": 46.477 },
        { "source": 26, "target": 15, "value": 525.531 },
        { "source": 26, "target": 3, "value": 787.129 },
        { "source": 26, "target": 11, "value": 79.329 },
        { "source": 44, "target": 15, "value": 9.452 },
        { "source": 45, "target": 1, "value": 182.01 },
        { "source": 46, "target": 15, "value": 19.013 },
        { "source": 47, "target": 15, "value": 289.366 },
    ]
};

Cycles / Backedges - Made up data

var uk_energy_data_backedges = [
    { "source": 11, "target": 26, "value": 80 },
];

Render the Sankey Flow Graph with UK energy data

uk_sankey.render({
    data: uk_energy_data.nodes,
    links: d3.merge([uk_energy_data.links, uk_energy_data_backedges]),
});

C3 Sankey Energy Use Flow Chart

Create Sankey visualization for the US

Creat Sankey visualization for the UK

Configure charts based on user behavior

Adjust US flow graph from interactive form

Adjust UK flow graph from interactive form

Sample Energy Data

Structure for US energy data

US Energy Data from Lawrence Livermore National Laboratory

Structure for UK energy data

UK Energy Data from the UK Dept of Energy & Climate Change