Skip to main content
SimilarExport ZIP
100%

D3Overlay

✓ Published0🌍 Public
Kknstrom
Last edited Feb 17, 2022
Created on Feb 17, 2022
Forked from dataMap

This example shows a world map rendered with D3Overlay, featuring light green countries on a dark blue spherical background using a Natural Earth projection. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the `topojson.feature` API. The code employs `d3.geoPath` with a `d3.geoNaturalEarth1` projection to draw country boundaries as SVG paths, and includes a separate path for the sphere outline.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as light green polygons on a light blue sphere outline. The code demonstrates multiple geographic projections—Mercator, Orthographic, Stereographic, and Natural Earth—by sequentially assigning them to a single `d3.geoPath` generator, though only the final Natural Earth projection is visualized. Country features are loaded from the `world-atlas` dataset via `d3.json` and converted with TopoJSON’s `feature` method. The map is drawn as SVG paths with light styling for stroke and opacity.

YYoung Song
88% match
Loading thumbnail…

D3-9: World Map

This example presents a world map using an equal-area Natural Earth projection. The visualization renders a blue sphere and light green country polygons as SVG paths. It loads TopoJSON data from the world-atlas package, converting it to GeoJSON with the topojson `feature` function. D3’s `geoPath` and `geoNaturalEarth1` projection generate the map geometry, with CSS styling applied to distinguish the sphere and country boundaries.

Bbkopruluoglu3
87% match
Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

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

Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection via D3.js. A light green SVG path for each country is drawn over a blue spherical backdrop, with black strokes at low opacity for boundaries. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection, loads geographic data from the `world-atlas` 110m JSON dataset, and constructs country features using the `topojson` library. The visualization is entirely SVG-based.

DDan Grunebaum
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection via D3.js. A light green SVG path for each country is drawn over a blue spherical backdrop, with black strokes at low opacity for boundaries. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection, loads geographic data from the `world-atlas` 110m JSON dataset, and constructs country features using the `topojson` library. The visualization is entirely SVG-based.

DDan Grunebaum
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered with a Natural Earth projection, displaying country boundaries as light green polygons against a blue sphere. The visualization uses D3.js v5 and TopoJSON to load and convert world-atlas geodata, with `d3.geoNaturalEarth1` and `d3.geoPath` generating the SVG paths. It draws the sphere background and country outlines via appended `<path>` elements, relying on the `feature` method to extract country shapes from TopoJSON.

Oomar6627-ai
87% match