Skip to main content
SimilarExport ZIP
100%

15 - let's make a map - dataviz 2018

✓ Published1🌍 Public
Zzach b.
Last edited Dec 21, 2021
Created on Dec 21, 2021

A map of the world is drawn using an SVG projection, with countries filled in green and outlined in black against a light teal ocean sphere. The visualization fetches country boundaries from the world-atlas TopoJSON dataset via a URL, then converts them to GeoJSON using the `feature` method. The map renders with the `geoNaturalEarth1` projection and `geoPath` from D3 v7, appending separate path elements for the sphere outline and each country.

AI-generated description

datraviz 2018 #15 - i'm a map i'm a map i'm a map

world atlas topojson
unpk: topojson.js

MIT Licensed

Similar vizzes

Loading thumbnail…

16 - let's make a map better - dataviz 2018

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and a hover effect that changes their fill color. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then projects it using D3’s `geoNaturalEarth1` and `geoPath`. It incorporates `d3.zoom` for pan and zoom interactions, and uses the TopoJSON `feature` function to convert the topology into GeoJSON features, with country names added via tooltips from the TSV mapping.

Zzach b.
91% match
Loading thumbnail…

Lets make a map with D3.js!

A world map rendered as an SVG using D3.js v5 and TopoJSON, displaying countries in light green against a steel-blue sphere. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and draws geographic paths with `d3.geoPath`. Country boundaries come from the world-atlas dataset at 110m resolution, loaded as JSON and converted with TopoJSON’s `feature` method. The code appends path elements for each country and the sphere, styled with CSS classes for fill and stroke.

DDaniel García
87% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization shows a world map rendered as light green countries against a blue sphere, using a natural Earth projection. The map is built with D3.js v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `feature` from TopoJSON to extract GeoJSON country features. Each country is drawn as an SVG path with a black stroke, while the overall sphere fill is blue.

Iianleekq
87% match
Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

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

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel
87% 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
86% match