sankey

The above example is intended to demonstrate drawing a simple Sankey diagram using v4 of d3.js. It uses Jason Davies' version of the Sankey plugin.

This is one of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from d3noob's block: Sankey Diagram with v4

forked from wboykinm's block: (Simpler) sankey Diagram with v4

<!DOCTYPE html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/d3-array@1"></script>
	<script src="https://unpkg.com/d3-collection@1"></script>
	<script src="https://unpkg.com/d3-path@1"></script>
	<script src="https://unpkg.com/d3-shape@1"></script>
	<script src="https://unpkg.com/d3-sankey@0"></script>
	<script src="sankey.js"></script>
	<title>d3 in action</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="">
</head>

<body>
	<script>
		var margin = {
				top: 70,
				right: 10,
				bottom: 10,
				left: 100
			},
			width = 700 - margin.left - margin.right,
			height = 350 - margin.top - margin.bottom;

// format variables
		var formatNumber = d3.format(",.0f"), // zero decimal places
			format = function (d) {
				return formatNumber(d) + " " + units;
			}

var color = d3.scaleOrdinal(d3.schemeCategory20);

// append the svg object to the body of the page
		var svg = d3.select("body").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 + ")");

// Set the sankey diagram properties
		var sankey = d3.sankey()
			.nodeWidth(16)
			.nodePadding(20)
			.size([width, height]);

d3.json("sankey.json", function (error, data) {
			console.log(data)
			sankey
				.nodes(data.nodes)
				.links(data.links)
				.layout(50)

var intensityRamp = d3.scaleLinear()
				.domain([0, d3.max(data.links, d => d.value)])
				.range(["#d3d3d3", "#5E1214"])

d3.select("svg").append("g")
				.attr("transform", "translate(20,20)").attr("id", "sankeyG");

d3.select("#sankeyG").selectAll(".link")
				.data(data.links)
				.enter().append("path")
				.attr("class", "link")
				.attr("d", sankey.link())
				.style("stroke-width", d => d.dy)
				.style("stroke-opacity", .5)
				.style("fill", "none")
				.style("stroke", d => intensityRamp(d.value))
				.sort((a, b) => b.dy - a.dy)
				.on("mouseover", function () {
					d3.select(this).style("stroke-opacity", .8);
				})
				.on("mouseout", () => {
					d3.selectAll("path.link").style("stroke-opacity", .5);
				})

d3.select("#sankeyG").selectAll(".node")
				.data(data.nodes)
				.enter().append("g")
				.attr("class", "node")
				.attr("transform", d => `translate(${d.x},${d.y})`)

d3.selectAll(".node").append("rect")
				.attr("height", d => d.dy)
				.attr("width", 20)
				.style("fill", function (d) {
					return d.color = color(d.name);
				})
				.style("stroke", null)

d3.selectAll(".node").append("text")
				.attr("x", 0)
				.attr("y", d => d.dy / 2)
				.attr("text-anchor", "middle")
				.style("fill", "black")
				.text(d => d.name)
		})
	</script>
</body>

</html>

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

https://unpkg.com/d3-array@1

https://unpkg.com/d3-collection@1

https://unpkg.com/d3-path@1

https://unpkg.com/d3-shape@1

https://unpkg.com/d3-sankey@0