md`# Honeycomb`
md`Spatial distribution of nested hexagons`
{
const width = 950
const height = 300
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const lineGenerator = d3.line()
const radius = 30
const numpitch = 0
const numspace = 200
const side = 30
const counter = 0
for (let cc = 0; cc < side; cc++) {
const they = radius * Math.sqrt(0.75)
let pitchx = 2 * radius
let pitchy = they
for (let dd = 0; dd < side; dd++) {
let check = dd % 2
//----------- Check to shift the entire row to fit within the hive
if (check == 0) {
pitchx = 1.5 * radius
pitchy = 0
}
else {
pitchx = 3 * radius / 2
pitchy = they
}
const rand = Math.random()
//----------- Six vertex of the hexagon
var verA = [30 + dd * pitchx, (2 * cc * they) + pitchy]
var verB = [30 + dd * pitchx + radius / 2, - they + (2 * cc * they) + pitchy]
var verC = [30 + dd * pitchx + 3 * radius / 2, - they + (2 * cc * they) + pitchy]
var verD = [30 + dd * pitchx + 2 * radius, (2 * cc * they) + pitchy]
var verF = [30 + dd * pitchx + radius / 2, they + (2 * cc * they) + pitchy]
var verE = [30 + dd * pitchx + 3 * radius / 2, they + (2 * cc * they) + pitchy]
var thepoints = [verA, verB, verC, verD, verE, verF, verA];
var pathData = lineGenerator(thepoints);
group
.append("path")
.attr('d', pathData)
.style("stroke-width", ".25px")
.style("opacity", 1)
.style("fill", d3.rgb(10, 225 - rand*155,255 - rand*155))
.style("stroke", "white");
counter == counter + 1
}
}
return svg.node();
}
d3 = require("d3@6")
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.
