| license: mit |
This is a sankey diagram used as an example in the book D3 Tips and Tricks v4. It is based on a simpler version here.
It demonstrates the construction of a sankey diagram using d3.js from external csv data that is formatted using just link data and named values.
forked from d3noob's block: Sankey diagram using a csv file with v4
forked from Calamitizer's block: Sankey diagram using a csv file with v4
| source | target | value | |
|---|---|---|---|
| A | B | 15 | |
| B | C | 4 | |
| B | D | 3 | |
| B | E | 6 |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Demand Scoring Sankey</title> | |
| <link | |
| href="https://www.cisco.com/etc/designs/cdc/clientlibs/responsive/css/cisco-sans.min.css" | |
| rel="stylesheet" | |
| type="text/css" | |
| /> | |
| </head> | |
| <style> | |
| .node rect { | |
| cursor: move; | |
| /* fill-opacity: .9; */ | |
| shape-rendering: geometricPrecision; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| /* text-shadow: 0 0 0 rgba(0, 0, 0, 0.5); */ | |
| font-family: CiscoSans; | |
| font-weight: 200; | |
| fill: #000; | |
| } | |
| .link { | |
| fill: none; | |
| /* stroke: #000; */ | |
| stroke-opacity: .5; | |
| } | |
| .link:hover { | |
| stroke-opacity: .5; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="sankey.js"></script> | |
| <script src="render.js"></script> | |
| </body> |
| const units = "Widgets"; | |
| // set the dimensions and margins of the graph | |
| const margin = { top: 10, right: 200, bottom: 10, left: 10 }; | |
| const width = 700 - margin.left - margin.right; | |
| const height = 230 - margin.top - margin.bottom; | |
| const Node = { | |
| A: "A", | |
| B: "B", | |
| C: "C", | |
| D: "D", | |
| E: "E" | |
| }; | |
| const getNodeName = node => | |
| ({ | |
| [Node.A]: "Lead Candidates", | |
| [Node.B]: "Demand Scoring", | |
| [Node.C]: "Ready_to be_Contacted", | |
| [Node.D]: "Needs_More Development", | |
| [Node.E]: "No_Further Action" | |
| }[node]); | |
| const getIdName = ({ name }) => name.replace(/ /g, ""); | |
| const getWidthFactor = node => | |
| ({ | |
| [Node.A]: 1, | |
| [Node.B]: 1, | |
| [Node.C]: 1, | |
| [Node.D]: 1, | |
| [Node.E]: 1 | |
| }[node]); | |
| const colors = { | |
| [Node.A]: "#005073", | |
| [Node.B]: "#00bceb", | |
| [Node.C]: "#6ebe4a", | |
| [Node.D]: "#fbab18", | |
| [Node.E]: "#e2231a" | |
| }; | |
| const color = node => colors[node]; | |
| const getTransform = (x, y) => `translate(${x},${y})`; | |
| // append the svg object to the body of the page | |
| const svg = d3 | |
| .select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", getTransform(margin.left, margin.top)); | |
| // Set the sankey diagram properties | |
| const sankey = d3 | |
| .sankey() | |
| .nodeWidth(100) | |
| .nodePadding(40) | |
| .size([width, height]); | |
| const getWidth = node => getWidthFactor(node) * sankey.nodeWidth(); | |
| const verticalPadding = 10; | |
| const getXOffset = node => 0; | |
| // name === "Demand Scoring" || name === "No Further Action" | |
| // ? -getWidth(name) / 2 | |
| // : 0; | |
| const path = sankey.link(); | |
| // load the data | |
| d3.csv("data.csv", function(error, data) { | |
| //set up graph in same style as original example but empty | |
| graph = { nodes: [], links: [] }; | |
| data.forEach(({ source, target, value }) => { | |
| graph.nodes.push({ name: source }); | |
| graph.nodes.push({ name: target }); | |
| graph.links.push({ source, target, value: +value }); | |
| }); | |
| // return only the distinct / unique nodes | |
| graph.nodes = d3.keys( | |
| d3 | |
| .nest() | |
| .key(({ name }) => name) | |
| .object(graph.nodes) | |
| ); | |
| // loop through each link replacing the text with its index from node | |
| graph.links.forEach(function(d, i) { | |
| graph.links[i].source = graph.nodes.indexOf(graph.links[i].source); | |
| graph.links[i].target = graph.nodes.indexOf(graph.links[i].target); | |
| }); | |
| // now loop through each nodes to make nodes an array of objects | |
| // rather than an array of strings | |
| graph.nodes.forEach((d, i) => { | |
| graph.nodes[i] = { name: d }; | |
| }); | |
| sankey | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .layout(32); | |
| // add in the links | |
| const linkG = svg | |
| .append("g") | |
| .selectAll(".link") | |
| .data(graph.links) | |
| .enter(); | |
| linkG | |
| .append("path") | |
| .attr("class", "link") | |
| .attr("d", path) | |
| .style("stroke-width", ({ dy }) => Math.max(1, dy)) | |
| .sort((a, b) => b.dy - a.dy); | |
| const linkGradient = linkG | |
| .append("linearGradient") | |
| .attr("id", d => { | |
| const gradientId = `${getIdName(d.source)}${getIdName(d.target)}`; | |
| d.gradientId = gradientId; | |
| return gradientId; | |
| }) | |
| .attr("gradientUnits", "userSpaceOnUse") | |
| .attr("x1", d => d.source.x1) | |
| .attr("x2", d => d.target.x0); | |
| linkGradient | |
| .append("stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", d => color(d.source.name)); | |
| linkGradient | |
| .append("stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", d => color(d.target.name)); | |
| linkG.selectAll("path").attr("stroke", d => `url(#${d.gradientId})`); | |
| // linkG.selectAll("path").attr("stroke", d => '#000'); | |
| // add in the nodes | |
| const node = svg | |
| .append("g") | |
| .selectAll(".node") | |
| .data(graph.nodes) | |
| .enter() | |
| .append("g") | |
| .attr("class", "node") | |
| .attr("transform", ({ x, y }) => getTransform(x, y)); | |
| // .call( | |
| // d3 | |
| // .drag() | |
| // .subject(d => d) | |
| // .on("start", () => { | |
| // this.parentNode.appendChild(this); | |
| // }) | |
| // .on("drag", dragmove) | |
| // ); | |
| // add the rectangles for the nodes | |
| node | |
| .append("rect") | |
| .attr("x", ({ name }) => getXOffset(name)) | |
| .attr("rx", verticalPadding) | |
| .attr("ry", verticalPadding * (2 / 3)) | |
| .attr("y", -verticalPadding) | |
| .attr("height", ({ dy }) => dy + 2 * verticalPadding) | |
| .attr("width", ({ name }) => getWidth(name)) | |
| .style("fill", d => { | |
| const c = d3 | |
| .rgb(color(d.name)) | |
| .brighter(d.name === Node.E ? 2.5 : d.name === Node.A ? 1 : 0); | |
| d.color = c; | |
| return c; | |
| }) | |
| .attr("stroke", ({ name, color }) => | |
| d3.rgb(color).darker(name === "C" ? 3 : 1) | |
| ) | |
| .attr("stroke-opacity", 1) | |
| .attr("stroke-width", 1.3); | |
| // add in the title for the nodes | |
| const xPosition = name => getWidth(name) / 2; | |
| node | |
| .append("text") | |
| // .attr("y", ({ dy }) => dy / 2) | |
| .attr("text-anchor", "middle") | |
| .attr("dominant-baseline", "middle") | |
| .attr("transform", null) | |
| .each(function(d) { | |
| const el = d3.select(this); | |
| getNodeName(d.name) | |
| .split(" ") | |
| .forEach((word, i, { length }) => { | |
| el.append("tspan") | |
| .attr("x", ({ name }) => xPosition(name) + getXOffset(name)) | |
| .attr("y", ({ dy }) => dy / 2) | |
| .attr("dy", `${i - (length - 1) / 2}em`) | |
| .text(word.replace(/_/g, " ")); | |
| }); | |
| // const tspan = selection.append("tspan") | |
| // const datum = selection.data(); | |
| // tspan.text(({ name }) => datum); | |
| }); | |
| // .text(({ name }) => name.replace(/ /, `\n`)); | |
| // .filter(({ x }) => x < width / 2) | |
| // .attr("x", 6 + sankey.nodeWidth()) | |
| // .attr("text-anchor", "start"); | |
| // the function for moving the nodes | |
| // function dragmove(d) { | |
| // d3.select(this).attr( | |
| // "transform", | |
| // "translate(" + | |
| // d.x + | |
| // "," + | |
| // (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + | |
| // ")" | |
| // ); | |
| // sankey.relayout(); | |
| // link.attr("d", path); | |
| // } | |
| }); |
| d3.sankey = function() { | |
| var sankey = {}, | |
| nodeWidth = 24, | |
| nodePadding = 8, | |
| size = [1, 1], | |
| nodes = [], | |
| links = []; | |
| sankey.nodeWidth = function(_) { | |
| if (!arguments.length) return nodeWidth; | |
| nodeWidth = +_; | |
| return sankey; | |
| }; | |
| sankey.nodePadding = function(_) { | |
| if (!arguments.length) return nodePadding; | |
| nodePadding = +_; | |
| return sankey; | |
| }; | |
| sankey.nodes = function(_) { | |
| if (!arguments.length) return nodes; | |
| nodes = _; | |
| return sankey; | |
| }; | |
| sankey.links = function(_) { | |
| if (!arguments.length) return links; | |
| links = _; | |
| return sankey; | |
| }; | |
| sankey.size = function(_) { | |
| if (!arguments.length) return size; | |
| size = _; | |
| return sankey; | |
| }; | |
| sankey.layout = function(iterations) { | |
| computeNodeLinks(); | |
| computeNodeValues(); | |
| computeNodeBreadths(); | |
| computeNodeDepths(iterations); | |
| computeLinkDepths(); | |
| return sankey; | |
| }; | |
| sankey.relayout = function() { | |
| computeLinkDepths(); | |
| return sankey; | |
| }; | |
| sankey.link = function() { | |
| var curvature = .5; | |
| function link(d) { | |
| var x0 = d.source.x + d.source.dx, | |
| x1 = d.target.x, | |
| xi = d3.interpolateNumber(x0, x1), | |
| x2 = xi(curvature), | |
| x3 = xi(1 - curvature), | |
| y0 = d.source.y + d.sy + d.dy / 2, | |
| y1 = d.target.y + d.ty + d.dy / 2; | |
| return "M" + x0 + "," + y0 | |
| + "C" + x2 + "," + y0 | |
| + " " + x3 + "," + y1 | |
| + " " + x1 + "," + y1; | |
| } | |
| link.curvature = function(_) { | |
| if (!arguments.length) return curvature; | |
| curvature = +_; | |
| return link; | |
| }; | |
| return link; | |
| }; | |
| // Populate the sourceLinks and targetLinks for each node. | |
| // Also, if the source and target are not objects, assume they are indices. | |
| function computeNodeLinks() { | |
| nodes.forEach(function(node) { | |
| node.sourceLinks = []; | |
| node.targetLinks = []; | |
| }); | |
| links.forEach(function(link) { | |
| var source = link.source, | |
| target = link.target; | |
| if (typeof source === "number") source = link.source = nodes[link.source]; | |
| if (typeof target === "number") target = link.target = nodes[link.target]; | |
| source.sourceLinks.push(link); | |
| target.targetLinks.push(link); | |
| }); | |
| } | |
| // Compute the value (size) of each node by summing the associated links. | |
| function computeNodeValues() { | |
| nodes.forEach(function(node) { | |
| node.value = Math.max( | |
| d3.sum(node.sourceLinks, value), | |
| d3.sum(node.targetLinks, value) | |
| ); | |
| }); | |
| } | |
| // Iteratively assign the breadth (x-position) for each node. | |
| // Nodes are assigned the maximum breadth of incoming neighbors plus one; | |
| // nodes with no incoming links are assigned breadth zero, while | |
| // nodes with no outgoing links are assigned the maximum breadth. | |
| function computeNodeBreadths() { | |
| var remainingNodes = nodes, | |
| nextNodes, | |
| x = 0; | |
| while (remainingNodes.length) { | |
| nextNodes = []; | |
| remainingNodes.forEach(function(node) { | |
| node.x = x; | |
| node.dx = nodeWidth; | |
| node.sourceLinks.forEach(function(link) { | |
| if (nextNodes.indexOf(link.target) < 0) { | |
| nextNodes.push(link.target); | |
| } | |
| }); | |
| }); | |
| remainingNodes = nextNodes; | |
| ++x; | |
| } | |
| // | |
| moveSinksRight(x); | |
| scaleNodeBreadths((size[0] - nodeWidth) / (x - 1)); | |
| } | |
| function moveSourcesRight() { | |
| nodes.forEach(function(node) { | |
| if (!node.targetLinks.length) { | |
| node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1; | |
| } | |
| }); | |
| } | |
| function moveSinksRight(x) { | |
| nodes.forEach(function(node) { | |
| if (!node.sourceLinks.length) { | |
| node.x = x - 1; | |
| } | |
| }); | |
| } | |
| function scaleNodeBreadths(kx) { | |
| nodes.forEach(function(node) { | |
| node.x *= kx; | |
| }); | |
| } | |
| function computeNodeDepths(iterations) { | |
| var nodesByBreadth = d3.nest() | |
| .key(function(d) { return d.x; }) | |
| .sortKeys(d3.ascending) | |
| .entries(nodes) | |
| .map(function(d) { return d.values; }); | |
| // | |
| initializeNodeDepth(); | |
| resolveCollisions(); | |
| for (var alpha = 1; iterations > 0; --iterations) { | |
| relaxRightToLeft(alpha *= .99); | |
| resolveCollisions(); | |
| relaxLeftToRight(alpha); | |
| resolveCollisions(); | |
| } | |
| function initializeNodeDepth() { | |
| var ky = d3.min(nodesByBreadth, function(nodes) { | |
| return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value); | |
| }); | |
| nodesByBreadth.forEach(function(nodes) { | |
| nodes.forEach(function(node, i) { | |
| node.y = i; | |
| node.dy = node.value * ky; | |
| }); | |
| }); | |
| links.forEach(function(link) { | |
| link.dy = link.value * ky; | |
| }); | |
| } | |
| function relaxLeftToRight(alpha) { | |
| nodesByBreadth.forEach(function(nodes, breadth) { | |
| nodes.forEach(function(node) { | |
| if (node.targetLinks.length) { | |
| var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value); | |
| node.y += (y - center(node)) * alpha; | |
| } | |
| }); | |
| }); | |
| function weightedSource(link) { | |
| return center(link.source) * link.value; | |
| } | |
| } | |
| function relaxRightToLeft(alpha) { | |
| nodesByBreadth.slice().reverse().forEach(function(nodes) { | |
| nodes.forEach(function(node) { | |
| if (node.sourceLinks.length) { | |
| var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value); | |
| node.y += (y - center(node)) * alpha; | |
| } | |
| }); | |
| }); | |
| function weightedTarget(link) { | |
| return center(link.target) * link.value; | |
| } | |
| } | |
| function resolveCollisions() { | |
| nodesByBreadth.forEach(function(nodes) { | |
| var node, | |
| dy, | |
| y0 = 0, | |
| n = nodes.length, | |
| i; | |
| // Push any overlapping nodes down. | |
| // nodes.sort(ascendingDepth); | |
| for (i = 0; i < n; ++i) { | |
| node = nodes[i]; | |
| dy = y0 - node.y; | |
| if (dy > 0) node.y += dy; | |
| y0 = node.y + node.dy + nodePadding; | |
| } | |
| // If the bottommost node goes outside the bounds, push it back up. | |
| dy = y0 - nodePadding - size[1]; | |
| if (dy > 0) { | |
| y0 = node.y -= dy; | |
| // Push any overlapping nodes back up. | |
| for (i = n - 2; i >= 0; --i) { | |
| node = nodes[i]; | |
| dy = node.y + node.dy + nodePadding - y0; | |
| if (dy > 0) node.y -= dy; | |
| y0 = node.y; | |
| } | |
| } | |
| }); | |
| } | |
| function ascendingDepth(a, b) { | |
| return a.y - b.y; | |
| } | |
| } | |
| function computeLinkDepths() { | |
| nodes.forEach(function(node) { | |
| node.sourceLinks.sort(ascendingTargetDepth); | |
| node.targetLinks.sort(ascendingSourceDepth); | |
| }); | |
| nodes.forEach(function(node) { | |
| var sy = 0, ty = 0; | |
| node.sourceLinks.forEach(function(link) { | |
| link.sy = sy; | |
| sy += link.dy; | |
| }); | |
| node.targetLinks.forEach(function(link) { | |
| link.ty = ty; | |
| ty += link.dy; | |
| }); | |
| }); | |
| function ascendingSourceDepth(a, b) { | |
| return a.source.y - b.source.y; | |
| } | |
| function ascendingTargetDepth(a, b) { | |
| return a.target.y - b.target.y; | |
| } | |
| } | |
| function center(node) { | |
| return node.y + node.dy / 2; | |
| } | |
| function value(link) { | |
| return link.value; | |
| } | |
| return sankey; | |
| }; |