md`# Hedonometer Voronoi`
chart = {
const context = DOM.context2d(width, height);
buildCircles(context, topData, topY, 0, 25, d3.interpolateHsl('green', 'blue'));
buildCircles(context, bottomData, bottomY, -25, 0, d3.interpolateHsl('red', 'yellow'));
return context.canvas;
}
html`<style>canvas {background: #fff}</style>`
function buildCircles(context, data, y, extraY1, extraY2, color) {
let x = halfDeltaX;
for(let i = 0; i < data.length; i++) {
let curX = x;
let simulation = d3.forceSimulation(data[i])
.force('charge', d3.forceManyBody().strength(0))
.force('collision', d3.forceCollide().radius(radius + spacing))
.force('x', d3.forceX().x( curX ))
.force('y', d3.forceY().y( (d) => y(d['Happiness Score']) ))
simulation.on('tick', () => {
const delaunay = d3.Delaunay.from(data[i], d => d.x, d => d.y);
const bounds = [
curX - halfDeltaX + 0.5,
y.range()[1] + 0.5 + extraY1,
curX + halfDeltaX - 0.5,
y.range()[0] - 0.5 + extraY2
];
const voronoi = delaunay.voronoi(bounds);
context.clearRect(bounds[0], bounds[1], bounds[2] - bounds[0], bounds[3] - bounds[1]);
for(let j = 0; j < data[i].length; j++) {
let alpha = (data[i][j]['Happiness Score'] - y.domain()[0]) / (y.domain()[1] - y.domain()[0]);
context.fillStyle = color(alpha);
context.beginPath();
voronoi.renderCell(j, context);
context.fill();
}
context.beginPath();
voronoi.render(context);
voronoi.renderBounds(context);
context.strokeStyle = '#ccc';
context.stroke();
context.beginPath();
context.fillStyle = 'white';
delaunay.renderPoints(context);
context.fill();
})
x += deltaX;
}
}
halfDeltaX = deltaX / 2
deltaX = (width - margin.left - margin.right) / data.length;
bottomY = d3.scaleLinear()
.domain(d3.extent(bottomData.flat(), d => d['Happiness Score']))
.range([height - margin.bottom, (height / 2) + halfMiddleSize]);
bottomY.domain()
topY.domain()
topY = d3.scaleLinear()
.domain(d3.extent(topData.flat(), d => d['Happiness Score']))
.range([(height / 2) - halfMiddleSize, margin.top]);
bottomData = data.map(d => d.filter(d2 => d2['Happiness Score'] < 5))
topData = data.map(d => d.filter(d2 => d2['Happiness Score'] >= 5))
data = await FileAttachment("alice-in-wonderland-hedonometer.json").json()
halfMiddleSize = (height * middlePercent) / 2
middlePercent = 0.1
spacing = 2
radius = 3
height = 800
margin = ({top: 10, right: 10, bottom: 10, left: 10})
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.
