Skip to main content
SimilarExport ZIP
100%

D3 World Map

✓ Published0🌍 Public
GGT-GillesTeuwen
Last edited Feb 9, 2023
Created on Feb 9, 2023
Forked from Hello HTML

This example displays a black-and-white world map using the Mercator projection, with country boundaries outlined in white. The map is rendered as an SVG using the D3.js v3 library, specifically employing `d3.geo.mercator()`, `d3.geo.path()`, and `d3.json()` to load and parse a `world-110m2.json` TopoJSON file. Country geometries are extracted from the TopoJSON topology via `topojson.object()` and drawn as SVG `path` elements. The visualization appears on a simple HTML page with a custom CSS rule defining the stroke and fill for each path.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

AAsmabee Khan
93% match
Loading thumbnail…

D3 World Map

This visualization shows a world map rendered as SVG paths using a D3 Mercator projection. The map displays country boundaries loaded from a TopoJSON file, selected via `topojson.object` and drawn with `d3.geo.path`. A separate bar chart built with `scaleLinear` and `scaleBand` visualizes population data from a CSV file, showing values for labeled countries. The example demonstrates combining geographic and categorical data in a single D3 visualization.

JJens Pehrson
89% match
Loading thumbnail…

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod
89% match
Loading thumbnail…

D3: World Map

This example visualizes world geography using D3 and TopoJSON, rendering country boundaries as an SVG map. It loads spatial data from the `world-atlas` package via `d3.json` and converts TopoJSON features with the `feature` function. The map is drawn using `d3.geoPath` and a `d3.geoEqualEarth` projection onto a 960×500 SVG canvas. A CSS class named `.highlighted` is defined but not actively applied, leaving the map uncolored and displaying only default black country outlines against a white background.

Ccaedcagt76@gmail.com
89% match
Loading thumbnail…

D3 World Map

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as light green polygons on a light blue sphere outline. The code demonstrates multiple geographic projections—Mercator, Orthographic, Stereographic, and Natural Earth—by sequentially assigning them to a single `d3.geoPath` generator, though only the final Natural Earth projection is visualized. Country features are loaded from the `world-atlas` dataset via `d3.json` and converted with TopoJSON’s `feature` method. The map is drawn as SVG paths with light styling for stroke and opacity.

YYoung Song
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94
88% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
88% match
Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55
88% match