This is where I prototype and experiment
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.selectAll(".text-decades")
.data(y.ticks().slice(0, -1))
.join("text")
.attr("x", 0)
.attr("y", d => y(d))
.attr("transform", `translate(0, ${tickDist / 2})`)
.attr("font-size", 11)
.attr("alignment-baseline", "middle")
.text(d => `${formatYear(d)}s`);
svg.selectAll(".grid-line")
.data(y.ticks())
.join("line")
.attr("class", "grid-line")
.attr("x1", margin.left)
.attr("x2", width)
.attr("y1", d => y(d))
.attr("y2", d => y(d))
.attr("stroke-width", 2)
.attr("stroke-dasharray", 4)
.attr("stroke", "whitesmoke");
svg.selectAll(".label-family")
.data(families)
.join("text")
.attr("class", "label-family")
.attr("x", d => x(d))
.attr("y", 0)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "hanging")
.text(d => (d ? d : "other"));
svg.selectAll(".line-beeswarm")
.data(families)
.join("line")
.attr("class", "line-beeswarm")
.attr("x1", d => x(d))
.attr("x2", d => x(d))
.attr("y1", margin.top - 20)
.attr("y2", height - margin.bottom + 20)
.attr("stroke-width", 0.2)
.attr("stroke", d => color(d));
const pair = svg.selectAll(".beeswarm-pair")
.data(nested)
.join("g")
.attr("class", d => "beeswarm-pair")
.attr("fill", d => color(d.key))
.attr("stroke", d => color(d.key));
pair.selectAll(".circle-left")
.data(d => dodge(d.values.filter(e => e.currentShare), radius * 2 + padding))
.join("circle")
.attr("class", "circle-left")
.attr("cx", e => x(e.data.family) - radius - padding - e.x)
.attr("cy", e => e.y);
pair.selectAll(".circle-right")
.data(d => dodge(d.values.filter(e => !e.currentShare), radius * 2 + padding))
.join("circle")
.attr("class", 'circle-right')
.attr("cx", e => x(e.data.family) + radius + padding + e.x)
.attr("cy", e => e.y)
.attr("stroke-width", 1)
.attr('fill', "transparent");
const circle = pair.selectAll("circle")
.attr("r", radius)
.append("title")
.text(d => `${d.data.party} / ${d.data.partyOrig} (${d.data.partyAbbr}) winning ${d.data.share}% of votes in ${formatYear(d.data.date)} (${d.data.country}) - now, ${d.data.currentShare}%`);
return svg.node();
}
nested = d3
.nest()
.key(d => d.family)
.entries(data)
color = d3
.scaleOrdinal()
.domain(families)
.range(d3.schemeTableau10)
x = d3
.scaleBand()
.domain(families)
.range([margin.left, width - margin.right])
.paddingInner(1)
.paddingOuter(0.5)
y = {
const dates = rawData.map(d => d.date).sort(d3.ascending);
const timeExtent = [dates[0], dates[dates.length - 1]];
return d3.scaleTime()
.domain(timeExtent)
.nice()
.range([margin.top, height - margin.bottom]);
}
data = rawData.filter(d => d.share >= shareThreshold * 100)
margin = ({
left: 30,
right: 10,
top: 50,
bottom: 50
})
padding = 1.5
radius = 3
height = 600
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.
