Week 9 Make a Map

100%

Week 9 Make a Map

✓ Published0🌍 Public

Last edited Oct 18, 2024

Created on Oct 18, 2024

This interactive map displays a rotating orthographic view of Earth, tilted at 23.5 degrees to simulate the planet’s axial tilt. The globe continuously spins, and a day/night effect is implied through the graticule and shaded country polygons. The visualization uses the `d3.geoOrthographic` projection for the sphere, `d3.geoPath` and `d3.geoGraticule` for rendering outlines, and `d3.timer` for the rotation animation. Geographic data comes from the `visionscarto-world-atlas` TopoJSON file, processed with `topojson-client`. D3.js and topojson-client are the core libraries.

AI-generated description

Modified basic world map

Additions: <br>

Tilted the globe 23.5 degrees
Rotation animation
Day/Night effect

Author: Jacob Chlebowski - jachlebowski@wpi.edu

Similar vizzes

Loading thumbnail…

Week 9 Make a Map

This example presents an orthographic projection of the world map, tilted to match Earth's 23.5-degree axial tilt, with a continuous rotation animation and a day/night visual effect via the light and dark shading. The map is rendered using the d3-geo projection and geoPath, with country boundaries drawn from the visionscarto world-atlas topoJSON data. Static elements like graticule lines and the outline are drawn once, while the rotating countries update at a fixed speed using d3's timer. The code leverages the d3-geo library's geoOrthographic projection and geoGraticule for the spatial framework, and topojson-client to parse the world atlas data.

JJacob Chlebowski

94% match

Loading thumbnail…

Week 9 Make a Map

This example shows an animated orthographic world map that rotates continuously while simulating day and night shading. The globe is tilted at Earth's 23.5-degree axial angle, with a dark-to-light sequential color scale marking the sunlit and shadowed hemispheres. Using d3.geoOrthographic and d3.geoPath, it renders country boundaries from the visionscarto world-atlas TopoJSON source, with d3.geoGraticule adding latitude and longitude lines. A d3.timer drives the rotation and shading updates, while a d3.scaleSequential with interpolateHcl creates the dusk-like color gradient.

JJacob Chlebowski

92% match

Loading thumbnail…

Week 9 Simple World Map

This example displays a basic world map using an equal-area natural Earth projection. It fetches country boundary data from the visionscarto world-atlas TopoJSON and converts it to GeoJSON features with `topojson.feature`. The map renders countries as white-outlined paths via `d3.geoPath`, adds a light gray graticule, and draws a black outline around the projection using `d3.geoGraticule`.

JJacob Chlebowski

81% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive visualization presents a rotating orthographic globe that continually spins on a tilted axis. The world’s landmasses, drawn in light green with dark borders, are accompanied by a graticule grid of meridians and parallels. The globe supports zooming via the d3.zoom behavior, while d3.timer drives the rotation by updating the d3.geoOrthographic projection’s rotation parameters. Country data comes from the world-atlas TopoJSON files, with names appended as SVG title tooltips; hovering highlights individual countries in red.

Zzahra929

81% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive globe visualizes world countries using an orthographic projection that continuously rotates over time. The example renders landmasses in light green with hover highlighting, displays graticule meridians, and includes a blue ocean sphere. It loads geographic data from the world-atlas package, which provides both GeoJSON and TSV country name lookups. Using d3.geoOrthographic, d3.geoPath, and d3.geoGraticule functions, the globe animates via d3.timer, rotating the projection's horizontal axis while maintaining a fixed vertical tilt, with zoom support integrated through d3.zoom.

GGabrz

80% match

Loading thumbnail…

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Ssaijahnaviappineni

80% match

Loading thumbnail…

World Map

An interactive orthographic world map displays landmasses and country borders, with the globe rotating in response to mouse movement. Built with React and D3 v5, it uses `d3.geoOrthographic` and `d3.geoPath` to project and render GeoJSON features derived from the world-atlas TopoJSON dataset. The graticule and interior boundaries are drawn via `d3.geoGraticule` and TopoJSON mesh, while mouse coordinates trigger projection rotation through React state. The SVG output is styled with distinct colors for land, borders, and the surrounding sphere.

MMar-99

80% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example demonstrates an interactive orthographic globe that rotates continuously, with countries rendered in light green and highlighted red on hover. The visualization shows land masses, a graticule grid, and an ocean sphere against a black background, with zooming enabled. It uses D3 v5 and TopoJSON, applying d3.geoOrthographic and d3.geoPath to project world data from the world-atlas 50m dataset. A d3.timer drives the rotation by updating the projection’s rotation, while zoom behavior transforms the globe group. Country names are displayed via SVG title elements.

Zzahra929

79% match