chart3 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const format = d3.format(".02s");
const color = d3.scaleOrdinal().domain(["Series A"]).range(["#fff0f3"]);
const { nodes, links } = sankey(data);
const color2 = d3
.scaleLinear()
.domain(d3.extent(links, (d) => d.width))
.range(["#3F0F92", "#BE8AFF"]);
svg
.append("g")
.selectAll("rect")
.data(nodes)
.join("rect")
.attr("x", (d) => (d.x0 > width / 2 ? d.x0 : d.x0))
.attr("y", (d) => d.y0)
.attr("height", (d) => d.y1 - d.y0)
.attr("width", (d) => (d.x0 > width / 2 ? 50 : 50))
.attr("fill", (d) => (d.x0 > width / 2 ? "#3bf4fb" : "#caff8a"))
.attr("opacity", (d) => (d.x0 > width / 2 ? 0.9 : 0.9))
.on("mouseover", (e, d) => {
d3.selectAll("path").style("opacity", (p) =>
p.source.name === d.name || p.target.name === d.name ? "1" : "0.07"
);
})
.on("mouseout", (e, d) => {
d3.selectAll("path").style("opacity", 1);
});
const link = svg
.append("g")
.attr("fill", "none")
.selectAll("g")
.data(links)
.join("g");
link
.append("path")
.attr("class", (d) => `trajectory_${d.id}`)
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", (d) => color2(d.width))
.attr("stroke-opacity", 1)
.attr("stroke-width", 0)
.transition()
.delay((d) => 1000 + d.id * 80)
.duration(30)
.attr("stroke-opacity", 1)
.attr("stroke-width", (d) => Math.max(0.2, d.width));
const node = svg
.append("g")
.selectAll("text")
.data(nodes)
.join("text")
.attr("x", (d) => (d.x0 < width / 2 ? d.x1 - 55 : d.x0 + 55))
.attr("y", (d) => (d.y1 + d.y0) / 2)
.attr("fill", (d) => (d.x0 > width / 2 ? "#3bf4fb" : "#caff8a"))
.attr("dy", "0.4em")
.attr("text-anchor", (d) => (d.x0 < width / 2 ? "end" : "start"))
.attr("font-size", (d) => (d.y0 < height / 2 ? 8 : 6))
.attr("font-weight", (d) => (d.x0 < width / 2 ? 400 : 400))
.text((d) => d.name + "s")
.append("tspan")
.attr("fill-opacity", (d) => (d.x0 < width / 2 ? 0.6 : 0.6))
.attr("font-weight", 500)
.text((d) => ` ${format(d.value)}`);
return svg.node();
}
sankey = {
const sankey = d3
.sankey()
.nodeSort((a, b) => b.value - a.value)
.nodeAlign(d3.sankeyCenter)
.nodeId((d) => d.id)
.linkSort((a, b) => b.value - a.value)
.nodeWidth(50)
.nodePadding(2.5)
.extent([
[margin.left, margin.top],
[width - margin.right, height - margin.bottom]
]);
return ({ nodes, links }) =>
sankey({
nodes: nodes.map((d) => Object.assign({}, d)),
links: links.map((d) => Object.assign({}, d))
});
}
data = {
let links = [];
const csvData = d3.csvParse(
await FileAttachment("data_sankey (5).csv").text(),
d3.autoType
);
csvData.map((row, i) => {
links.push({
target: row["investorName"],
source: row["entityName"],
value: row["roundSizeUsd"],
round: row["round"],
id: i
});
});
const nodes = Array.from(
new Set(links.flatMap((l) => [l.source, l.target])),
(name, id) => ({ name, id })
);
links.map((d) => {
d.source = nodes.find((e) => e.name === d.source).id;
d.target = nodes.find((e) => e.name === d.target).id;
});
return { nodes, links };
}
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.
