fresh block

100%

✓ Published0🌍 Public

Last edited Nov 24, 2017

Created on Nov 24, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

91% match

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

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

83% match

Loading thumbnail…

fresh block

This example displays a static world map rendered as gray SVG paths, with each country drawn as a separate geographic feature. The visualization loads GeoJSON data from a local `countries.json` file and uses `d3.geoPath()` to project the coordinates onto a 500×500 pixel canvas. The code applies a uniform gray fill to every country, with no interactivity or styling variations. It relies on D3 v5’s selection and data-join methods (`svg.selectAll("path").data(data.features)`) to create the map elements from the GeoJSON structure.

PPrakhar1998

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

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

79% match

Loading thumbnail…

World Map w/ Rotation

This example presents an interactive world map as a rotating orthographic globe. The visualization loads geographic boundary data from a JSON file and renders it as SVG paths, continuously adjusting the map’s rotation with a timer. The animation rotates the projection along its horizontal axis using `projection.rotate()`, while a tilting offset adjusts the vertical perspective. The map uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoProjection` to create the spherical effect, and the countries are filled with a solid green color.

Ssalimjivani

79% match

Loading thumbnail…

Spinning Globe

This example displays a continuously rotating orthographic globe, with landmasses rendered in a light gray and internal country borders drawn as a subtle mesh over a pale blue ocean. The map is built using the D3 libraries `d3.geoOrthographic`, `d3.geoPath`, and `topojson-client`, which fetch and process a world-atlas GeoJSON file from unpkg. Each animation frame slightly decrements the rotation parameter, driving the spinning effect, while the view is initialized to fit the browser window.

SShad Frigui

79% match