Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
viewof grid_count = slider({
min: 1,
max: 2256,
step: 1,
value: 500,
title: "Grid Count",
})
viewof margin = slider({
min: 1,
max: 20,
step: 1,
value: 3,
title: "Margin",
})
chart = {
const width = 928; // uncomment for responsive width
const height = 928;
const grid_length = Math.ceil(Math.sqrt(grid_count))
const radius = (width/grid_length)/2
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; background-color:grey;");
svg
.selectAll("circle")
.data(d3.range(grid_count))
.join("circle")
.attr("cx", d => { return ((d%grid_length) * width/grid_length ) + radius})
.attr("cy", d => { return (Math.floor(d/grid_length) * width/grid_length ) + radius})
.attr("r", radius - margin)
.attr("fill", "#001b42");
return svg.node();
}
import {slider} from "@jashkenas/inputs"
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.
