Europe geo to square tiles animation with geo2rect

100%

Europe geo to square tiles animation with geo2rect

✓ Published0🌍 Public

Last edited Dec 21, 2017

Created on Dec 21, 2017

This example animates a geographic map of Europe into a square tile grid, using the geo2rect library to morph each country’s polygon into a rectangle positioned at a custom grid location. The visualization loads Natural Earth-derived GeoJSON, simplifies multipolygons and holes, and uses D3 v4 with SVG paths and a Mercator projection. Clicking the toggle button switches between the original geo layout and the tiled arrangement, with a 2000-millisecond transition animating the transformation. The grid positions are manually defined in a configuration object, and the code relies on geo2rect’s internal computation of closest corner points to map each shape.

AI-generated description

The code I used to animate the geographic map of Europe to a square tile map in The Eurosearch Song Contest. It uses the great geo2rect by Sebastian Meier.

This map is basically a clone of one of Sebastian's examples. I created the geojson from Natural Earth data, selected the countries I needed (the Eurovision participants) in QGIS and simplified the geometries with mapshaper. Laying out the tile grid was a nice puzzle (yes, looking at you, Balkans).

Some remarks:

geo2rect filters out holes and only keeps the biggest polygon of multipolygons (tough luck, Northern Ireland and Northern Cyprus...)
I filtered out some smaller European countries and islands from the geojson, like Andorra and Liechtenstein.
I kept Australia in, as it participated in the Eurovision Song Contest. You can see it flying in from the bottom right corner.
I had to override the scale and center of the map in geo2rect.js. geo2rect calculates these from the geometries, but because Russia is so big and Australia is in there, I had to zoom in on Europe manually.

You can read the whole making-of of the Eurosearch Song Contest on my site.

forked from <a href='http://bl.ocks.org/maartenzam/'>maartenzam</a>'s block: <a href='http://bl.ocks.org/maartenzam/ec11de22bc8e5608a98f207f1c09bdb6'>Europe geo to square tiles animation with geo2rect</a>

forked from <a href='http://bl.ocks.org/axbazin/'>axbazin</a>'s block: <a href='http://bl.ocks.org/axbazin/780f8a4dd448765957358fd8f514303c'>Europe geo to square tiles animation with geo2rect</a>

mit Licensed

Similar vizzes

Loading thumbnail…

DataViz of Freight Transport around Europe

An animated, tile-based map visualizes freight transport volumes among European countries from 2010 onward. The visualization toggles between a traditional geographic projection and a grid layout where each nation becomes a rectangle. It renders country boundaries from GeoJSON data and animates transitions between the two modes. The project uses D3.js v4 for SVG rendering and animations, along with the geo2rect library to compute the rectangular tile positions, and loads trade data from a JSON file.

NNpfn

74% match

Loading thumbnail…

Geo2rect test using nmap

This example uses D3.js v4 and the geo2rect and nmap libraries to transform the districts of Madrid, Spain, from a GeoJSON polygon map into a rectangular treemap-like layout. The `geo2rect.compute` function converts each district's geographic boundaries into a rectangle, while the `nmap` algorithm arranges these rectangles in a grid. The visualization renders as SVG paths and an animated toggle control, highlighting the potential for spatial distortion when converting irregular administrative boundaries into a rectilinear grid.

LLuisSevillano

73% match

Loading thumbnail…

TestProjEurope

This interactive map of Europe, built with D3 v4, visualizes geographic data for the continent. The visualization uses a custom GeoJSON file to render country boundaries, with vector shapes drawn onto an SVG canvas. The map is constructed using D3's geographic path generator, allowing for smooth zooming and panning interactions. The project appears to be a test or demonstration of mapping capabilities, with the focus on displaying the geometry of European countries in a clean, minimal style.

HHectorDt

73% match

Loading thumbnail…

Europe_test2

This visualization shows a map of Europe with overlaid data points representing altitude measurements across the continent. It uses a conic conformal projection via `d3.geoConicConformal` and `d3.geoPath` to render country boundaries from a GeoJSON file, while circles plotted from a CSV dataset are colored on a quantile scale based on altitude values. An interactive range slider controls altitude filtering, and a button resets the view, with zoom support provided by `d3.zoom`. Hovering reveals country names through a tooltip.

LLaippe

73% match

Loading thumbnail…

Europe Map

This example visualizes the countries of Europe as a static SVG map using a Mercator projection centered on the continent. The code loads GeoJSON feature data via `d3.json` and renders each region as a `path` element using `d3.geoPath` with the projection. React and D3 v5 are used together to manage the document, while TopoJSON is loaded but not directly applied in the visible logic. Country boundaries appear as grey strokes with white fills, set through SVG attributes.

Ggayathrikavya

73% match

Loading thumbnail…

Europe_test

This map shows the countries of Europe as solid dark-gray polygons on a white background. The data comes from a GeoJSON file named `custom.geo.json`, which contains the administrative boundaries. The visualization uses the D3.js v4 library, employing `d3.geoConicConformal()` for the map projection and `d3.geoPath()` to render each country's path. The map is centered on coordinates 10, 46 and rendered as SVG within a fixed 700 by 580 viewport.

LLaippe

73% match

Loading thumbnail…

Europe Map

This example displays a map of Europe rendered as SVG paths, with each country filled in white and outlined in grey. The visualization uses a Mercator projection centered on coordinates [13, 52] and scales the map to fit a 600×500 viewport. The code loads GeoJSON feature data from a remote GitHub gist, then applies `d3.geoPath` to convert the geographic coordinates into SVG path data. React 16 and D3 v5 work together, with D3 selecting the body element to append the SVG directly rather than mounting through React components.

Kkottenikhil

72% match

Loading thumbnail…

Europe_flight

This map of Europe uses a conic conformal projection to render world landmasses and country boundaries, drawn with d3.geoPath from TopoJSON data. A red circle is manually positioned, while a graticule layer provided by d3.geoGraticule10 adds a reference grid. The visualization uses D3 v4 and SVG to display the geographic context.

LLaippe

72% match