Skip to main content
SimilarExport ZIP
100%

Making a map

✓ Published2🌍 Public
SSharvariPhadke
Last edited Jan 23, 2021
Created on Jan 22, 2021
Forked from Making a face

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

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.

Bbluesibra
91% match
Loading thumbnail…

Making a map

This example shows a natural Earth projection map of the world, with countries rendered as light green filled paths and a blue sphere background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` generator to draw the map from TopoJSON data loaded from the world-atlas dataset, processed via `topojson.feature`. Country and sphere outlines are appended as SVG paths with distinct CSS classes.

PPedro Ernesto Tramontina
91% match
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
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
90% match
Loading thumbnail…

Make a Map

This example shows a natural Earth projection of the world, with countries rendered as semi-transparent green shapes against a blue ocean sphere. Using d3.geoPath and d3.geoNaturalEarth1, it projects geographic coordinates onto an SVG canvas. Country boundaries come from the world-atlas TopoJSON dataset, which is parsed with topojson.feature. The visualization demonstrates a straightforward choropleth-free map, highlighting the projection and path generation pipeline from raw TopoJSON data to interactive SVG paths.

Aankita1mit
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…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341
90% match