Fork of Making a map

100%

Fork of Making a map

✓ Published0🌍 Public

Last edited Feb 13, 2022

Created on Feb 13, 2022

This example renders a world map using a Natural Earth projection sourced from the world-atlas package. The visualization displays countries as white SVG paths on a dark teal sphere, with a hover effect that highlights each country in amber. Built with d3 v5, it employs `d3.geoNaturalEarth1` and `d3.geoPath` to generate the country shapes, and `topojson.feature` to convert the TopoJSON data into geographic features. The interactive zoom functionality is implemented via `d3.zoom`, which updates the group transform on each zoom event.

AI-generated description

A simple map from d3 using topojson.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using a natural Earth projection, displaying country boundaries as colored paths over a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The map is drawn with D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while each country is styled as a light green filled SVG path with a subtle black stroke. The visualization demonstrates a straightforward, static cartographic rendering with minimal interactive or animated elements.

AAiden Lau

92% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. It renders geographic boundaries as SVG paths, generated from a world-atlas dataset loaded via D3’s `json` function. The code employs `d3.geoPath` with the `geoNaturalEarth1` projection and uses the `topojson` library’s `feature` method to extract country geometries from the TopoJSON data. A static sphere outline is drawn first, followed by each country path, with stroke opacity creating subtle border definition.

Ffsajedi22

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection, displaying countries as light green shapes with subtle black outlines against a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using TopoJSON’s `feature` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projections, appending SVG paths for each country and the surrounding sphere. The visualization demonstrates a straightforward D3 v5 workflow for projecting and displaying map data in an SVG container.

RRunxin Shao

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection. The map is drawn with SVG paths, where countries are filled with light green and the surrounding sphere is dark blue. The code uses D3 v5 functions `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the `topojson` library’s `feature` function converts the world-atlas TopoJSON data into geometric features for rendering. The visualization loads country boundaries from the `world-atlas` package and applies a subtle black stroke with low opacity to each country outline.

Rrajeshathakur

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a global map with countries filled in light green, using a natural Earth projection against a blue spherical backdrop. The map is built with D3.js v5 and the `d3.geoPath` and `d3.geoNaturalEarth1` APIs, with country boundaries rendered as SVG paths. The visualization also includes an interactive zoom feature that applies a transform to the SVG group via `d3.zoom()`. The data is sourced from the world-atlas package’s 110m GeoJSON file, converted to features with TopoJSON’s `feature` function.

Aayonghosh2003

91% match

Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Aadapavaishnavi12

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green and a blue sphere outline. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON features using `topojson.feature`. The map is rendered as SVG paths generated by `d3.geoPath` with the `geoNaturalEarth1` projection, while the outer sphere boundary is drawn separately. The visualization demonstrates a minimal, static cartographic rendering with D3 v5.

GGang Chen

90% match