activity 7.1

100%

✓ Published0🌍 Public

Last edited Apr 13, 2025

Created on Apr 13, 2025

This interactive visualization shows the movement of flight paths across a global map using a three-dimensional globe. It displays animated arcs that connect various geographic locations, with each path represented by a flowing line that moves from its origin to its destination. The visualization uses Three.js, specifically `THREE.SphereGeometry` and `THREE.Points` to construct the globe and stars, while flight arcs are drawn with `THREE.Line` and animated using `requestAnimationFrame`. The data for flight routes is loaded from a CSV file, and geographic coordinates are projected onto the globe using a custom equirectangular projection function.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

76% match

Loading thumbnail…

Untitled

This example shows a dynamic globe where glowing arcs trace flight paths between cities across the world. It uses D3’s force simulation to position the nodes on the sphere and Canvas’s `getImageData` to render the points and curved paths. The visualization rotates the globe continuously via `d3.timer` while the arcs animate along their routes. The underlying geographic data is drawn with `d3.geoPath` and a Natural Earth projection, all rendered on a single `<canvas>` element.

SSathishAanand

76% match

Loading thumbnail…

Flight Map

This visualization displays flight routes between continents on a world map, with the thickness of each line representing the volume of traffic for a selected month. A slider allows viewers to cycle through twelve months of data, which is stored in CSV files. The d3.geoMercator projection and d3.geoPath are used to render the map and the great-circle paths linking regions, while a transition animation (d3.transition) updates the view. Hovering over a route reveals its exact numeric value in a tooltip.

Iimsohandsome123

75% match

Loading thumbnail…

Flight Map

This interactive visualization shows the flow of travelers between five global regions across a 12-month period. The main map uses a Mercator projection with curved paths connecting regions, where stroke width represents the volume of travel, and hovering reveals exact numbers. A range slider allows selection of individual months. The visualization also includes a stacked area chart depicting time-series data for these regions. The code uses `d3.geoPath`, `d3.geoMercator`, `d3.scaleOrdinal`, and `d3.stack` within a React framework, rendering via SVG with animation.

Ttim310579

75% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 and flight routes between airports, rendered as animated arcs on a WebGL sphere using Three.js and globe.gl. Users can pan and zoom the Earth, with dark terrain and point markers colored by GDP per capita. The visualization incorporates submarine cable paths and a time-based solar position indicator, updating a clock and sun position every frame. It loads geographic data from GeoJSON and OpenFlights datasets, employing D3 for color scales and data parsing.

PPatrickVienne

74% match

Loading thumbnail…

Fork of Flight Map

This visualization presents a world map with animated flight paths between continents, using a Mercator projection created with `d3.geoMercator()`. The map is rendered as SVG paths via `d3.geoPath()`, with each intercontinental link colored differently and its stroke width proportional to monthly passenger counts. A slider allows users to select a month (1–12), updating the path widths accordingly from CSV data files. Hovering over a path reveals its exact value via a tooltip, and the map itself uses `d3.json()` to load world GeoJSON data. The code relies on D3 v4 APIs including `d3.select`, `d3.transition`, and `d3.event` for interaction, with styling applied through CSS.

RRudi Poepsel Lemaitre

73% match

Loading thumbnail…

An interactive D3 map

This interactive map uses d3.geoPath and a geoAlbers projection to render a world map with animated circles marking airports. The visualization connects airports via arcs based on route data from routes.csv, and uses a Voronoi diagram overlay to partition the map. The animation uses d3 transitions with easing, while data is loaded from the d3.json, d3.csv, and world-atlas package.

Iinroadings

71% match

Loading thumbnail…

Untitled

This visualization maps the global flow of internet traffic between major cities using animated arcs on a world map. It shows real-time data transfers as bright, moving particles along curved paths, highlighting the interconnectedness of global communication networks. The rendering is built with HTML5 Canvas and JavaScript, leveraging the `d3` library for geographic projections and path calculations. The animation is driven by an internal physics engine that simulates particle movement along the arcs, creating a dynamic, continuous stream of data. The underlying dataset is sourced from a public internet exchange point database, displayed in a dark, minimalist style for clarity.

AAhmeTyAtakan

71% match