Curious human. Interested in the mechanics of how things work.
chart = {
const nodes = d3.range(n).map(id => ({ id }));
const forceCharge = d3.forceManyBody().strength(charge);
const forceX = d3.forceX().strength(xStrength);
const forceY = d3.forceY().strength(yStrength);
const simulation = d3.forceSimulation()
.nodes(nodes)
.force('charge', forceCharge)
.force('x', forceX)
.force('y', forceY)
.stop();
for (let i = 0; i < 100; i++) simulation.tick();
const yExtent = d3.extent(nodes, d => d.y);
const height = (yExtent[1] - yExtent[0]) + 100;
const svg = d3.select(DOM.svg(width, height));
const blob = svg.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`)
.attr('font-size', `${fontSize}px`);
function random() {
const d = (Math.random() * jitter) - (jitter / 2);
console.log(d);
return d;
}
blob.selectAll('text').data(nodes)
.enter().append('text')
.sort((a, b) => a.y - b.y)
.text(randomLetter)
.attr('x', d => d.x + random())
.attr('y', d => d.y + random())
.attr('class', 'weepeople');
return svg.node()
}
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.
