Lacene Dihia

@Lacenedihia·7 public vizzes

Fork of Submarine Cables Globe

An interactive orthographic globe visualizes the global submarine cable network, with colored cable paths linking countries and continents. Users can drag to rotate the sphere and zoom to adjust scale. The visualization loads geographic data from the visionscarto-world-atlas package and cable coordinates from a TeleGeography GitHub repository, rendering them using `d3.geoPath` and `d3.geoOrthographic`. Drag and zoom interactions are implemented with `d3.drag` and `d3.zoom`, while `d3.graticule` adds reference lines.

May 10, 2024

Loading thumbnail…

Fork of Submarine Cables Globe

This example displays a globe with submarine cable routes rendered as colored paths over country boundaries and a graticule. Users can drag to rotate the globe via a D3 drag handler and zoom using a D3 zoom transform, which adjusts the orthographic projection’s scale. The visualization fetches world atlas TopoJSON and cable GeoJSON data from external URLs, then projects them with `d3.geoOrthographic` and `d3.geoPath`. The code uses state management to load data, initialize rotation, and fit the globe to the container size.

May 10, 2024

Loading thumbnail…

Fork of Globe with Panning & Zooming

This animated globe visualization uses the orthographic projection from d3.geoOrthographic and d3.geoPath to render world countries as vector paths, with a graticule overlay and outlined sphere for spatial context. Panning and zooming are driven by continuous rotation of the projection via requestAnimationFrame, which updates the state’s rotation array in a d3 visualization framework. The geographic data comes from a TopoJSON world atlas fetched with the topojson-client library, and the animation renders countries with white strokes against a black outline.

May 10, 2024

Loading thumbnail…

Fork of Simple World Map

This interactive world map uses a D3 orthographic projection to display global submarine cable networks, rendered as colored paths over country boundaries and graticule lines. The visualization reacts to drag gestures by adjusting the map’s rotation via `d3.drag`, while zoom behavior scales the projection using `d3.zoom`. Geographic data comes from the world-atlas TopoJSON and submarine cable features, processed with `topojson.feature` and drawn through `d3.geoPath`. The React implementation manages state updates for rotation, scale, and translation within the `main` function.

May 10, 2024

Loading thumbnail…

Fork of Submarine Cables Globe

This spinning globe visualizes the global submarine cable network, with individual cables drawn as curved arcs over Earth’s surface. The visualization uses Three.js for 3D rendering, including texture mapping and interactive rotation. Cable coordinates come from the TeleGeography submarine cable dataset, loaded via a custom map parser. The globe automatically rotates, and users can drag to explore the network. The implementation relies on Three.js’s `SphereGeometry` and `ORBITAL` controls, with the cable paths rendered as `LineCurveGeometry` instances.

May 10, 2024

Loading thumbnail…

Fork of Submarine Cables Globe

This interactive globe visualization displays worldwide submarine cable routes on a rotatable and zoomable orthographic projection. The code uses d3-geo’s `geoOrthographic` and `geoPath` to render world landmasses from TopoJSON data, while cable locations come from a TeleGeography fork. Drag and zoom behaviors adjust the globe’s rotation and scale in real time, blending geographic mapping with user-driven exploration.

May 10, 2024

Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the Iris Dataset with a scatter plot of sepal length against petal length, coloring each point by species. An interactive color legend lists the three species; hovering over a legend entry highlights the corresponding marks by adjusting their opacity, while dimming the rest. The chart uses D3 v7 APIs including `scaleOrdinal`, `schemeCategory10`, `selection.join`, and event handlers for mouseover and mouseout. Data is loaded asynchronously from a CSV and parsed with `csvParse`.

Feb 7, 2024