Published
Edited
Jul 4, 2022
Importers
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let g = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.4)
.selectAll("path")
.data(coordinates)
.join("g")
g.append("path")
.attr("d", hg.hexagon)
.attr("transform", d => `translate(${hg.midx(d.x, d.y)},${hg.midy(d.x, d.y)})`)
.attr("fill", "#37c733")
.attr("fill-opacity", 0.5)
g.append("text")
.text(d => d.x + "," + d.y)
.attr("font-size", 7)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("transform", d => `translate(${hg.midx(d.x, d.y)},${hg.midy(d.x, d.y)})`)
return svg.node();
}
yflip = (y) => height - y
radius = getRadius(width, 30)
hg = hexgrid(radius)
height = Math.ceil(hg.endy(5))
// Not in use.
//margin = ({top: 20, right: 20, bottom: 30, left: 40})
hexgrid = (radius, flipyaxis) => {
let hexbin = d3.hexbin().radius(radius)
let a = radius*Math.sqrt(3)/2
return {
a: a,
endx: (x) => {
return 2*(1+x)*a+a
},
endy: (y) => {
return radius+(1 + (y-1)*3/5)*radius*5/2
},
midx: (x, y) => {
if (y%2 == 0) return (2*x+1)*a
return 2*(1+x)*a
},
midy: (x, y) => {
//if (y%2 == 0) return radius + (3/2)*y*radius
return (1 + (y-1)*3/5)*radius*5/2
},
hexagon: hexbin.hexagon()
}
}
getRadius = (width, count) => {
return 2*width / ((3+2*count)*Math.sqrt(3))
}
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.
