Hex Map

100%

✓ Published0🌍 Public

Last edited Dec 19, 2015

Created on Dec 17, 2015

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.

AI-generated description

A zoomable map that allows for different sized hexagons at each zoom level. Three full hexagons fit inside each previous level's hexagons, with edges aligned. It currently only works for a few zoom levels - any deeper and it takes too long to load (something I need to explore how to fix).

Uses TopoJSON to represent the hexagons, and Mapbox with Omnivore to render them. D3 is used to generate the sorting lists within each hexagon, and chance.js is used to create the fake words.

Similar vizzes

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

79% match

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock

78% match

Loading thumbnail…

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

PPhilippe Rivière

78% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

78% match

Loading thumbnail…

Map

This map displays the United States with each state filled in orange on a blue background. Using the Albers equal-area conic projection, the visualization renders state boundaries from the us-atlas TopoJSON dataset via `d3.geoPath` and `topojson.feature`, with the SVG drawn inside a React application. The map uses a thin gray stroke for state borders and is centered within the viewport through a translate transform.

DDINESH SAI BOPPANA

78% match

Loading thumbnail…

us test

This example displays a map of the United States with its states rendered as blue, interactive SVG paths that turn darker on hover. A graticule grid and a gray sphere outline provide geographic context, and the map supports pan and zoom via d3.zoom. The visualization uses d3.geoPath with a null projection to draw raw coordinates from TopoJSON data loaded from the us-atlas package, processed through topojson.feature. Styles are defined in CSS, and the code imports the d3 and topojson libraries.

GGlebenator

78% match

Loading thumbnail…

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Ppravalika.thogaru10@gmail.com

78% match

Loading thumbnail…

fresh block

This example visualizes a map of the United States using the D3.js library and a TopoJSON dataset of state boundaries. The visualization renders the geographic outlines of U.S. states from the USA.json TopoJSON file, using the d3.geomap plugin to project and display the map. The page is styled full-screen with an SVG element that fills the viewport. The key visual encoding is the use of state polygons with names and IDs, which enables interactive selection and highlighting of individual states, though no interaction code is included in this basic setup. The design is minimal, focusing on the clean presentation of state shapes in a neutral white background.

CCurran Kelleher

78% match