Interested in data visualization and tools for thought.
height = 600
nCircles = 200
xScale = d3.scaleLinear().domain([0, 1.0]).range([0, width])
yScale = d3.scaleLinear().domain([0, 1.0]).range([0, height])
rScale = d3.scaleLinear().domain([0, 1.0]).range([10, 40])
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
for (let i = 0; i < nCircles; i++) {
const x = Math.random();
const y = Math.random();
const r = Math.random();
svg
.append("circle")
.attr("cx", xScale(x))
.attr("cy", yScale(y))
.attr("r", rScale(r))
.attr("fill", getRandomColor())
.attr("stroke", "hsl(216deg 100% 13%)")
.attr("stroke-width", 2);
}
return svg.node();
}
function getRandomColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += Math.floor(Math.random() * 16).toString(16);
}
return color;
}
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.
