data = parseGraph(`
Revenue,Total Revenue, 46475
Other Revenue,Total Revenue, 1104
Total Revenue,COGS, 40393
Total Revenue,Gross Profit, 7185
Gross Profit,SG&A, 2742
Gross Profit,Provision for Bad Debts, 128
Gross Profit,Research & Development, 1915
Gross Profit,Other Op Ex, 854
Gross Profit,Operating Profit, 1547
`)
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};
}
sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3.sankeyCenter)
.nodeSort(null)
.nodeWidth(15)
.nodePadding(padding)
.extent([[0, 5], [width, height - 5]]);
// .style("font-size", "34px")
width = 975 * 0.7
height = 440 * 0.7
padding = 24 * 0.7
color = "#889EAF"
d3 = require("d3@6", "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.
