fresh block

100%

✓ Published0🌍 Public

Last edited Jan 6, 2018

Created on Jan 6, 2018

This example displays a world map with graticules and a red dot for each data point, which animates by drawing blue lines between consecutive projected coordinates in a looping sequence. A dropdown menu allows switching between Natural Earth and Aitoff projections, triggering a smooth transition via `attrTween`. The visualization uses D3 v4 with `d3.geoPath`, `d3.geoGraticule`, and TopoJSON, rendering geographic data as SVG with animated transitions.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour

83% match

Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian

83% match

Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour

82% match

Loading thumbnail…

fresh block

A rotating showcase of many map projections, this visualization cycles through a menu of options at a fixed interval, displaying the Netherlands as a shaded landmass within a graticule grid on a spherical outline. It uses D3 v3 with `d3.geo.path` to render SVG paths and fades between projections using TopoJSON data from `NLD_adm0.json`. Manually selecting a projection from the dropdown stops the automatic rotation.

MMicrobie

81% match

Loading thumbnail…

fresh block

An interactive azimuthal equidistant map of the world shows a red geodesic line and an orange point near Asia. Dragging rotates the projection, while zooming scales the SVG group containing all map elements. The visualization loads GeoJSON country boundaries from visionscarto.net and renders them as paths using `d3.geoPath` with a `d3.geoAzimuthalEquidistant` projection. Interaction is handled by `d3.drag` and `d3.zoom`, with rotation applied directly to the projection on each drag event.

SSamuelRiversMoore

80% match

Loading thumbnail…

fresh block

A world map of countries is rendered as SVG paths using D3's `d3.geo.equirectangular` projection and `d3.geo.path` tool, colored light gray except for those with authority data, which are filled with a lighter orange. Clicking a country zooms in via a D3 transition on the `g` group, and a text zone updates with the country's name, linking to its grid authority URL if available. The interaction relies on `d3.behavior.zoom` to handle pan and zoom, with the map data sourced from an external `grid_countries.txt` file containing GeoJSON.

RRCura

80% match

Loading thumbnail…

fresh block

A map of world regions renders as a choropleth using a Mercator projection, with each country or territory filled by a distinct categorical color. The visualization loads a TopoJSON file and converts it to GeoJSON with the `topojson.feature` API, then fits the projection to the data using `projection.fitSize`. D3 v5’s `d3.geoPath` generates the SVG paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns unique colors to each feature.

GGerardoFurtado

80% match

Loading thumbnail…

fresh block

An orthographic globe rotates to highlight each country in sequence, with the current country’s name displayed in a title above the canvas. The visualization uses d3.geo.orthographic projection, d3.geo.path for rendering land, borders, and the globe outline on a Canvas 2D context, with transitions tweening the projection rotation via d3.interpolate. Country centroids are computed with d3.geo.centroid, and the order is alphabetical based on names from the world-country-names.tsv dataset, paired with world-110m.json TopoJSON data.

Aabdul-alim

80% match