Hexagon Mesh

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 26, 2013

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

AI-generated description

Click and drag above to paint red hexagons. A black outline will appear around contiguous clusters of red hexagons. This outline is constructed using topojson.mesh, part of the TopoJSON client API. A filter is specified so that the mesh only contains boundaries that separate filled hexagons from empty hexagons.

The hexagon grid itself is represented as TopoJSON, but is constructed on-the-fly in the browser. Since TopoJSON requires quantized coordinates, the hexagon grid is represented as integers, with each hexagon of dimensions 3×2. Then a custom projection is used to transform these irregular integer hexagons to normal hexagons of the desired size.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

BBrideau

77% match

Loading thumbnail…

Hexagon Earth Interior Concept

This interactive visualization depicts Earth as a globe with a hexagonal inner structure, using the H3 hierarchical grid system to render pentagons and hexagons that appear to extend inward in concentric layers. An orthographic projection via `d3.geoOrthographic` and `d3.geoPath` draws the sphere and its countries from a TopoJSON world atlas, while the canvas context applies scaling transforms to create the illusion of depth. Users can drag to rotate the globe and zoom via the `drag` and `zoom` behaviors.

CCurran Kelleher

76% match

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Mmbostock

75% match

Loading thumbnail…

Hexagonal Binning (Color)

This visualization uses hexagonal binning to show the distribution of 2,000 randomly generated points with a normal distribution. The d3-hexbin plugin aggregates points into hexagons, and a sequential color scale from white to steelblue encodes the number of points within each bin, with denser areas appearing darker. The SVG rendering includes clipped hexagon shapes and axes generated with d3.axisLeft and d3.axisBottom. The code draws on d3.randomNormal for data generation and d3.scaleSequential for color mapping.

Mmbostock

72% match

Loading thumbnail…

Hexagonal Binning (Area)

Two thousand normally distributed random points are aggregated into hexagonal bins, where the area of each hexagon encodes the number of points it contains. The visualization uses the `d3-hexbin` plugin’s `d3.hexbin()` to bin the data and `hexbin.hexagon()` to generate the SVG path for each bin, with `d3.scaleSqrt` mapping bin counts to radius. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the rendering is clipped to the plotting area via an SVG `clipPath`.

Mmbostock

72% match

Loading thumbnail…

Hex map

This example renders a map of the world as a hexagonal grid using the `d3-hexgrid` library. The SVG output shows continents and country boundaries formed by hexagons, with a color scale distinguishing land from water. The visualization is built with React and uses D3’s hexbin mapping to project geographic coordinates onto hexagon cells, creating a stylized, low-resolution representation of global geography. The code initializes a 1960x800 SVG canvas and loads the hexgrid library via a CDN.

SSam de Man

72% match

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock

71% match

Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda

71% match