Skip to main content
SimilarExport ZIP
100%

Hex map of UK constituencies

✓ Published0🌍 Public
Jjl2047
Last edited Nov 7, 2019
Created on Nov 7, 2019

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.

AI-generated description
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
95% match
Loading thumbnail…

Hex map of UK constituencies

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.

Jjimmyjs1607
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
87% 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
83% 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
70% 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
69% 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
69% match
Loading thumbnail…

// source http://jsbin.com/bobulik

This example displays a static Albers equal-area conic projection map of the United Kingdom, with its constituent subunits (England, Scotland, Wales, and Northern Ireland) filled in distinct colors. It renders the geographic boundaries and labels place names from the TopoJSON dataset. Using the d3.geoAlbers projection and d3.geoPath, the SVG paths are generated from the topojson feature collection. The code loads the UK map data via d3.json and applies CSS to hide Ireland.

MMTClass
67% match