Published
Edited
Jan 14, 2021
Fork of Flow-o-Matic
19 forks
24 stars
Also listed in…
d3-sankey
Insert cell
Insert cell
Insert cell
data = parseGraph(`
Footwear,North America,2245
Footwear,"Europe, Middle East & Africa",1419
Footwear,Greater China,1022
Footwear,Asia Pacific & Latin America,879
Apparel,North America,1405
Apparel,"Europe, Middle East & Africa",794
Apparel,Asia Pacific & Latin America,360
Apparel,Greater China,490
Equipment,North America,132
Equipment,"Europe, Middle East & Africa",100
Equipment,Greater China,32
Equipment,Asia Pacific & Latin America,59
North America,NIKE Brand,3782
"Europe, Middle East & Africa",NIKE Brand,2313
Greater China,NIKE Brand,1544
Asia Pacific & Latin America,NIKE Brand,1298
Global Brand Divisions,NIKE Brand,9
NIKE Brand,Revenues,8946
Converse,Revenues,425
Corporate,Revenues,3
Revenues,Cost of sales,5269
Revenues,Gross profit,4105
Gross profit,Selling and administrative expense,3142
Gross profit,Interest expense,14
Gross profit,Income before taxes,949
Other income,Income before taxes,48
Selling and administrative expense,Demand creation expense,910
Selling and administrative expense,Operating overhead expense,2232
Income before taxes,Tax expense,150
Income before taxes,Net income,847
`)
Insert cell
function parseGraph(source) {
const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));
const nodeByName = new Map;
for (const link of links) {
if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});
if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});
}
return {nodes: Array.from(nodeByName.values()), links};
}
Insert cell
sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3.sankeyCenter)
.nodeSort(null)
.nodeWidth(15)
.nodePadding(padding)
.extent([[0, 5], [width, height - 5]])
Insert cell
width = 975
Insert cell
height = 440
Insert cell
padding = 24
Insert cell
color = "#dddddd"
Insert cell
d3 = require("d3@6", "d3-sankey@0.12")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more