Hex map of UK constituencies

100%

Hex map of UK constituencies

✓ Published0🌍 Public

Last edited Jun 14, 2021

Created on Jun 14, 2021

A pointy-topped hex map displays the 2017 UK parliamentary constituencies, each rendered with equal visual weight. A dropdown selector allows coloring the hexes by various data, including region, population, election results, and EU referendum estimates. The visualization uses D3 v6, with a custom `Constituencies` class loading HexJSON data. The interface includes interactive elements: a color legend and buttons to save the map as HexJSON or SVG, with WebGL rendering support.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hex map of UK constituencies

This visualization displays UK parliamentary constituencies as a pointy-topped hex map, with each hexagon representing one constituency to give equal visual weight. Users can color the map by various demographic and election datasets, including population, 2017 General Election results, and EU Referendum estimates. The map uses D3.js with geoNaturalEarth1 projection and geoPath for rendering, while the hexagon layout comes from a HexJSON file. A color legend and clickable hexagons allow for interactive exploration and data selection.

Jjimmyjs1607

97% match

Loading thumbnail…

Hex map of UK constituencies

This example shows UK parliamentary constituencies as a hexagonal grid map, using color to encode different data attributes such as region, population, or election results. Users can click on a hexagon to highlight or dim other regions, and a legend allows filtering by color value. Built with D3, it uses `geoNaturalEarth1` and `geoPath` for the map projection and shape rendering, while `scaleOrdinal` with `schemeSpectral` assigns colors. The visualization supports zooming via d3.zoom and renders as an SVG, with data loaded from a provided HexJSON file.

Jjl2047

92% match

Loading thumbnail…

hex-cartogram-2

This visualization is a hex-cartogram of the United Kingdom, transforming the geographic boundaries of Westminster Parliamentary constituencies into a grid of evenly sized and colored hexagons. Each hexagon, colored by the constituency’s regional name using a categorical color scheme, represents one constituency, prioritizing a uniform tile-based layout over true geographic shape. The map is built using the D3.js library, leveraging loaded GeoJSON data for shape coordinates and its scaleLinear and scaleOrdinal APIs for spatial projection and color mapping. The data was sourced from the parlitools database and converted using mapshaper.org, with the final placement adjusted to a custom hex-bin layout to prevent overlaps.

11wheel

84% match

Loading thumbnail…

hex-cartogram

A hexagonal cartogram morphs the geography of UK constituencies into a grid of equally sized hexagons, with each hexagon representing one electoral area and colored by its distance from a randomly chosen focal point. The animation iteratively reassigns hexagons to constituency centroids, gradually reorganizing the layout as points are sorted and offset toward their neighbors. Built with D3.js, it uses a custom `hexbin` layout for hexagon placement and `d3.interval` to drive the animated transitions. The underlying constituency boundaries come from Bloomberg’s 2015 UK election data.

11wheel

82% match

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

68% match

Loading thumbnail…

uk points

This example maps six geographic points across the UK using a GeoJSON FeatureCollection, each point colored according to its `type` (Building, Grass, or Water) and sized by its `cost` property. The visualization renders the points directly onto an SVG canvas using `d3.geoPath` to project the coordinates, with the data loaded from a gist. A D3 selection binds the feature properties to circles, positioning them via the projection and applying categorical colors and radius scales to encode the attributes. No interactive behavior or transitions are included beyond the static representation of the dataset.

JJn1532

66% 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

66% match

Loading thumbnail…

ukip-shift

A scatterplot-style flow visualization tracks shifts in UK constituency vote shares between the 2015 and 2017 elections. Each constituency is represented by a line, moving from its 2015 Conservative-versus-Labour share and UKIP vote percentage to its 2017 position. The SVG animation uses D3 v4’s selection, scale, and axis APIs, with arrowheads marking the direction of change. Data comes from a NYT JSON file, and tooltips are attached via `d3.attachTooltip` for hover details.

11wheel

66% match