This is where I prototype and experiment
Published
Edited
Jun 28, 2020
3 stars
chart = {
const svg = d3.create('svg')
.attr('viewBox', [-width/2, -height/2, width, height]);
svg.selectAll('circle')
.data(decades)
.join('circle')
.attr('r', (d) => timeScale(d))
.attr('fill', (_, i) => i % 2 == 0 ? 'whitesmoke' : 'white')
.attr('stroke-width', 0);
svg.selectAll('.label-year')
.data(decades)
.join('text')
.attr('class', 'label-year')
.attr('x', d => timeScale(d) + ringWidth / 2)
.attr('y', 0)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.attr('font-size', '12px')
.text((d) => d);
const g = svg.selectAll('g')
.data(nested)
.enter()
.append('g')
.attr('transform', (_, i) => `rotate(${(i * 360) / nested.length})`);
g.append('text')
.attr('x', 0)
.attr('y', timeScale.range()[1] + ringWidth + 10)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'hanging')
.attr('font-size', '12px')
.text((d) => d.key);
g.selectAll('line')
.data((d) => d.values)
.join('line')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', (d) => timeScale(d.decade))
.attr('y2', (d) => timeScale(d.decade) + ringWidth + 5)
.attr('stroke-width', 3)
.attr('stroke', (d, i) => d.decade % 20 == 0 ? 'steelblue' : 'lightblue');
return svg.node();
}
nested = d3.nest()
.key((d) => d.country)
.entries(data);
ringWidth = timeScale.range()[1] / decades.length
decades = {
const extent = timeScale.domain();
extent[1] += 10;
const decades = d3.range(...extent, 10);
decades.reverse();
return decades;
}
timeScale = d3.scaleLinear()
.domain(d3.extent(data, (d) => d.decade))
.range([20, height / 3])
data = rawData.filter((d) => d.decade >= 1940)
rawData = d3.csvParse(await FileAttachment("parlgov_necomers_per_decade@1.csv").text(), d3.autoType)
parseYear = d3.timeParse("%Y")
height = width
d3 = require('d3@5')
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.
