D3 World Map

100%

✓ Published0🌍 Public

Last edited Jan 8, 2020

Created on Dec 30, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

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.

GGT-GillesTeuwen

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

87% match

Loading thumbnail…

World Map with D3.js!

This example displays a world map rendered as an SVG using D3 version 5 and TopoJSON, with the geographic projection and path generation handled by d3.geoPath. The page loads world topology data and draws country boundaries onto a 960-by-500-pixel canvas. It serves as a basic demonstration of integrating D3’s mapping utilities with external TopoJSON data to produce an interactive-ready visualization.

DDINESH SAI BOPPANA

87% match

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

87% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao

87% match

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths using D3.js. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features via the `topojson.feature` API. The map uses a `d3.geoMercator` projection and `d3.geoPath` to generate the path data for each country. The code demonstrates basic data binding with `selectAll`, `data`, and `enter` to append country shapes to the SVG canvas.

Llrakla

87% match

Loading thumbnail…

D3 World Map.js!

This example renders an interactive world map using D3.js and TopoJSON. It displays all countries as green SVG paths on a blue sphere, with countries highlighted in pink on hover. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from the world-atlas dataset loaded via `json`. The code demonstrates basic D3 data joins with `selectAll`, `data`, and `enter`, and applies styling through CSS classes.

RRaja Srinivas Nelluri

86% match

Loading thumbnail…

map of d3

This map of d3 displays the world’s countries as green, stroked polygons, using a Mercator projection. The data comes from the world-atlas GeoJSON file, which is loaded via d3.json and converted into geographic features with topojson’s feature function. The code uses d3.geoPath and d3.geoMercator to generate the SVG paths, while d3.select appends each country’s shape to the canvas. Population figures from the included data.csv are not visualized in this example.

HHillKinsh

86% match