Skip to main content
SimilarExport ZIP
100%

Making a map

✓ Published0🌍 Public
Aakshayms0
Last edited Nov 1, 2022
Created on Nov 1, 2022
Forked from HTML Starter

This map displays the world’s countries as light green polygons on a dark blue sphere, with hover highlighting in red. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features from TopoJSON data, which is merged with country names from a world-atlas TSV file. The visualization supports pan and zoom interaction via d3.zoom, and all drawing is done as SVG paths.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map!

This map visualization displays countries as light green polygons with black outlines, set against a blue spherical background representing the globe. The example uses D3.js v5, specifically d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with the TopoJSON library to convert geographic data into SVG paths. Country boundaries are rendered from the world-atlas countries-110m.json dataset, which is fetched and processed asynchronously. The visualization demonstrates a basic choropleth-free world map, focusing on geographical shape rendering rather than data encoding.

AAbhijeet Panda
91% match
Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
90% match
Loading thumbnail…

Making a map

This example shows a world map rendered as an SVG, with countries filled in light green against a dark blue spherical background. It uses the D3.js library along with the topojson package to fetch and process geographical data from the `world-atlas` dataset, converting TopoJSON features into map paths. The `geoPath` and `geoNaturalEarth1` projection APIs generate the map, while the `sphere` class draws the ocean.

Aakshayms0
90% 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
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
89% match
Loading thumbnail…

D3 Map

This interactive world map displays countries in light green on a blue sphere, with hover states that turn a country red and show its name. The visualization uses a D3 geoPath with the geoNaturalEarth1 projection to render both the sphere and country outlines, while the topojson `feature` API converts the world-atlas GeoJSON data into drawable paths. A D3 zoom controller applies SVG transforms to the grouped elements for panning and zooming, and the map is rendered entirely as SVG elements.

SShubham Yadav
89% 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
89% match
Loading thumbnail…

Make a map with D3 js

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

AAjit Singh
88% match