Untitled

100%

✓ Published0🌍 Public

Last edited Mar 3, 2021

Created on Mar 3, 2021

This example visualizes the propagation of seismic waves across a global map, using a particle system to represent the expanding shockwave from an earthquake epicenter. The view combines a geographic basemap with hundreds of animated particles that move outward and fade over time. The visualization is built with d3.js, specifically using the `d3.forceSimulation` and `d3.geoPath` APIs to handle particle physics and map projection. The code reads earthquake data from the USGS live feed and renders the scene on an HTML5 Canvas, with particle attributes updated in each animation frame.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes earthquake locations using a global map rendered with D3’s `d3.geoPath` and `d3.geoOrthographic` projections. It plots seismic events as circles whose size and color encode magnitude, with a color scale from `d3.scaleSequential`. The visualization updates over time by cycling through timestamped data, using `d3.transition` to animate circle radius changes. It relies on the TopoJSON world atlas for geographic boundaries and fetches earthquake data from a local CSV file.

Ddevansh1407

80% match

Loading thumbnail…

Untitled

This example visualizes a particle system flowing over a map of the United States, where each particle traces a path across the country. It uses d3.forceSimulation with custom forces to drive particle movement, while d3.geoPath renders the geographic boundaries from a TopoJSON source. The particles leave fading trails on a Canvas, creating a dynamic migration-like pattern. The code reads pixel data via Canvas getImageData to constrain particles to landmasses, and employs d3.transition with attrTween for smooth position updates.

Ppgraybeal

77% match

Loading thumbnail…

Gist c91b7cdf3a65a705ef48

This example visualizes earthquake activity using a force-directed particle layout. Each circle is an earthquake, positioned by its longitude and latitude and scaled by magnitude; the particles are animated with a gentle jitter to reveal clustered events. The visualization is rendered with D3 v3 using SVG, mapping the `data.csv` fields—such as depth, magnitude, and location—to visual variables. A shared timeline and smooth transitions help the user explore the relationship between location, time, and earthquake strength across the dataset.

BBenHeubl

76% match

Loading thumbnail…

Untitled

This example visualizes a dynamic, two-dimensional particle system where thousands of glowing points drift and collide within a bounded rectangular field. It shows the emergent patterns of clustering and dispersion as forces of attraction and repulsion act on the particles over time. The code uses `d3.forceSimulation` with custom force functions to manage particle velocities and positions, rendering each frame to an HTML5 Canvas. Particle trails are created by semi-transparent redraws, and the interaction of the forces produces a fluid, organic motion across the display.

Ssnowswirlin

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

Loading thumbnail…

Untitled

This example demonstrates a full-screen, animated visualization built with SVG, showcasing a dynamic network of connected particles. The scene uses D3.js’s `d3.forceSimulation` to compute particle positions and link forces, while SVG circle and line elements render the nodes and edges. The simulation runs continuously, with the nodes gently drifting and repelling each other against a dark background. The code relies on standard SVG attributes and D3’s selection methods, with the `overflow: hidden` CSS rule ensuring the canvas remains edge-to-edge without scrollbars.

MMelissa Prax

70% match

Loading thumbnail…

Untitled

This example renders a real-time, animated visualization of a particle system using React and the D3.js library. It leverages `d3.forceSimulation` to compute physics-based movement for a set of nodes, which are rendered as circles on an SVG canvas. The simulation applies forces such as charge and collision detection to create dynamic, organic clustering and dispersion. Data is generated procedurally within the component, with each particle's position and velocity updated on every animation frame, producing a continuously evolving visual pattern. The code integrates React's state management to trigger re-renders as the simulation state changes.

TTohidul Islam

70% match

Loading thumbnail…

Untitled

This visualization shows a simulated swarm of glowing particles that respond to mouse movement, creating a dynamic, organic flow across the screen. The particles are governed by a physics system using `d3.forceSimulation` with forces for centering, collision, and velocity, while each particle’s position and trail are drawn on an HTML5 `<canvas>` via `requestAnimationFrame`. The code uses `d3.scaleLinear` to map distance and speed to color and opacity, and the mouse interaction adjusts the simulation’s force strengths in real time. The rendering relies entirely on canvas 2D context methods like `arc` and `fillRect`, with a dark background from `styles.css`.

Eemanuelemurgolo

70% match