Skip to main content
SimilarExport ZIP
100%

Fork of Ver6 Earthquakes_drb

✓ Published0🌍 Public
DDonald Bagwell
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Ver6 Earthquakes

This interactive visualization displays earthquake data from the USGS feed on an equirectangular world map, with tectonic plate boundaries overlaid. Users filter events by depth and magnitude through dropdown menus, while circle size encodes magnitude and color encodes depth category (shallow, intermediate, deep). The D3.js visualization supports dragging to rotate the globe, zooming, and clicking circles to open the USGS event page in a new tab. Hovering reveals a tooltip with magnitude, location, time, and depth. Data is fetched from the USGS GeoJSON API and the world atlas via `d3.geoEquirectangular` and `geoPath`.

AI-generated description

Previous version

  • use data from an API
  • circle size related to magnitude value
  • interaction: click circle and direct to a url
  • added color to the circles, according to depth (shallow, intermediate, deep)
  • added interaction: dragging to make the earth turn left and right.

Updated version

  • added dropdown menus. User can select to view earthquakes by choosing depth and magnitude.
  • fixed coding error on the colorscale
  • added tooltip
MIT Licensed

Similar vizzes

Loading thumbnail…

Ver6 Earthquakes

This visualization shows earthquakes from the USGS live feed on an interactive 3D globe, with circle size representing magnitude and color indicating depth category (shallow, intermediate, deep). Users can filter earthquakes using dropdown menus for depth and magnitude ranges. Clicking a circle opens the earthquake’s details page; hovering reveals a tooltip with location, time, and depth. The map uses d3.geoOrthographic with drag-to-rotate, and fetches world map data from topojson and tectonic plate boundaries as GeoJSON.

Llingjizhu@gmail.com
86% match
Loading thumbnail…

Ver6 Earthquakes

This interactive map visualizes the world's recent earthquakes as colored circles on a geographic projection. Users can filter the display by earthquake depth and magnitude through dropdown menus, revealing patterns in seismic activity. Circle size corresponds to magnitude, while color indicates depth category (shallow, intermediate, or deep). The visualization uses d3.geoEquirectangular to project the map, fetches live earthquake data from the USGS API, and includes tectonic plate boundaries for context. Earthquake circles link to event detail pages and display a tooltip with magnitude, location, time, and depth on hover. Users can drag the globe to pan the world view.

Llingjizhu@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization maps earthquakes from the USGS API as colored circles sized by magnitude. A brush tool on the map filters which earthquakes appear in a linked scatter plot, enabling coordinated views of depth, time, and magnitude. The D3 code uses `geoEquirectangular` projections, `d3.brush`, and `d3.scaleOrdinal` to categorize depth into shallow, intermediate, and deep classes. Clicking a circle opens the earthquake’s URL, while tooltips provide detailed information for both map and scatter plot points.

AAamir Hameed mir
83% match
Loading thumbnail…

Fork of Earthquakes on Map

This map depicts global earthquake epicenters, with circle size scaled by magnitude and color coding by depth category—shallow (red), intermediate (blue), and deep (green). Tectonic plate boundaries overlay the landmasses, visually confirming that seismic activity concentrates along plate edges. The visualization uses d3-geo projections, topojson for world map data, and USGS earthquake feed JSON. Interactive features include drag-to-rotate, zoom, dropdown filters for depth and magnitude, tooltips, and clickable circles that open event details.

CChih-Hsin Chen
82% match
Loading thumbnail…

Fork of Final - Earthquakes Linked Views with Brushing on Map

This interactive visualization combines a world map and scatter plot to explore earthquake data from the USGS API. Users brush on the map to select earthquakes, which highlights corresponding points in the scatter plot. Map circles display magnitude through size and depth through a color legend, while clicking a circle opens its USGS page. The scatter plot adds tooltips with details. The visualization uses d3-geo projections and geoPath for mapping, d3-brush for selection, and d3-scaleOrdinal for color encoding, with topojson-client for world atlas data.

AAamir Hameed mir
81% match
Loading thumbnail…

Fork of Fork of Interactive Visualization (Brush) - Earthquake Data

This interactive dashboard combines a bar chart, a world map, and a scatter plot to explore earthquake data from 2000 to 2021. The bar chart shows the mean yearly earthquake magnitude, while the world map, built with `d3.geoPath` and a Mercator projection, plots earthquake epicenters with circle radii scaled by Richter magnitude. A linked scatter plot uses `d3.select` to display year against magnitude, with point size representing deaths. The map also includes tooltips on hover, and the data for the bar chart is loaded from a CSV file.

Sspace-captain96
81% match
Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization of earthquake data combines a bar plot, world map, and scatter plot to explore regional deaths, epicenter locations with Richter magnitudes, and the relationship between year, magnitude, and casualties. Users can brush on the scatter plot to filter the other views by year. The map uses d3.geoMercator with d3.geoPath to render world geography, while tooltips display country names on hover. All charts are built with d3.v7, rendering as SVG with animation, and the data is loaded from an external CSV source.

Sspace-captain96
80% match
Loading thumbnail…

Fork of Interactive Visualization (Brush) - Earthquake Data

This visualization presents earthquake data through three linked views: a bar plot of regional death tolls, a world map plotting earthquake locations with circle size encoding Richter magnitude, and a scatter plot relating year, magnitude, and deaths. A brush selection on the scatter plot filters the other views, while map tooltips display location names and a legend explains magnitude scaling. The code uses d3.v7 with `d3.geoMercator` projection, `d3.geoPath` for map rendering, and `d3.scaleBand`/`d3.scaleLinear` for chart axes. Data comes from a GitHub-hosted world GeoJSON and earthquake CSV.

AAbhishek Singh
80% match