es2015 d3v4 d3-sankey demo

an es2015 fork of @syntagmatic's d3-sankey demo

Original README.md

Created using the d3-sankey plugin for D3 4.0.

Based on xaranke's port of Mike's Sankey example with drag behavior enabled and several fixes for the d3 version 4.x release.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Sankey Diagram</title>
<style>
  #chart {
    height: 500px;
  }

.node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
  }

.node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
  }

.link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
  }

.link:hover {
    stroke-opacity: .5;
  }
</style>
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-sankey.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
  <script lang='babel' type='text/babel'>
    const margin = {
        top: 1,
        right: 1,
        bottom: 6,
        left: 1
      };

const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;
    const formatNumber = d3.format(',.0f');
    const format = d => `${formatNumber(d)} TWh`;
    const color = d3.scaleOrdinal(d3.schemeCategory20);

const svg = d3.select('#chart').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

const sankey = d3_sankey.sankey()
      .nodeWidth(15)
      .nodePadding(10)
      .size([width, height]);

const path = sankey.link();

d3.json('energy.json', energy => {

sankey
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);

const link = svg.append('g').selectAll('.link')
        .data(energy.links)
        .enter().append('path')
        .attr('class', 'link')
        .attr('d', path)
        .style('stroke-width', d => Math.max(1, d.dy))
        .sort((a, b) => b.dy - a.dy);

link.append('title')
        .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);

const node = svg.append('g').selectAll('.node')
        .data(energy.nodes)
        .enter().append('g')
        .attr('class', 'node')
        .attr('transform', d => `translate(${d.x},${d.y})`)
        .call(d3.drag()
          .subject(d => d)
          .on('start', function() {
            this.parentNode.appendChild(this);
          })
          .on('drag', dragmove));

node.append('rect')
        .attr('height', d => d.dy)
        .attr('width', sankey.nodeWidth())
        .style('fill', d => d.color = color(d.name.replace(/ .*/, '')))
        .style('stroke', d => d3.rgb(d.color).darker(2))
        .append('title')
        .text(d => `${d.name}\n${format(d.value)}`);

node.append('text')
        .attr('x', -6)
        .attr('y', d => d.dy / 2)
        .attr('dy', '.35em')
        .attr('text-anchor', 'end')
        .attr('transform', null)
        .text(d => d.name)
        .filter(d => d.x < width / 2)
        .attr('x', 6 + sankey.nodeWidth())
        .attr('text-anchor', 'start');

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js