d3v5 - Selective Projection Map

100%

d3v5 - Selective Projection Map

✓ Published0🌍 Public

Last edited Jun 21, 2021

Created on Jul 30, 2019

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

AI-generated description

[Gist] https://gist.github.com/Hirosaji/a7d50df66a7f26989bd86f43850bf0a0

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Projection Transitions

This example demonstrates seamless transitions between dozens of geographic map projections, cycling automatically through options like Aitoff, Mercator, and Robinson. A dropdown menu also lets users manually select any projection. The visualization uses d3.geo.path with the geo.projection plugin to render world landmasses from TopoJSON data, along with graticules and sphere outlines. The code interpolates between projections using d3's transition system, updating the path generator's projection on a timer to animate the morphing effect smoothly in SVG.

MMicrobie

82% 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

82% match

Loading thumbnail…

Mercator Projection

This example displays a world map using a Mercator projection, with each country rendered as a gray shape outlined in white. The map is built with the D3.js version 3 library, using `d3.geo.mercator()` to define the projection and `d3.geo.path()` to convert GeoJSON geometries into SVG paths. The geographical data comes from a `countries.json` file containing feature collections loaded via `d3.json()`. The resulting visualization, rendered in an SVG element, demonstrates the classic distortion of landmasses toward the poles inherent to this projection method.

PPatrick Wojda

80% match

Loading thumbnail…

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

Mmbostock

80% match

Loading thumbnail…

Projection Transitions

A drop-down menu and an auto-advancing timer cycle through dozens of map projections, each rendered over a world map with a graticule and sphere outline. The example shows how D3’s `d3.geo.path` and the `d3.geo.projection` plugin smoothly interpolate between projections using the `transition` API, with land from TopoJSON. A menu allows manual selection, while a periodic random selection demonstrates animated morphing between projections.

Mmbostock

79% match

Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Sshabbab01

79% match

Loading thumbnail…

Map

This example demonstrates the flexibility of D3 and React by rendering an interactive world map with adjustable projections. Users can switch between various projection types, such as mercator, orthographic, and equirectangular, while modifying scale, rotation, center, and other properties. The map displays country boundaries alongside a graticule, with controls for border width, dash pattern, background color, and an invert toggle. The visualization uses `topojson` for country data, `d3-geo` for projections and geographic shapes, and React to manage the user interface.

Vvenkatajayanth03

79% match

Loading thumbnail…

World Map with d3.js

This example renders a world map as an SVG using D3.js version 7. It applies a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`, styling each path with a gray fill and dark stroke. The map loads GeoJSON country data from a remote GitHub repository using `d3.json`, and the visualization is contained within an HTML page that imports D3 from a CDN. The code demonstrates basic map projection and data binding in a simple, static geographic visualization.

UUVarshaReddy

79% match