Let's make a map with D.js

100%

Let's make a map with D.js

✓ Published0🌍 Public

Last edited Jan 8, 2020

Created on Jan 8, 2020

Forked from Untitled

This example shows a basic world map rendered as light green SVG paths with black borders, using a Mercator projection. It loads world country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with the topojson `feature` method. The map is drawn using d3.geoPath and d3.geoMercator, with each country appended as an SVG path element. A hover effect defined in CSS changes the fill color to red, though no interaction logic is implemented in the JavaScript.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map as light green SVG paths with black borders on a pink background. It loads geographic data from the World Atlas TopoJSON file via the `json` method, converts TopoJSON to GeoJSON using the `feature` function from Topojson, and projects the coordinates with `geoMercator`. The map is drawn using D3’s `geoPath` to generate path data for each country, which is then appended to the SVG. The code demonstrates basic geographic projection and TopoJSON handling without interactive features.

JJake

92% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo

91% match

Loading thumbnail…

Lets make a map with D3.js

This example uses D3.js to render a world map with an orthographic projection on an SVG. It loads country boundary data from the world-atlas TopoJSON file, converts it to GeoJSON with the `feature` function, and draws the paths using `d3.geoPath` and `geoOrthographic`. The map shows all countries filled in green with black strokes against a sky blue background.

NNita

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as blue SVG paths with white borders, highlighting each country in red on hover. It demonstrates a basic geographic visualization workflow using D3.js, loading country boundaries from the world-atlas TopoJSON dataset and converting them with `d3.geoMercator` projection and `d3.geoPath`. The code uses `topojson.feature` to extract GeoJSON from the TopoJSON file and appends the resulting paths to an SVG canvas, with hover styling handled by CSS.

Rrichad97

91% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to construct a world map using D3.js, rendering individual countries as SVG paths with light green fills over a blue spherical background. The visualization loads geographic data from the world-atlas TopoJSON dataset and applies a geoAzimuthalEquidistant projection, clipped to a rectangular viewport using geoClipRectangle. It relies on d3.geoPath to generate the SVG paths and topojson.feature to convert the TopoJSON topology into GeoJSON features for display.

LLittledevil7

91% 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

91% 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 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.

AArriannePandaraoan

91% match