fresh block

100%

✓ Published0🌍 Public

Last edited Jul 25, 2018

Created on Jul 25, 2018

A rotating showcase of many map projections, this visualization cycles through a menu of options at a fixed interval, displaying the Netherlands as a shaded landmass within a graticule grid on a spherical outline. It uses D3 v3 with `d3.geo.path` to render SVG paths and fades between projections using TopoJSON data from `NLD_adm0.json`. Manually selecting a projection from the dropdown stops the automatic rotation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian

81% match

Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour

79% match

Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour

79% match

Loading thumbnail…

fresh block

A map of world regions renders as a choropleth using a Mercator projection, with each country or territory filled by a distinct categorical color. The visualization loads a TopoJSON file and converts it to GeoJSON with the `topojson.feature` API, then fits the projection to the data using `projection.fitSize`. D3 v5’s `d3.geoPath` generates the SVG paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns unique colors to each feature.

GGerardoFurtado

78% match

Loading thumbnail…

Projection Transitions

A dropdown menu animates between 40+ map projections, swapping the rendered world map and graticule every 1.5 seconds. The visualization uses the `d3.geo.projection` plugin’s various projection constructors (e.g., `d3.geo.aitoff`, `d3.geo.robinson`) and renders land polygons via `d3.geo.path` with SVG paths, including a graticule overlay. The world-110m GeoJSON source feeds `topojson.feature` to build the land shapes. Selecting a projection from the menu triggers an animated transition between projections.

MMicrobie

77% match

Loading thumbnail…

Projection Transitions

Projection Transitions showcases a rotating sequence of over 40 map projections, including Aitoff, Mercator, and Winkel Tripel. The visualization draws world land boundaries from TopoJSON and overlays a geographic graticule, rendering each projection with d3.geo.path. A dropdown menu allows manual selection, while an automatic timer cycles through projections every 1.5 seconds. The code uses the d3.geo.projection plugin and applies SVG animations to transition smoothly between geographic coordinate systems.

MMicrobie

77% match

Loading thumbnail…

fresh block

A world map of countries is rendered as SVG paths using D3's `d3.geo.equirectangular` projection and `d3.geo.path` tool, colored light gray except for those with authority data, which are filled with a lighter orange. Clicking a country zooms in via a D3 transition on the `g` group, and a text zone updates with the country's name, linking to its grid authority URL if available. The interaction relies on `d3.behavior.zoom` to handle pan and zoom, with the map data sourced from an external `grid_countries.txt` file containing GeoJSON.

RRCura

76% match

Loading thumbnail…

fresh block

A map visualizes multiple voyages as colored, animated routes across a Mercator projection, with each year's set of journeys shown as dimmed paths and red markers moving along them, while green and red text labels sort voyages by year and individual trip. Clicking a year toggles its paths' opacity, and clicking a voyage label triggers a transition on the corresponding path marker. The visualization uses D3 v4's `d3.geoMercator`, `d3.geoPath`, `d3.line` with `d3.curveCatmullRom`, `d3.nest`, `d3.queue`, and `d3.csv`, reading voyage data from `multipleVoyages4.csv` to render SVG paths, circles, and text with fading encodings.

SSallyFl

75% match