Equirectangular Fisheye

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

81% match

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999

79% match

Equirectangular (Plate Carrée)

This example demonstrates the equirectangular (Plate Carrée) projection, a simple geographic mapping where latitude and longitude are plotted linearly on a flat grid. The visualization displays world landmasses in dark gray and country boundaries in white, overlaid with a graticule grid at half opacity. The code uses d3.geoEquirectangular to define the projection, d3.geoPath for rendering, and topojson to parse world-50m.json data. The map is drawn as SVG paths with styling for land, boundaries, and graticule layers.

Eckert IV

This example demonstrates the Eckert IV map projection, a pseudocylindrical equal-area projection that renders the entire world on a 960 by 500 pixel SVG canvas. The visualization displays the projected globe with graticule lines, landmasses in dark gray, and country boundaries in white. Using D3.js v3, the code employs `d3.geo.eckert4()` alongside the `d3.geo.path`, `d3.geo.graticule`, and the `d3.geo.projection` plugin to construct paths. World map data comes from a GeoJSON file containing 50-meter resolution land and country features, processed through TopoJSON.

Eckert V

This example displays a world map on the Eckert V projection, rendered in SVG for a 960-by-500 viewport. It uses the `d3.geo.eckert5` projection from the geo.projection plugin and `d3.geo.path` to draw graticules, landmasses from a TopoJSON world-50m file, and country boundaries derived via `topojson.mesh`. The map is styled with contrasting strokes and fills against a light background.

Eckert III

This example demonstrates the Eckert III map projection, a pseudocylindrical projection that preserves equal area. The SVG canvas displays a graticule and world map, with landmasses rendered in dark gray and country boundaries in white. Using the D3 v3 library, the code employs `d3.geo.eckert3()` for the projection, `d3.geo.path()` to draw geographic paths, and `d3.geo.graticule()` to generate the grid. The world map data is loaded from a remote GeoJSON file via `d3.json()` and transformed using the TopoJSON library.

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.

Eckert I

This example displays a world map using the Eckert I projection, with landmasses filled in dark gray and country boundaries outlined in white against a graticule grid. The spherical outline is drawn with a thick black stroke and white fill, emphasizing the projection’s oval shape. The visualization uses D3 v3, the `d3.geo.eckert1` projection from the geo.projection plugin, and `d3.geo.path` to render geographic features. World data comes from a TopoJSON file (`world-50m.json`), processed with `topojson.feature` and `topojson.mesh` to separate land and country boundaries.