D3 World Map

100%

✓ Published0🌍 Public

Last edited Jun 11, 2017

Created on Jun 10, 2017

A world map rendered in black with white borders, built with D3.js and TopoJSON. The visualization displays country boundaries as SVG paths using a Mercator projection, loading geographic data from a world-110m2.json TopoJSON file. Interactive zoom and pan are implemented via D3's zoom behavior, allowing users to explore the map by scaling and translating the rendered countries. The minimal black-and-white styling keeps the focus on geography while the zoom functionality adds basic interactivity.

AI-generated description

Built with blockbuilder.org

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

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

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

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

86% match

Loading thumbnail…

Let's interact with world map on D3.js!

This interactive world map displays country boundaries hoverable in red, with a dark ocean backdrop and natural Earth projection. Built with D3 v5 and TopoJSON, it loads world-atlas 110m GeoJSON and TSV country-name data, rendering SVG paths via d3.geoPath. Zoom and pan transforms are applied through d3.zoom, while d3.select and Promise.all handle asynchronous data loading.

AAnthony-coding

86% match

Loading thumbnail…

World Map with D3 2 Final

This interactive visualization presents a world map using an orthographic projection, displaying country boundaries with hover effects that highlight each nation in red. The map also supports zoom and pan through D3’s zoom behavior. Built with D3 v5 and TopoJSON, it renders as SVG and loads geographic data from the world-atlas package, combining TSV country names with GeoJSON features. The projection and path generation rely on d3.geoOrthographic and d3.geoPath.

CChawin Sungwalngern

86% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel

86% match

Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg

86% match