chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const entryPoint = 250;
const outerRadius = 50;
const offset = 300;
const delta = {x:75,y:44}
const angles = [0, Math.PI/3, 2*Math.PI/3, Math.PI, 4*Math.PI/3,5*Math.PI/3];
//columns with row lengths
const columns = [1,2,3,4,5,6,5,4,3,2,1];
//create a 1D array of positions
const centerPositions = [];
columns.map((column, n) => {
let yValues = [];
for(let i = 0; i<column; i++) {
centerPositions.push({
x: delta.x*n+offset,
y: delta.y*(-column+2*i)+offset
})
}
})
const hexes = centerPositions.map(position => {
return angles.map(angle => {
return {
x: Math.cos(angle)*outerRadius+position.x,
y: Math.sin(angle)*outerRadius+position.y
}
})
})
svg
.selectAll("polygon")
.data(hexes)
.join("polygon")
.attr("points", (d) => {
return d.map(point => {
return [point.x,point.y].join(",")
}).join(" ")
})
.attr("stroke","black")
.attr("stroke-width",2)
.attr("fill", "white")
return svg.node();
}
height = 500
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.
