Skip to main content
SimilarExport ZIP
100%

lets make a Map

✓ Published4🌍 Public
PPeter S
Last edited Sep 7, 2019
Created on Aug 17, 2019
Forked from lets make a face

This example demonstrates how to create a geographic map by loading world country boundaries and rendering them as SVG paths. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the countries, while `topojson.feature` converts the TopoJSON data from the world-atlas dataset into GeoJSON. The visualization also includes a basic data-reporting sidebar that filters and formats mock car listings, showing how D3 modules can combine geographic mapping with DOM updates.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3

This example renders a world map using D3 v5 and TopoJSON, loading country boundaries from the World Atlas TopoJSON dataset. It displays the Earth’s sphere in light blue and each country as a gray filled path with white strokes, projected using a Natural Earth projection. The code employs `d3.geoPath` with a `d3.geoNaturalEarth1` projection, and `topojson.feature` to convert TopoJSON data into GeoJSON features for SVG path generation.

NNikki-gea
91% match
Loading thumbnail…

Let's make a Map!

This example displays a natural Earth projection world map using SVG, with countries filled in light green and oceans rendered in blue. It loads GeoJSON country boundaries from a World Atlas TopoJSON file via `d3.json`, then converts the TopoJSON features using the `topojson.feature` API. The map is drawn with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, including a separate path for the globe’s sphere.

Rrainyrainyguo
91% match
Loading thumbnail…

lets make a Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue spherical backdrop. It also demonstrates asynchronous data loading and report generation from a JSON dataset of car listings. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate country outlines from TopoJSON data fetched via `d3.json` from the world-atlas package, and converts TopoJSON to GeoJSON using the `feature` function from topojson. Car data is retrieved through a custom promise-based `getCars` function.

Rrazidazi88
91% match
Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON, applying the natural Earth projection via `d3.geoNaturalEarth1` and drawing country boundaries with `d3.geoPath`. The SVG shows a blue sphere outline and light green countries with subtle black strokes. It loads country geometries from the world-atlas 110m TopoJSON dataset and converts them to GeoJSON using TopoJSON’s `feature` function. The code appends paths for the sphere and each country, demonstrating a straightforward choropleth-free geographic visualization.

Xxsg13
90% match
Loading thumbnail…

Let's make a map!

This example creates a world map by rendering GeoJSON country boundaries onto an SVG. It first draws a blue sphere background and then overlays light green country paths with subtle black strokes, using the Natural Earth projection. The code loads world topology data from the world-atlas package and converts it to GeoJSON using topojson’s `feature` method, then applies `d3.geoPath` with `geoNaturalEarth1` for projection. Both D3 and TopoJSON libraries are included via CDN.

RRoger Yu-Hsiang Lo
90% match
Loading thumbnail…

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Aarieltonglet
90% 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
90% 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
90% match