Experimenting

100%

✓ Published1🌍 Public

Last edited Mar 29, 2023

Created on Mar 28, 2023

Forked from Let's make a map with D3.js!

This example zooms in on Vietnam using a Mercator projection, filling the country’s outline in red against a blank background. It filters a world GeoJSON dataset by country name and renders the selected feature as a single SVG path. The code uses `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to handle projection and data conversion, with the geographic data pulled from a remote GitHub repository.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map

This example shows a world map rendered as SVG paths, with each country outlined using a Mercator projection. The code loads a GeoJSON-like dataset from the world-atlas package and uses the `topojson` library's `feature` function to extract country features. It then applies `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data for each country, appending them to the SVG canvas.

JJanet Chen

78% match

Loading thumbnail…

Let's make cheap tricks with D3.js!

This example displays a zoomable, equal-earth projection of the world with countries rendered as colored SVG paths and names revealed on hover. It uses D3.js v5 with the `d3.geoPath` and `d3.geoEqualEarth` projections, plus the `d3.zoom` module for interactive pan and zoom. Country boundaries come from the world-atlas TopoJSON dataset, while names are joined from a TSV file, and a hover effect changes country fill to red.

JJefferson Abreu

77% match

Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

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…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map from TopoJSON data loaded from the World Atlas package, using D3’s `geoMercator` projection and `geoPath` to draw each country as an SVG path. The map features green-filled countries with black strokes, and the code demonstrates the basic data join pattern with `selectAll` and `enter().append()`.

TTheRedUnicorn

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map with D3.js, rendering countries as light-green SVG paths on a dark blue background. It uses the `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG path data, while TopoJSON’s `feature` method extracts country boundaries from a world-110m dataset loaded from unpkg. The visualization focuses on a clean, minimal map with thin black strokes separating countries, making it a straightforward introduction to geo-spatial data visualization.

NNita

77% match

Loading thumbnail…

let's make a world map

This interactive map renders world countries as SVG paths using a Mercator projection. The visualization loads country boundaries from a world-atlas GeoJSON/TopoJSON dataset and draws them server-side with D3’s `geoPath` and `geoMercator`. The code employs `topojson.feature` to convert topological data into geometric features, then appends each path to the SVG canvas.

KKRITIKA RAI DWIVEDI

76% match