SANKEY INTERACTIVE / Sandraviz

Olá! My name is Sandra and I work with Dataviz in beautiful Lisbon 🙋🏼‍♀️ I'm a visual analyst and researcher with a passion for data storytelling and statistics to uncover patterns in human behaviour and societies 💞

Workspace

Public

Edited

Mar 2

Fork of A quins festivals han actuat els 10 cantants catalans que més han treballat l'estiu de 2023

•

1 fork

2 stars

chart3 = {

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const { nodes, links } = sankey(data);

svg

.append("g")

.selectAll("rect")

.data(nodes)

.join("rect")

.attr("x", (d) => (d.x0 > width / 2 ? d.x0 : d.x0 + 10))

.attr("y", (d) => d.y0)

.attr("height", (d) => d.y1 - d.y0)

.attr("width", (d) => (d.x0 > width / 2 ? d.x1 - d.x0 + 30 : 5))

.attr("fill", (d) => (d.x0 > width / 2 ? color(d.name) : "white"))

.attr("opacity", (d) => (d.x0 > width / 2 ? 1 : 1))

.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) => color(d.target.name))

.attr("stroke-opacity", 1)

.attr("stroke-width", 0)

.transition()

.delay((d) => 1000 + d.target.index * 1500)

.duration(1000)

.attr("stroke-opacity", 1)

.attr("stroke-width", (d) => Math.max(1, d.width));

const node = svg

.append("g")

.selectAll("text")

.data(nodes)

.join("text")

.attr("x", (d) => (d.x0 < width / 2 ? d.x1 - 10 : d.x0 + 50))

.attr("y", (d) => (d.y1 + d.y0) / 2)

.attr("fill", (d) => (d.x0 > width / 2 ? color(d.name) : "white"))

.attr("dy", "0.4em")

.attr("text-anchor", (d) => (d.x0 < width / 2 ? "end" : "start"))

.attr("font-size", (d) => (d.x0 < width / 2 ? 15 : 15))

.attr("font-weight", (d) => (d.x0 < width / 2 ? 300 : 500))

.text((d) => d.name + "s")

.append("tspan")

.attr("fill-opacity", (d) => (d.x0 < width / 2 ? 0.5 : 1))

.attr("font-weight", 400)

.text((d) => ` | ${format(d.value)}`);

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.

Learn more