Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
AArriannePandaraoan
Last edited Apr 22, 2020
Created on Apr 22, 2020

This example displays a world map of countries rendered as light green SVG paths on a dark blue background. It uses the world-atlas TopoJSON dataset and D3’s `geoMercator` projection with `geoPath` to generate the shapes. The topojson `feature` method extracts country geometries, which are appended as SVG `<path>` elements. The map is static, with thin black strokes and low stroke opacity defining country borders.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths against a dark blue background. The map is built entirely with D3.js v5 and TopoJSON, loading geographic data from the world-atlas dataset. The code uses `d3.geoOrthographic` and `d3.geoPath` to project and trace country boundaries, while `topojson.feature` extracts the geometries for rendering.

AArriannePandaraoan
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map with D3.js, rendering countries as light-green SVG paths on a dark blue background. It uses the `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG path data, while TopoJSON’s `feature` method extracts country boundaries from a world-110m dataset loaded from unpkg. The visualization focuses on a clean, minimal map with thin black strokes separating countries, making it a straightforward introduction to geo-spatial data visualization.

NNita
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered as light green SVG paths against a dark blue background. Using D3 v5 and TopoJSON, the code loads world-110m geographic data and projects it with a stereographic projection via d3.geoStereographic. Each country is drawn using d3.geoPath, with black strokes and low opacity to create a subtle outline effect. The map fills a 960 by 500 pixel SVG viewport with no interactivity.

NNita
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as light green shapes with faint black outlines on an SVG canvas. The map uses a conic conformal projection defined through D3's `geoConicConformal` and `geoPath` APIs. It loads geographic boundary data from the world-atlas TopoJSON source, processes it with the `topojson` library’s `feature` function, and renders each country as an SVG path. The visualization also generates a background path, with a commented-out sphere class suggesting an optional ocean fill.

NNilla
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them with `d3.geoMercator`. The map is drawn as SVG paths using `d3.geoPath`, with countries filled in green and outlined in black. The code imports specific functions like `select`, `json`, and `feature` from D3 v5 and TopoJSON, and applies a dark blue background via CSS.

FFernando Gonzalez - Valadez
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map as a set of light-green SVG paths against a dark blue background. It uses a stereographic projection and d3.geoPath to draw country boundaries from TopoJSON data, sourced from the world-map package. The map is static, with each country outlined by a semi-transparent black stroke, and the code demonstrates a minimal setup for geographic visualization with D3 v5 and TopoJSON.

NNita
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
93% match