{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);
// Create an array of random length, from 2 - 10 elements
let arr = [...Array(d3.randomInt(2, 11)())];
// Create a new array of objects with random properties:
// radius, x coordinate, y coordinate, and color
const nodes = arr.map(a => {
const r = d3.randomUniform(10, 50)();
const red = d3.randomInt(1, 256)();
const green = d3.randomInt(1, 256)();
const blue = d3.randomInt(1, 256)();
const alpha = Math.random();
return {
x: d3.randomUniform(r, width - r)(),
y: d3.randomUniform(r, boxHeight - r)(),
r: r,
color: d3.rgb(red, green, blue, alpha)
};
});
// Append circles to the SVG element
svg
.selectAll('circle')
.data(nodes)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
.attr('fill', d => d.color);
return svg.node();
}
d3 = require('d3', 'd3-random')
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.
