Basic D3 map (Winkel Tripel)

100%

Basic D3 map (Winkel Tripel)

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 4, 2016

A world map rendered with the Winkel Tripel projection fills the full browser window. The code loads GeoJSON world data from a remote URL and draws it as a single SVG path using D3’s `d3.geo.path` with a `d3.geo.winkel3` projection. The map’s scale and centering are set explicitly, while the SVG resizes to viewport dimensions. D3 v3 and the `d3.geo.projection` plugin provide the projection and rendering, with no interaction or additional styling applied.

AI-generated description

A basic map in D3 using the Winkel Tripel projection.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/6ab03506d2e3ff9d843f69fa2d5c29cf'>Basic D3 map (Mercator)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Winkel Tripel

A world map in the Winkel Tripel projection shows land masses in black with white boundaries, enclosed by a graticule and a spherical outline. The map displays all continents without extreme distortion, using a custom geographic projection. Built with the D3 v3 library, the example loads world-50m.json data and renders SVG paths via d3.geo.path with the d3.geo.winkel3 projection, applying graticule and boundary meshes through topojson.

Mmbostock

86% match

Loading thumbnail…

Basic D3 map (Mercator) d3v4

This visualization displays a basic world map using the Mercator projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoMercator()` and `d3.geoPath()`, scaling the projection to fit a 960 by 500 pixel viewport. The map fills the entire screen, with the SVG element sized to the full window. Built with D3 v4, it demonstrates the minimal setup required to draw geographic features from GeoJSON data using the library’s standard geo-path API.

AAlan McConchie

85% match

Loading thumbnail…

Basic D3 map (Mercator)

A single SVG path renders a world map using the Mercator projection, with landmasses drawn from a remote GeoJSON file. The map fills the viewport, centered at the default origin. The code uses D3 v3’s `d3.geo.mercator()` and `d3.geo.path()` to project and draw the geometry, loading the data via `d3.json` from the `world-110m.geojson` source. No interaction or additional styling is applied beyond the full-screen SVG container.

AAlan McConchie

85% match

Loading thumbnail…

Basic D3 map (Mercator) d3v4

A basic world map rendered with the Mercator projection using D3 v4. The code loads GeoJSON data from an external URL and draws it as a single SVG path via `d3.geoPath`. The projection is configured with `d3.geoMercator`, scaling and translating to fit the 960×500 viewport. The map displays all countries as filled shapes from the world-110m GeoJSON dataset, with no additional styling or interaction.

AAlan McConchie

85% match

Loading thumbnail…

Winkel Tripel Graticule

This example displays a global graticule—a mesh of latitude and longitude lines—projected using the Winkel Tripel projection, with a thicker outline emphasizing the map’s outer boundary. The visualization uses D3 v3’s `d3.geo.winkel3()` projection, `d3.geo.path()` to render the projected geometry, and `d3.geo.graticule()` to generate the grid. The graticule lines and outline are drawn as SVG paths, with the projection scaled and centered to fit a 960×500 canvas.

Mmbostock

81% match

Loading thumbnail…

Rotating Winkel Tripel

A rotating Winkel Tripel projection continuously spins the world map around its longitude axis. The example shows both landmasses and graticule lines drawn on a canvas, with the rotation driven by a timer that updates the projection’s rotation each frame. It uses D3 v3 with the `d3.geo.winkel3` projection, `d3.geo.path`, and Canvas 2D context, while loading world-110m TopoJSON data. The graticule and its outline are stroked separately to distinguish the grid from the map frame.

Mmbostock

80% match

Loading thumbnail…

Basic D3 map (live mods) d3v4

This example shows a world map rendered with a stereographic projection, overlaid with populated places as scaled circles. The map uses D3 v4’s `d3.geoStereographic` projection and `d3.geoPath` to draw country outlines from GeoJSON world data. City points come from a second GeoJSON dataset, with circle radius proportional to `pop_max` and color indicating megacity status (dark green) versus other populated places (salmon). The code loads both datasets via `d3.json` and appends SVG circles with opacity for visual clarity.

AAlan McConchie

80% match

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

79% match