Skip to main content
SimilarExport ZIP
100%

D3 Map

✓ Published2🌍 Public
Rrdeichert
Last edited Dec 16, 2019
Created on Dec 16, 2019
Forked from D3 Face

This D3 map visualizes global countries using a natural Earth projection. It renders a blue sphere backdrop with light green country polygons outlined in black. The visualization uses the `d3.geoNaturalEarth1` projection with `d3.geoPath` to generate SVG paths, and the `topojson.feature` API to extract country boundaries from a world-atlas TopoJSON dataset. The map displays a graticule-free, simplified world view with countries filled and stroked according to CSS classes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map D3

This map shows the countries of the world on a natural Earth projection, with oceans in blue and landmasses in light green. The visualization uses `d3.geoNaturalEarth1` as the projection and `d3.geoPath` to generate the SVG paths for each country. It loads world boundary data from the world-atlas package in TopoJSON format, then converts it to GeoJSON using the `topojson` library’s `feature` function before rendering. The entire graphic is drawn as SVG elements.

Ppplomith
92% match
Loading thumbnail…

D3.js map

This visualization displays a flat, natural Earth projection map of world countries, rendered as a single SVG with light green landmasses and a light blue ocean sphere. It uses D3.js v7 (with `select`, `json`, `geoPath`, and `geoNaturalEarth1`) and TopoJSON’s `feature` method to load and convert country boundaries from the world-atlas dataset. The code appends paths for the sphere and each country, styling them via CSS, and runs entirely client-side in a bare HTML page.

Ssheafallick
91% match
Loading thumbnail…

Map with D3.js

This visualization displays a world map using a natural Earth projection, with country boundaries rendered as filled SVG shapes. The sphere outline is drawn first using a `geoPath` generator with an empty GeoJSON sphere object. Country features are loaded from the World Atlas TopoJSON dataset via `d3.json` and converted using `topojson.feature`. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for path generation, with countries colored steelblue against a white background.

1123fischer
91% match
Loading thumbnail…

D3 Map

This map displays world country boundaries in an interactive natural Earth projection. It uses D3's `geoNaturalEarth1` projection and `geoPath` to render SVG paths, with a topojson `feature` transformation applied to country data from a world-atlas JSON file. The visualization includes a sphere background and country shapes in distinct colors. Zooming is enabled through D3's `zoom` event, which updates the group element's transform based on the current view.

Ssaliha54
91% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
90% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using D3.js, with countries rendered as light green paths against a blue spherical backdrop. The example loads geographic data from the world-atlas TopoJSON collection and projects it using the Natural Earth projection via `d3.geoNaturalEarth1`. The map is drawn as SVG paths, generated by `d3.geoPath`, and the sphere outline is created from a synthetic Sphere geometry. Country boundaries appear with black strokes at low opacity, while the data is processed through the `topojson.feature()` API.

Ggcappadaniel
90% match
Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Ffloresh
90% match
Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716
90% match