Hi! I'm a Design Technologist based in Portland, Oregon (USA).
data = d3.tsvParse(
`source target value
Total Plastic Production Used Once 5800000000
Total Plastic Production Still in Use 2500000000
Used Once Sent to Landfill or discarded 4600000000
Used Once Incinerated 700000000
Used Once Recycled 500000000
Recycled Recycled then Incinerated 100000000
Recycled Recycled then Sent to Landfill or discarded 300000000
Recycled Recycled and still in use 100000000`,
d3.autoType
)
sankey = {
const svg = d3
.create("svg")
.attr("height", dimensions.height)
.attr("width", dimensions.width)
.attr("overflow", "visible");
const chart = svg
.append("g")
.attr("transform", `translate(${dimensions.margins},${dimensions.margins})`)
.attr("height", dimensions.height - dimensions.margins * 2)
.attr("width", dimensions.width - dimensions.margins * 2)
.attr("overflow", "visible");
const adjustor = (i) => {
if (i === 8) {
return 30;
} else if (i === 6) {
return -30;
} else return 0;
};
chart
.append("text")
.text("How Much Plastic do we truly recycle?")
.attr("dominant-baseline", "middle")
.attr("font-size", "31.25")
.attr("font-weight", "600");
const nodes = chart
.append("g")
.selectAll("rect")
.data(sankeyData.nodes)
.join("rect")
.attr("x", (d) => d.x0)
.attr("y", (d) => d.y0)
.attr("fill", (d) => colorScale(d.name))
.attr("height", (d) => d.y1 - d.y0)
.attr("width", (d) => d.x1 - d.x0);
const links = chart
.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.1)
.selectAll("path")
.data(sankeyData.links)
.join("path")
.attr("d", d3Sankey.sankeyLinkHorizontal())
.attr("stroke-width", function (d) {
return d.width;
});
const labelNames = chart
.append("g")
.selectAll("text")
.data(sankeyData.nodes)
.join("text")
.text((d) => d.name)
.attr("class", (d) => d.depth)
.attr("x", (d) => d3.mean([d.x0, d.x1]))
.attr("y", (d) => d3.mean([d.y0, d.y1]))
.attr("dy", (d) => `${-5 + adjustor(d.index)}px`)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", (d) => (d.y1 - d.y0 < 20 ? "black" : "white"))
.attr("font-family", "helvetica")
.attr("font-weight", "400")
.attr("font-size", "16")
.style("text-shadow", ".5px .5px 2px #222");
const labelValues = chart
.append("g")
.selectAll("text")
.data(sankeyData.nodes)
.join("text")
.text((d) => `${d3.format("~s")(d.value)}`)
.attr("x", (d) => d3.mean([d.x0, d.x1]))
.attr("y", (d) => d3.mean([d.y0, d.y1]))
.attr("dy", (d) => `${15 + adjustor(d.index)}px`)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", (d) => (d.y1 - d.y0 < 20 ? "black" : "white"))
.attr("font-family", "helvetica")
.attr("font-weight", "200")
.attr("font-size", "24")
.style("text-shadow", ".5px .5px 2px #222");
return svg.node();
}
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.
