Skip to main content
SimilarExport ZIP
100%

Making a map with Curran's help

✓ Published1🌍 Public
RRamon96
Last edited Nov 15, 2019
Created on Nov 13, 2019

A map of the world is drawn on an SVG canvas, with countries filled in lime and the sphere of the Earth rendered in light blue. The visualization uses D3.js (v5) and the topojson library to load GeoJSON data from the world-atlas package. The `geoPath` and `geoMercator` projections from D3 generate the map geometry, while the `select`, `json`, and `feature` functions style and arrange the country paths.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

A geographic map of the world is rendered on an SVG canvas, with countries filled in light green and oceans shown in blue using a Natural Earth projection. The visualization loads world country boundary data from the world-atlas TopoJSON file and converts it to GeoJSON features using the topojson `feature` method. D3.js v5 functions `d3.json`, `d3.geoPath`, and `d3.geoNaturalEarth1` handle data loading, path generation, and projection, while the sphere outline is drawn as a separate path element.

RRamuSannanagari
84% match
Loading thumbnail…

Making a Map with D3!

This visualization displays a world map in a natural Earth projection, with countries filled in pale green and the sphere rendered in cornflower blue. The code uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections, along with the topojson `feature` function, to convert GeoJSON country boundaries into SVG paths. Country data comes from the world-atlas 110m dataset, while the map’s ocean and landmasses are drawn as separate SVG paths.

AAnnie Liao
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map of the world using D3.js, rendering countries as green polygons with a blue sphere background. The visualization loads geographic data from the world-atlas TopoJSON file and converts it into GeoJSON features using the topojson library. D3’s geoNaturalEarth1 projection and geoPath generator handle the coordinate mapping and SVG path creation, while the code appends each country as a separate path element to the SVG canvas.

CCurran Kelleher
83% match
Loading thumbnail…

Making a map with D3.js!

This example uses D3.js to render a world map from the world-atlas dataset. The visualization draws all countries as green SVG paths with a black stroke on a steelblue background, using a Mercator projection. The code leverages `d3.geoPath` with `d3.geoMercator` to generate the geographic outlines, and the `topojson` library’s `feature` function to convert TopoJSON data into GeoJSON features. A single path for the entire sphere is added first, followed by individual country paths.

OOliver Wills
82% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries in light green and the ocean in blue. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas 110m GeoJSON data into features. A sphere outline and country boundaries are drawn with stroke styling, and the map is projected onto a 960 by 500 canvas.

RRubens
82% 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
82% 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 and oceans in blue. It uses D3.js version 5 and the `d3.geoPath` API with a Natural Earth projection to generate the map geometry. Geographic data comes from the world-atlas package, loaded via `d3.json`. The code also includes a sphere outline for the globe and uses the topojson library’s `feature` function to convert the raw data into usable features.

CClara Hu
81% 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 teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen
81% match