This is where I prototype and experiment
chart = {
replay;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", "#B8BFC6")
.selectAll("rect")
.data(dataPos)
.join("rect")
.attr("x", d => d.x0)
.attr("width", barWidth)
.attr("height", barHeight)
.attr("fill", d => color(d.party))
.transition()
.duration((d, i) => 0.5 * (d.ministryIndex + 1) * (data.length - ministriesCount.get(d.ministry)))
.delay((d, i) => Math.floor(d.count / nRows) * 100 + (d.count % nRows) * 20)
.attr("x", d => d.x1)
.attr("y", d => d.y1)
.attr("width", squareSize)
.attr("height", squareSize)
.attr("stroke-width", 0.5)
.attr("stroke", "white");
return svg.node();
}
dataPos = {
const nMinistries = new Map();
sortedData.forEach((d, i) => {
d.x0 = i * barWidth;
d.count = 0;
if (nMinistries.has(d.ministryIndex)) {
d.count = nMinistries.get(d.ministryIndex) + 1;
nMinistries.set(d.ministryIndex, d.count);
} else {
nMinistries.set(d.ministryIndex, 0);
}
d.col = Math.floor(d.count / nRows);
d.row = nRows - (d.count % nRows);
d.x1 = d.col * squareSize;
d.y1 = (d.ministryIndex + 1) * (nRows * squareSize + squareSize / 2) + d.row * squareSize;
})
return sortedData;
}
sortedData = data.sort((a, b) => d3.ascending(a.partyIndex, b.partyIndex) || d3.ascending(a.party, b.party) || d3.ascending(a.publishedAt, b.publishedAt))
data = rawData.map(d => {
d.ministryIndex = sortedMinistries.findIndex(m => m === d.ministry);
d.partyIndex = sortedParties.findIndex(m => m === d.party);
return d;
})
sortedParties = d3.rollups(parties, v => v.length, d => d).sort((a, b) => d3.descending(a[1], b[1])).map(d => d[0])
uniqueParties = new Set(parties)
parties = rawData.map(d => d.party)
sortedMinistries = Array.from(ministriesCount).sort((a, b) => d3.descending(a[1], b[1])).map(d => d[0])
ministriesCount = d3.rollup(ministries, v => v.length, d => d)
ministries = rawData.map(d => d.ministry)
rawData = {
const parseTime = d3.timeParse("%Y-%m-%d");
return d3.csvParse(await FileAttachment("bawu_test@6.csv").text(), d => ({
publishedAt: parseTime(d.published_at),
party: d.party,
ministry: d.ministry,
}))
}
d3 = require('d3@6')
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.
