Handdrawn Waterman projection

100%

Handdrawn Waterman projection

✓ Published0🌍 Public

Last edited Jun 14, 2020

Created on Jun 13, 2020

This hand-drawn world map uses the Waterman polyhedral projection to display country boundaries and graticules, with annotations marking personal milestones in Stockholm, London, Shanghai, and Copenhagen. The visualization combines D3.js v4 with TopoJSON world-atlas data, rendering landmasses through Rough.js to achieve a sketch-like aesthetic. Geographic paths are processed via `d3.geoPath` and `d3.geoPolyhedralWaterman`, while custom annotations are positioned using the projection and styled with d3-annotation. The map’s rough outlines and cross-hatched fill, clipped to a spherical path, emphasize the hand-drawn effect over the base map.

AI-generated description

World Map with D3.js and TopoJSON data from World Atlas in

https://github.com/d3/d3
https://github.com/topojson/topojson
https://github.com/topojson/world-atlas

forked from <a href='http://bl.ocks.org/piwodlaiwo/'>piwodlaiwo</a>'s block: <a href='http://bl.ocks.org/piwodlaiwo/3734a1357696dcff203a94012646e932'>World Map with D3 and TopoJSON</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Waterman Butterfly

This example displays a world map using the Waterman butterfly projection, a polyhedral map projection that unfolds the globe into a butterfly-like shape. The visualization is rendered as an SVG using the D3.js v3 library and the `d3.geo.polyhedron.waterman` plugin, which defines the custom projection. The map includes a graticule, land masses, and country boundaries, with data loaded from a GeoJSON file via `d3.json`. The projection is rotated, scaled, and translated to center the map, and clipped to the sphere's outline.

Mmbostock

80% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a world map rendered with D3.js using the geoPolyhedralWaterman projection from d3-geo-projection. It shows country boundaries from a TopoJSON world atlas dataset, overlaid with red rectangles positioned at two specific latitude/longitude coordinates, though the rectangles do not use the map projection and remain in screen space. The visualization uses d3.geoPath to generate SVG paths for countries and a sphere outline, with d3.geoGraticule available for reference lines. The code imports feature from topojson to convert TopoJSON data into GeoJSON features for rendering.

PPhilipp Koehler

78% match

Loading thumbnail…

World map with D3.js!

This example displays a world map rendered in an SVG using D3.js v5. It projects country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and draws them through `d3.geoPath`. The map’s ocean is a distinct blue sphere path, while countries appear as light green shapes with subtle black strokes. Geographic data comes from the world-atlas TopoJSON file, converted to GeoJSON using `feature` from the Topojson library.

TTatyana Milanova

77% match

Loading thumbnail…

World Map

This visualization displays a world map using an SVG projection, with landmasses filled in teal, graticules in light gray, and country borders drawn as interior lines. The map is rendered with React and D3 v5, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON file, which is loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. A subtle sphere outline frames the map against a neutral background.

Vvmonney

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

Loading thumbnail…

Fork of Polished World Map

This map shows country boundaries and graticules projected with d3.geoNaturalEarth1 and rendered as SVG paths via d3.geoPath. The visualization uses world-atlas TopoJSON data, with countries filled in teal and internal borders drawn as thin lines. A single red circle marks the coordinates (130, 20). The React component loads the data with d3.json and topojson.feature/mesh, while custom CSS styles the sphere, graticules, land, and interior strokes.

Tthe-1000th-summer

77% match

Loading thumbnail…

Hammer Retroazimuthal

This example displays a world map using a Hammer retroazimuthal projection, centered on parallel 52°N, with vector land and boundary outlines rendered as SVG paths clipped to the projected sphere. The code uses d3.geo.path with a custom projection and d3.geo.graticule to draw the graticule, while topojson.v1 loads and processes the world-50m GeoJSON data for land and country boundaries. A white stroke highlights the map boundary, and the projection’s clip angle ensures no artifacts appear beyond the map’s edge.

Mmbostock

77% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection. The map renders continents and countries as pink shapes with thin black borders on a light blue sphere background, providing a clear geographic overview. The code uses D3 v5 functions including `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG output is generated with D3’s selection and attribute APIs, and the sphere and country paths are styled using CSS classes.

DDINESH SAI BOPPANA

77% match