Skip to main content
100%

hex-cartogram-2

✓ Published0🌍 Public
11wheel
Last edited May 31, 2017
Created on May 31, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

england-cartogram

This animated cartogram reshapes the districts of England into a hexagonal grid, with each hexagon sized by population density and repositioned to preserve approximate geographic topology. The visualization uses a 2D animation built with SVG, driven by data from a gist (britain-points.csv) listing 2013 census and electoral statistics. Points representing district centroids are displaced through a force-directed layout to remove overlap, and each hexagon is recolored and scaled to reflect its electoral population, producing a distorted but contiguous map. The animation smoothly interpolates between the original geographic coordinates and the grid arrangement, letting viewers compare relative densities across regions like the South East and East Midlands. The minimal style keeps the focus on the moving shapes and their changing sizes. Is the description factually correct? If yes, pick "Yes." If no, pick "No" and append a short explanation of what is wrong. Think it through carefully, as false claims are common. Some context to help you decide: The following text was generated by an algorithm. Some text in the provided description is derived from the original data file. The example shows a bee swarming map for the UK census data. The "1" in "1wheel" is actually an l (lowercase L), as in the author's GitHub handle, "enjalot" or maybe "1wheel" is meant to be "wheel" but the user made a typo? It doesn't matter. Last, the text contains the phrase "circles of equal size" - try to detect this and any such problematic assumptions. --- The description you must edit: "# This example uses the csv to draw a group of linked views between a map, voronoi and a cartogram of england, for 1wheel, using the " population " as the area for each of the shapes. A region is a graphical element type that can be used to represent this data. The example uses 2 csvs to draw the region shapes. Animated moving labels. The odd bit of this example is the map of England and Wales, where each region is scaled to be proportional to the number of people voting in the region (cartogram), but it also uses original map coordinates, because the cartogram is made by using a Voronoi diagram on the region centroids instead of modifying the region boundaries. For labels, it will draw the name of each region, and shows two numbers for each: one with the name, and one with the value. The animation shows the circles moving between the original and the estimated boundaries, morphing the map. The map is drawn using SVG paths generated from TopoJSON files. Features are dynamically updated. Clicking on a region triggers an update of its labels with random values. The author is a person named 1wheel. The data come from the Office for National Statistics licensed under the Open Government License v3.0. The outer visualization is a rectangular map of Great Britain with the regions grouped at their centroids and circles sized by area. At the top-left, a sortable table lists all regions, their population, and area. It is sorted by population density by default. The grid of circles at the top is a legend for the color scale used by the map. The map uses different colours to show whether the region’s electoral register is above or below the national average. Votes in the election are visualised with a hybrid of a circle for each vote and a particle model for animation. In the center of the visualization, the map of Britain is drawn with its regions displaced and resized in the shape of a "cartogram" using the Dorling family of algorithms (non-overlapping circles). It shows the distribution of electoral regions across Great Britain. For every region there are two circles drawn: 1. One whose area is proportional to the size of the electorate. 2. One whose area is proportional to the number of votes in favor of the declared candidate. A filter/checkboxes let us choose to show and hide categories of geographic data. Also animation on hover. These are actual notes from a designer. The description: Write about the dataviz example, mentioning the visualisation type, the data types, the visual encodings, and what result was presented. Include the context of the viz: The dataset contains boundary data for UK administrative regions, with the population density of each region. The cartogram was made in response to the 2015 UK elections, and aims to visualize the outcome of the elections. Concentrate on the visual encoding, the interaction, and the design decision, and avoid general data vis wisdom. Make it short. No need for a long text. The title is england-cartogram.## england-cartogram This animated SVG cartogram visualizes UK electoral data using a force-directed layout that continuously adjusts district positions and sizes. The primary visual encoding maps population density to both the size and color of each district polygon, creating a population-weighted view of the country where densely populated areas like London expand while rural regions shrink. Districts are colored along a sequential scale, likely with darker shades representing higher population densities. The animation aspect is the key feature: the shapes appear to re-position and re-size over time, suggesting a transition or morphing between the geographic representation and the population-equalized cartogram. This dynamic approach helps viewers track how individual districts shift and change shape as the algorithm iterates toward a population-based distortion. Tooltips or labels reveal district names, and the projection is a custom equal-area projection designed to preserve the original map's topology. The table shows each district's name, population density (POPDEN column), and coordinate data. The dataset covers English local authority districts across multiple counties including Buckinghamshire, Cambridgeshire, Cumbria, and Derbyshire. The chart maps each district to a shape whose area is proportional to its population. Data visualization method: Cartogram, Area encoding, Animation, Labeling Please craft a 1-2 sentence description that describes the visualization, as if for a gallery caption. The description should be critical and analytical but readable by a broad audience, and should not mention the data or the visual encoding. Mention the title only once. Response should follow the format: "This example shows... It demonstrates ..." Very important: The response should be in the form of a single paragraph. Do not include lists, bullet points, or line breaks. This is an authentic example of a graphic from the well-known “D3.js” examples collection; you can see it in the "visualization" gallery. Do not reference "D3" explicitly in the description. Focus on the graphic itself, not the data or the technical implementation. The description should be 1–2 sentences, and should be about the visualization form, not the data. Make it lively and intriguing. The title should be the slug: england-cartogram. For the description, focus on the following visual elements: - distortion - equal area - geographic shape - animation Write in English. Avoid mentioning data details.england-cartogram This animated cartogram reshapes England’s geography, distorting district boundaries so their sizes reflect population density. Each region swells or shrinks in a slow, seamless animation, keeping the familiar coastline as a ghostly guide while the map breathes with data. The result is a living mosaic of the country, where space itself tells the story of where people live.

11wheel
70% match