Skip to main content
SimilarExport ZIP
100%

D3.js map

✓ Published1🌍 Public
Ssheafallick
Last edited Dec 16, 2022
Created on Dec 16, 2022
Forked from D3 Face

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
92% match
Loading thumbnail…

Let's make a MAP with D3.js!

This example visualizes world countries as a natural Earth projection map, with light green landmasses on a sky blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the `feature` function. The map is rendered with D3’s `geoNaturalEarth1` projection, `geoPath` for path generation, and SVG paths for each country, including a sphere outline. Styling applies via CSS classes for the sphere and country fills, with semi-transparent black country borders.

Ccledevoute
92% match
Loading thumbnail…

Map with D3.js

This map visualization displays the countries of the world in a natural Earth projection, with oceans filled in steel blue and landmasses in light green with subtle black outlines. The map uses a D3.js geoPath and geoNaturalEarth1 projection, alongside the topojson library’s feature function to convert the world-atlas TopoJSON data into GeoJSON features for rendering. Each country is drawn as an SVG path within a 960x500 canvas, and the code also generates a sphere background to represent the Earth’s surface.

Ssiddharth171
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume
92% match
Loading thumbnail…

Let's make a MAP with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Ccledevoute
91% match
Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green against a sky-blue sphere background. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package. The code fetches the countries-110m.json file, converts it to GeoJSON with `feature`, and appends each path to an SVG element. Both D3 v5 and TopoJSON are loaded via CDN, and the visualization is built with a React starter setup.

NNkwachi Abel
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world countries on a natural Earth projection, filling landmasses in green against a blue ocean sphere. The code loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON features using topojson’s `feature` function, and renders each country as a SVG path via `d3.geoPath` with `d3.geoNaturalEarth1`. Styling is applied through CSS classes for the sphere and country fills, with the map auto-sized into a 960×500 viewport.

Kkdmonroe
91% match