100%

CSCE-5320: D3 World map

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

Forked from D3 map

This visualization displays a world map using the Natural Earth projection, with individual countries rendered as SVG paths that highlight green on hover. The map loads geographic data from a TopoJSON file containing 110m-resolution country boundaries, which is converted to GeoJSON features using the topojson library’s `feature` function. The code uses D3 v5 APIs including `d3.geoPath` for path generation, `d3.geoNaturalEarth1` for the projection, and `d3.json` for asynchronous data loading.

AI-generated description

Creating a map with data in d3

This example will show how to load data into d3 to create a worldmap

I've based this off of Curran's map example

MIT Licensed

Similar vizzes

Loading thumbnail…

D3-9: World Map

This example presents a world map using an equal-area Natural Earth projection. The visualization renders a blue sphere and light green country polygons as SVG paths. It loads TopoJSON data from the world-atlas package, converting it to GeoJSON with the topojson `feature` function. D3’s `geoPath` and `geoNaturalEarth1` projection generate the map geometry, with CSS styling applied to distinguish the sphere and country boundaries.

Bbkopruluoglu3

88% match

Loading thumbnail…

World Map

A world map rendered with D3.js and a Natural Earth projection displays country boundaries in light green over a blue sphere. The visualization uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths from TopoJSON data. Country shapes are drawn by fetching a remote world.json file via `d3.json`, then processing it with TopoJSON's `feature` method. The example demonstrates fundamental DOM manipulation by appending paths to SVG elements.

KKiran3295

88% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection. The map renders continents and countries as pink shapes with thin black borders on a light blue sphere background, providing a clear geographic overview. The code uses D3 v5 functions including `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG output is generated with D3’s selection and attribute APIs, and the sphere and country paths are styled using CSS classes.

DDINESH SAI BOPPANA

88% match

Loading thumbnail…

D3 Map

This D3 map visualizes global countries using a natural Earth projection. It renders a blue sphere backdrop with light green country polygons outlined in black. The visualization uses the `d3.geoNaturalEarth1` projection with `d3.geoPath` to generate SVG paths, and the `topojson.feature` API to extract country boundaries from a world-atlas TopoJSON dataset. The map displays a graticule-free, simplified world view with countries filled and stroked according to CSS classes.

Rrdeichert

87% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using the Natural Earth projection, with countries rendered as light green SVG paths and the ocean as a blue sphere. It loads geographic data from the World Atlas TopoJSON file, converting it to GeoJSON with the topojson `feature` function. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `selectAll` to bind country features to SVG elements.

NNithish Kumar

87% match

Loading thumbnail…

Map D3

This map shows the countries of the world on a natural Earth projection, with oceans in blue and landmasses in light green. The visualization uses `d3.geoNaturalEarth1` as the projection and `d3.geoPath` to generate the SVG paths for each country. It loads world boundary data from the world-atlas package in TopoJSON format, then converts it to GeoJSON using the `topojson` library’s `feature` function before rendering. The entire graphic is drawn as SVG elements.

Ppplomith

87% match

Loading thumbnail…

World Map

This world map visualization renders country boundaries as green SVG paths on a blue background using the Natural Earth projection. The code fetches TopoJSON data from the world-atlas package and converts it to GeoJSON using `feature` from TopoJSON, then applies `geoNaturalEarth1` and `geoPath` from D3 v5 to generate the geographic shapes. The static map displays all countries without interactive features, relying on D3’s JSON loading and SVG selection methods to append each country path.

Rreddyakshitha

87% match

Loading thumbnail…

Lets make a world map with D3.js

This example shows a natural Earth projection world map, with countries filled in light green against a dark blue sphere, rendered as SVG paths. The code uses D3 v5’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the country outlines, while the TopoJSON library’s `feature` method extracts country geometries from the world-atlas dataset hosted at unpkg. The map is displayed on a 960x500 SVG canvas, with strokes added to differentiate country borders.

NNeepaB

87% match