Skip to main content
SimilarExport ZIP
100%

Making a map

✓ Published2🌍 Public
Bbluesibra
Last edited Jan 3, 2020
Created on Jan 3, 2020
Forked from Making a map

A world map is rendered as a navigable SVG, using a natural Earth projection to display country boundaries and a styled sphere outline. Viewers can pan and zoom the map via d3.zoom. The visualization builds the map with d3.geoNaturalEarth1, d3.geoPath, and topojson.feature, loading country geometry from the world-atlas TopoJSON dataset. Countries are filled with a light color that changes on hover, set through CSS.

AI-generated description

A simple map from d3 using topojson.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a map

This example shows an interactive world map with zoom and pan capabilities. Countries are rendered as styled SVG paths with hover highlighting, while the globe’s sphere is drawn as a separate background layer. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.zoom` for interaction. Geographic data comes from the world-atlas TopoJSON file, processed via `topojson.feature`, and rendered as SVG with CSS-styled country shapes.

Ttejasviprasad06@gmail.com
92% match
Loading thumbnail…

Making a map

This example displays a world map using a natural Earth projection, with each country rendered as a light-green SVG path that darkens on hover. The map is built with the `d3.geoNaturalEarth1` projection and `d3.geoPath`, while TopoJSON and TSV files from the world-atlas package supply country boundaries and names. The `d3.zoom` API enables panning and zooming of the entire map group, and hover tooltips show the country name via a `<title>` element.

SSharvariPhadke
91% match
Loading thumbnail…

Making a World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

MMinwoo Pak
91% match
Loading thumbnail…

Making a map

This example displays a static world map with country boundaries and a blue sphere backdrop, rendered entirely as SVG paths. It uses a Natural Earth projection from `d3.geoNaturalEarth1`, with `d3.geoPath` generating the geographic shapes. The country data comes from the World Atlas TopoJSON dataset, processed through `topojson.feature`. The visualization shows the map in green fill, black strokes, and a dark blue ocean, with a light blue page background.

WWarren-Fitzhenry
90% match
Loading thumbnail…

Make a Map

This example displays a world map using a natural Earth projection, rendering countries and the surrounding sphere. The visualization loads geographic data from the world-atlas TopoJSON dataset, then uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. The map fills landmasses in light green with a subtle black stroke, while the sphere is colored blue. Both the topojson `feature` method and D3’s data join are used to bind and append country paths to the SVG.

Fforeverworld1879
90% match
Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

EEllednera
90% match
Loading thumbnail…

Make a Map

This example renders an interactive world map using the Natural Earth dataset from world-atlas, displaying country boundaries with hover highlighting. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to draw SVG paths, with topojson’s feature method converting TopoJSON to GeoJSON. Countries are colored green, turning red on mouseover, while the ocean sphere is light blue. The map supports pan and zoom through d3.zoom, which applies a transform to the map’s group element.

MMatthew Rubino
90% match
Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing
89% match