Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
viewof grid_count = slider({
min: 1,
max: 500,
step: 1,
value: 6,
title: "Grid Count",
})
function calculate_triangle_base_count(count) {
let counter = 1
while (count > 0) {
counter = counter + 1
count = count - counter
}
return counter
}
viewof margin = slider({
min: 0,
max: 20,
step: 1,
value: 0,
title: "Margin",
})
chart = {
const width = 928; // uncomment for responsive width
const height = 928;
const grid_length = Math.ceil(Math.sqrt(grid_count))
const grid_base_length = calculate_triangle_base_count(grid_count)
const radius = (width/grid_base_length)/2
let circle_counter = 1
console.log("great")
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:whitesmoke;");
svg
.selectAll("circle")
.data(d3.range(grid_count))
.join("circle")
.attr("cx", d => {
d = d+1
let output = ((circle_counter-d)*(radius*2) )
console.log(d, circle_counter)
if (d+1 == circle_counter) {
circle_counter = circle_counter + d+1
console.log("ff",d, circle_counter)
}
return output
})
.attr("cy", d => { return ((d+1)%(grid_base_length+2))*(radius*2)})
.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.
