Marco Costa

@marcocosta1618·2 public vizzes

Globe Rotation

This example uses a D3 orthographic projection to render a rotating globe, showing country boundaries and a semi-transparent graticule over a blue sphere. A user can drag to rotate the globe, with the rotation state updated via a custom `versorDrag` handler that leverages the `versor` library for quaternion-based rotation. Geographic data comes from the world-atlas TopoJSON files (110m and 50m resolution) loaded through `d3.json` and converted to features with `topojson.feature`. The visualization is built as a React component using SVG, with the drag interaction managed through D3’s `drag` and `geoPath` methods.

Aug 25, 2022

Loading thumbnail…

World Map Rotation

This example presents an orthographic world map that users can rotate by dragging with the mouse. The map renders country boundaries from TopoJSON data using D3’s `geoOrthographic` projection and `geoPath`, with a graticule overlay and interactive hover highlighting on countries. Rotation is implemented through React state updates triggered by D3 drag events, using the `versor` library to compute quaternion-based rotations for smooth, intuitive globe manipulation. The visualization demonstrates a React component integrating D3’s drag behavior, projection system, and geographic data loading via hooks.

Aug 23, 2022