Untitled

100%

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

Forked from Fork of Fork of Fork of Fork of HTML Starter

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

draft earthquake data

This visualization uses earthquake data from a USGS dataset to map seismic events by location and magnitude on a world map. Each earthquake is represented as a circle, with its size scaled by magnitude and its position determined by latitude/longitude coordinates. The depth of the quakes is encoded through color, creating a gradient from shallow to deep events. The map is rendered with SVG paths for continents, and a custom tooltip provides details on click or hover. Circles are drawn with D3's data-join and scaled using a linear magnitude scale, while the map projection and graticule are set up with D3's geo utilities. The visualization highlights the global distribution and intensity of recent seismic activity, with Nepal, Japan, and the South Pacific clearly standing out.

BBenHeubl

80% match

Loading thumbnail…

Untitled

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.

KKarthikSundararaj

80% match

Loading thumbnail…

class 3

This example displays a map of the United States overlaid with earthquake locations from the USGS’s daily GeoJSON feed. The visualization shows each earthquake as a small path marker on top of the state boundaries. The map uses the `d3.geoAlbersUsa` projection and `d3.geoPath` to render the geographic shapes, with state outlines drawn from TopoJSON data. Earthquake points are appended as `path` elements with a crimson fill, while the states are styled in a light yellow, highlighting the spatial distribution of recent seismic activity.

AAnaMal08

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

77% match

Loading thumbnail…

Untitled

This example visualizes earthquake data across U.S. states from 2010 to 2015, using a heatmap-like grid where each tile’s color intensity represents the recorded count, with categories grouping states by magnitude ranges. The visualization uses D3.js v3 to render SVG rectangles, with a time scale for the x-axis, a linear scale for the y-axis, and a color scale mapping counts to shades of steelblue. It reads from a CSV file and includes a legend and axes to clarify the count values and date range.

Sszhang182

77% match

Loading thumbnail…

Class #13 demo

This example displays earthquake data from the USGS live feed on a map of the United States, using d3.geoPath with a d3.geoAlbersUsa projection to render state boundaries and quake locations as SVG paths. It includes a draggable circle representing Washington DC, with tooltip and mouse-move coordinate readout, plus a magnitude-based legend with counts. Colors are assigned via a d3.scaleOrdinal and d3.schemeCategory10, while the map data comes from TopoJSON.

MMTClass

77% match

Loading thumbnail…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

77% match

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96

76% match