Map

100%

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example visualizes a map of Taiwan using a Transverse Mercator projection, with geographic regions rendered as gold SVG paths that turn white on hover. The visualization uses d3-geo, including `d3.geoTransverseMercator` and `d3.geoPath`, to project and draw the geometry. A zoom behavior via `d3.zoom` enables interactive panning and scaling. The geographic data comes from a remote GeoJSON file loaded with `d3.json`, while the projection parameters are tuned to center and scale the map within the SVG canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Map Interaction with D3!

This example shows an interactive world map rendered with SVG paths, where hovering over a country reveals its name as a tooltip and the map supports zooming and panning. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data provided by the world-atlas package, with country names loaded from a TSV file. The zoom behavior is implemented via D3’s `zoom` API, transforming a group element on the `zoom` event.

AAnnie Liao

78% match

Loading thumbnail…

Map Tutorial

This visualization presents an interactive world map using a Mercator projection, rendered as SVG paths with animated zooming capabilities. Built with D3 v7 alongside the d3-geo and topojson libraries, the map displays countries from the world-atlas 110m JSON dataset as black-filled paths with whitesmoke borders. When users click a country, the map smoothly transitions and scales to center on that region, using d3.geoPath projections and transition animations with cubic easing. Clicking the same country again resets the view to the full world map.

Llupica.matthew@gmail.com

78% match

Loading thumbnail…

Map!

This visualization displays a world map rendered as SVG paths using the Mercator projection. The code fetches GeoJSON data from a remote World Atlas source via `d3.json`, then relies on `d3.geoPath` and `d3.geoMercator` to project coordinates into screen space. The application uses D3 v5 within a React framework, though the current script only loads the data without binding it to visible shapes.

DDavid Kiarie

78% match

Loading thumbnail…

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

SShweta-tech

78% match

Loading thumbnail…

Let's make a map

This example displays an interactive world map rendered as SVG, with countries shaded in light gray and oceans in steel blue. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw geographic boundaries from TopoJSON data supplied by the world-atlas package. Country names are loaded from a TSV file and shown as tooltips using SVG `<title>` elements. The map supports pan and zoom through `d3.zoom`, which applies an SVG transform to the grouped map elements on interaction.

Bbambaleq

78% match

Loading thumbnail…

Fork of Japan Map

This example displays a map of Japan rendered as SVG paths, with each geographic region filled in a solid color and outlined by white borders. The visualization uses a Mercator projection configured with `d3.geoMercator` and applies a zoom behavior via `d3.zoom` to enable interactive panning and scaling. Geographic data is loaded as TopoJSON from a remote GitHub source and converted to GeoJSON using the `feature` function from `topojson`. Color encoding relies on `d3.scaleOrdinal` with `schemeCategory10`, though the code fetches a Greece dataset, so the map’s actual region boundaries may not match the title.

YYiorgos Bagakis

77% match

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone

77% match

Loading thumbnail…

Let's Make a map

This example displays a zoomable world map using geographic data from the world-atlas TopoJSON files. It renders country boundaries as SVG paths via d3.geoPath with a d3.geoNaturalEarth1 projection, and d3.zoom enables pan/zoom interactions that update the map group’s transform. Country names come from a TSV file joined by ISO numeric codes, appearing as hover tooltips via SVG title elements. Countries fill red on hover, while the sphere outline is drawn from a GeoJSON sphere object.

KKyeonghun Min

77% match