md`# Copper Diamond`
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
buildCircles(svg, topData, topY);
buildCircles(svg, bottomData, bottomY);
return svg.node();
}
function buildCircles(svg, data, y) {
let x = deltaX / 2;
for(let i = 0; i < data.length; i++) {
let g = svg.append('g');
let simulation = d3.forceSimulation(data[i])
.force('charge', d3.forceManyBody().strength(0))
.force('collision', d3.forceCollide().radius(radius + spacing))
.force('x', d3.forceX().x( x ))
.force('y', d3.forceY().y( (d) => y(d['Happiness Score']) ))
simulation.on('tick', () => {
let item = g
.selectAll('circle')
.data(data[i])
item.join('circle')
.attr('r', radius)
.style('opacity', 0.5)
.merge(item)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
})
x += deltaX;
}
}
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]);
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.
