Skip to main content
100%

Scalable grid

✓ Published0🌍 Public
Aalansmithy
Last edited Jun 8, 2017
Created on May 16, 2017

This visualization shows the 2015 UK general election results as a scalable grid of constituency rectangles, colored by winning party (Conservative, Labour, SNP, etc.). The grid layout uses SVG rect elements arranged in a responsive, trellis-like structure that can scale to display all 650 constituencies. Each cell represents one constituency, with hover interactions that reveal the constituency name and party. The data is loaded from a CSV file containing constituency IDs, names, winning party, and country codes (England, Scotland, Wales, Northern Ireland), encoded as fill colors to enable quick comparison of party dominance across regions.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

parli grids

The parli grid visualization displays UK parliamentary election results from 2015 using a compact grid of small squares, one for each constituency. Each cell is colored by the winning party: Conservative (c), Labour (lab), SNP (snp), and minor parties (green, pc, dup, sdlp, sf, uup, ld). The grid groups constituencies by country—England, Scotland, Wales, and Northern Ireland—making regional vote patterns visible at a glance. Rendered as an SVG with d3.v4, hovering over a cell highlights the constituency and displays its name, party, and country. The layout uses a treemap-style arrangement to pack the grid cells efficiently.

Aalansmithy
88% 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
74% match
Loading thumbnail…

Fork of Cars Scatter Plotgbh

This chart displays the results of a parliamentary election using a semicircular seating plan, with each seat colored by party affiliation. The data, representing the 2019 UK general election, is rendered as an SVG using the D3.js library via the `d3.parliament()` API. The code animates the entering seats from the center and supports click interactions on individual seats, with the car dataset sourced from the UCI Machine Learning Repository.

NNigel
74% 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
73% match
Loading thumbnail…

Brexit: diverging color schemes

This block maps the 2016 UK Brexit referendum results to parliamentary constituencies, using a diverging color scheme to show the Leave/Remain split. The map includes Great Britain and Northern Ireland, with constituency shapes from a TopoJSON file and referendum results joined to each region. Built with D3 v4 and rendered as SVG, the visualization highlights geographic patterns in the vote through divergent colors.

AAlan McConchie
72% 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
72% 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
71% 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
71% match