Freelancing Data Visualization Designer & Artist
hex_points = {
const ctx = DOM.context2d(width, height, 1)
//Set up the projections
const projection = d3.geoNaturalEarth1().fitWidth(width, {type: "Sphere"})
const path = d3.geoPath(projection, ctx)
//Create a land shape | Filter out Antarctica
const land = topojson.merge(world, world.objects.countries.geometries.filter(d => d.id !== "010"))
// Initialize the context’s path with the desired boundary (nothing is drawn to the screen)
ctx.beginPath()
path(land)
//Figure out the hexagon grid dimensions
const hex_width = SQRT3 * hex_radius
const hex_height = 2 * hex_radius
const map_columns = Math.ceil(width / hex_width)
const map_rows = Math.ceil((height - 0.5*hex_radius)/(1.5 * hex_radius))
//Loop over hexagon grid
let hex_points = []
for (let i = 0; i < map_rows; i++) {
for (let j = 0; j < map_columns; j++) {
let a
let b = (3 * i) * hex_radius / 2
if (i % 2 === 0) a = SQRT3 * j * hex_radius
else a = SQRT3 * (j - 0.5) * hex_radius
//Check if this point lies within the landmass, if yes, save it
if (ctx.isPointInPath(a, b)) hex_points.push({x: a, y: b})
}//for j
}//for i
return hex_points
}
hexagon_outer_points = [[0, -1], [SQRT3 / 2, -0.5], [SQRT3 / 2, 0.5], [0, 1], [-SQRT3 / 2, 0.5], [-SQRT3 / 2, -0.5], [0, -1]]
height = width/2
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.
