frontend + d3
Published
Edited
Aug 31, 2022
1 star
Circle inside Grids
data = {
return Array.from({ length: config.gridWidth * config.gridHeight }).map(
(_, i) => ({
x: Math.floor(i / config.gridWidth),
y: i % config.gridHeight
})
);
}
config = {
const c = {
gridWidth: 20,
gridHeight: 20,
radius: 9.5,
margin: 20,
svgWidth: 500,
svgHeight: 500
};
const midPointX = c.gridWidth / 2;
const midPointY = c.gridHeight / 2;
return { ...c, midPointX, midPointY };
}
getCollision = ({ x, y }) => {
const { midPointX, midPointY, radius } = config;
return (midPointX - x) ** 2 + (midPointY - y) ** 2 - radius ** 2 > 0;
}
gridData = {
return data.map((d) => {
let quadrant = 1;
const { midPointX, midPointY } = config;
if (d.x >= midPointX && d.y < midPointY) quadrant = 2;
if (d.x < midPointX && d.y >= midPointY) quadrant = 3;
if (d.x >= midPointX && d.y >= midPointY) quadrant = 4;
return {
...d,
insideCircle: getCollision(d),
quadrant
};
});
}
{
const svg = d3.create("svg");
svg.attr("width", config.svgWidth).attr("height", config.svgHeight);
const scaleBandX = d3
.scaleBand()
.domain(d3.range(0, config.gridWidth))
.range([config.margin, config.svgWidth - config.margin * 2])
.paddingInner(0.2);
const scaleBandY = d3
.scaleBand()
.domain(d3.range(0, config.gridHeight))
.range([config.margin, config.svgHeight - config.margin * 2])
.paddingInner(0.2);
const g = svg.append("g");
const enterBox = (n) =>
n
.append("rect")
.attr("data-d", (d) => JSON.stringify(d))
.attr("width", () => scaleBandX.bandwidth())
.attr("height", () => scaleBandY.bandwidth())
.attr("stroke", (d) => d3.schemeSet3[d.quadrant])
.attr("fill", (d) => (d.insideCircle ? "lightgray" : "gray"))
.attr(
"transform",
(d) => `translate(${scaleBandX(d.x)},${scaleBandY(d.y)})`
);
g.selectAll(".box").data(gridData).join(enterBox);
return svg.node();
}
d3 = import("https://cdn.skypack.dev/d3@7.0.0")
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.
