White world map

100%

White world map

✓ Published0🌍 Public

Last edited Feb 27, 2013

Created on Feb 27, 2013

A white world map displays landmasses in white against an empty background using a spherical orthographic projection. The visualization renders the globe by loading TopoJSON country data and applying it through the `d3.geo.path()` API, which projects geographic coordinates onto the screen. The code iterates through a variety of projection types, including mercator and stereographic, but selects the orthographic one with a scale of 143. This example focuses on the cartographic output rather than interactive features or data overlays.

AI-generated description

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

80% match

Loading thumbnail…

World Map !

This example shows a world map of countries rendered as filled white shapes with thin black borders on a blue sphere, providing a simple geographic overview. It uses d3.geoPath with the geoNaturalEarth1 projection to generate SVG paths for each country. The geographic data comes from the world-atlas package’s countries-110m.json, and the code employs the topojson feature function to convert the TopoJSON geometries into GeoJSON features. The sphere background is created separately, while all paths are drawn using SVG within the d3.v5 framework.

SShareSha

79% match

Loading thumbnail…

World Map

This example displays an orthographic world map, highlighting landmasses in teal against a light gray sphere with graticules. The visualization uses a React front-end with D3's `geoOrthographic` and `geoPath` functions to project geographical data from a remote TopoJSON source (`world-atlas`). The `topojson` library's `feature` and `mesh` functions process the country boundaries and interior borders, rendered as SVG paths within a single view.

JJosh Zalcman

78% match

Loading thumbnail…

Make a map

This visualization displays a world map using an orthographic projection, depicting the globe with blue oceans, green landmasses, and a graticule grid. Built with d3.geoOrthographic and d3.geoPath, it renders country boundaries from the Visionscarto World Atlas TopoJSON data, styled with green fills and white strokes. The map loads data asynchronously via fetch and topojson-client, then draws graticule lines, an outline, and country paths onto an SVG canvas.

Ppbruss@bu.edu

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

78% match

Loading thumbnail…

world map with the world Topojson data

This example displays a world map rendered as white countries with black borders on a green background. It uses D3 v5 and TopoJSON to load world-atlas data from a CDN, then projects the geographic features with a Natural Earth projection via `geoNaturalEarth1()` and draws them using `geoPath()`. The `feature()` function from TopoJSON converts the TopoJSON topology into GeoJSON for binding to SVG paths.

Nnsatyaprakash22

78% match

Loading thumbnail…

World map

A world map rendered with dark green landmasses and white outlines on a light blue background. The visualization uses a GeoJSON-derived feature collection from the world-atlas TopoJSON source, projected with `d3.geoMercator` and drawn via `d3.geoPath`. The code loads the TopoJSON file, converts it to GeoJSON features using `topojson.feature`, and appends SVG paths for each country. Styling is applied through CSS with the `fill` and `stroke` properties.

GGiovanni Kaaijk

77% match

Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Sshabbab01

77% match