Design at Observable
Published unlisted
Edited
Aug 8, 2020
sankey = {
const sankey = d3.sankey()
.nodeSort(null)
.nodeId(d => d.name)
.nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])
.nodeWidth(15)
.nodePadding(10)
.extent([[1, 5], [width - 1, height - 5]]);
return ({nodes, links}) => sankey({
nodes: nodes.map(d => Object.assign({}, d)),
links: links.map(d => Object.assign({}, d))
});
}
format = {
const format = d3.format(",.0f");
return data.units ? d => `${format(d)} ${data.units}` : format;
}
color = {
const color = d3.scaleOrdinal(d3.schemeCategory10);
return d => color(d.category === undefined ? d.name : d.category);
}
data = {
const links = [{"source": "New", "target": "Screen", "value": 120},
{"source": "Screen", "target": "Interview", "value": 120},
{"source": "New", "target": "Rejected", "value": 70},
{"source": "Interview", "target": "Rejected", "value": 193},
{"source": "Interview", "target": "Offer", "value": 50},
{"source": "Offer", "target": "Hired", "value": 15},
{"source": "Offer", "target": "Rejected", "value": 35},
{"source": "Screen", "target": "Rejected", "value": 150}];
const nodes =[
{"name": "New", "category": "New"},
{"name": "Screen", "category": "Screen"},
{"name": "Hired", "category": "Hired"},
{"name": "Interview", "category": "Interview"},
{"name": "Rejected", "category": "Rejected"},
{"name": "Offer", "category": "Offer"},
];
return {nodes, links, units: "TWh"};
}
width = 954
height = 600
d3 = require("d3@5", "d3-sankey@0.12")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
