data = d3.tsvParse(
`source target value
Municipal Water Toilet 175.4
Municipal Water Shower 255.6
Municipal Water Kitchen Sink 45.0
Municipal Water Bathtub 67.2
Municipal Water Laundry 61.2
Municipal Water Hand Basins 135.1
Shower Grey Water 255.6
Bathtub Grey Water 67.2
Hand Basins Grey Water 90.01
Kitchen Sink Black Water 45
Toilet Black Water 175.4
Grey Water Septic Tank 412.81
Black Water Septic Tank 220.4
Laundry Garden Water 61.2
Hand Basins Garden Water 45`,
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("Calle Central")
.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.
