Freelancing Data Visualization Designer & Artist
Published
Edited
Jan 7, 2020
2 forks
13 stars
svg = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.append("g").attr("transform", `translate(${hexRadius},${hexRadius})`)
//Draw each hexagon
g.selectAll(".hexagon")
.data(hexbin(points))
.join("path")
.attr("class", "hexagon")
.style("stroke", "white")
.style("stroke-width", 1.5)
.style("fill", (d,i) => color[i])
.attr("d", d => "M" + d.x + "," + d.y + hexbin.hexagon())
.on("mouseover", mover)
.on("mouseout", mout)
// //For testing, draw the center locations of each [x,y] from the points array
// g.selectAll(".hexagon-point")
// .data(points)
// .join("circle")
// .attr("class", "hexagon-point")
// .style("fill", "black")
// .attr("cx", d => d.x)
// .attr("cy", d => d.y)
// .attr("r", d => 2)
////////////////////////////////////////////////////////////
//////////////////// Mouseover functions ///////////////////
////////////////////////////////////////////////////////////
//Mouseover a hexagon
function mover(d) {
d3.select(this)
.transition().duration(10)
.style("fill-opacity", 0.3)
}
//Mouseout function
function mout(d) {
d3.select(this)
.transition().duration(1000)
.style("fill-opacity", 1)
}
return svg.node()
}//svg
points = {
let points = []
for (var i = 0; i < mapRows; i++) {
for (var j = 0; j < mapColumns; j++) {
let x = hexRadius * j * SQRT3
//Offset each uneven row by half of a "hex-width"
if(i%2 === 1) x += (hexRadius * SQRT3)/2
let y = hexRadius * i * 1.5
points.push({x: x, y: y})
}//for j
}//for i
return points
}
hexRadius = Math.floor(d3.min([initialWidth/((mapColumns + 0.5) * SQRT3), initialHeight/((mapRows + 1/3) * 1.5)]))
width = Math.ceil(mapColumns * hexRadius * SQRT3 + hexRadius)
height = Math.ceil(mapRows * 1.5 * hexRadius + 0.5 * hexRadius)
hexbin = d3.hexbin()
.radius(hexRadius)
.x(d => d.x)
.y(d => d.y)
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.
