Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
MMatan
Last edited Nov 10, 2020
Created on Nov 10, 2020

This example demonstrates a basic world map visualization using D3.js. It renders the Earth’s landmasses as green shapes on a blue sea, with country borders outlined in black, using a natural Earth projection. The code loads GeoJSON data from the `world-atlas` package and projects it with `d3.geoPath` and `d3.geoNaturalEarth1`. It also uses TopoJSON’s `feature` function to extract country boundaries, with all graphics drawn as SVG paths.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a basic world map using a natural Earth projection, with dark gray landmasses on a near-black globe sphere. The map is rendered as SVG paths generated from TopoJSON country boundaries loaded from the world-atlas package. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to convert geographic features into visible shapes. The code fetches the dataset with `json`, processes it via TopoJSON’s `feature` method, and appends each country path to the SVG container.

AAPIvahnenko
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It renders a natural Earth projection of countries as SVG paths, filled with light green and outlined with a subtle black stroke, all set against a blue sphere background. The code uses `d3.json` to load geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON with `topojson.feature`. The map is drawn using `d3.geoPath` and the `geoNaturalEarth1` projection, with the sphere added as a separate path.

TTallulah Kay
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn
94% match
Loading thumbnail…

Let's make a map wit D3.js

This example presents a world map using the Natural Earth projection. It renders continents as light green shapes with subtle black borders against a blue spherical backdrop, showing the capabilities of D3.js for geospatial visualization. The code loads GeoJSON data from the `world-atlas` package and processes it with `topojson`'s `feature` function before projecting it using `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization is drawn as SVG paths, with the sphere and country elements styled via CSS classes.

YYF
94% 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
94% 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
94% 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
94% match