EarthQuakes Bubblegraph

100%

EarthQuakes Bubblegraph

✓ Published0🌍 Public

Last edited Sep 27, 2020

Created on Sep 27, 2020

Forked from Barplot

This visualization displays recent significant earthquakes as a bubble graph, plotting each seismic event as a circle positioned by its magnitude. The interactive map, rendered as an SVG canvas, uses mouseover events to highlight individual quakes and display their location and magnitude in a text element. Built with React and D3.v5, the code fetches live data from the USGS Earthquake API, styling each bubble with radius scaled to magnitude and colored by alert level, set against a stylized blue background.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Earthquakes since 1965

This world map displays significant earthquakes since 1965, using circles sized by magnitude, with tooltips showing country and magnitude. The visualization renders on an SVG canvas using React and D3 v5, employing `geoNaturalEarth1` projection with `geoPath`, `geoGraticule`, and world atlas TopoJSON for land boundaries. Earthquake data comes from a cleaned CSV of the Kaggle USGS dataset. Semi-transparent red circles encode magnitude through a square-root scale, overlaid on light blue oceans and green landmasses.

VVarun Eranki

83% match

Loading thumbnail…

Visualization of Earthquakes since 1965 by position and magnitude

This visualization displays global earthquakes since 1965, with each event marked by a small triangle whose height encodes magnitude and color encodes country. The map uses a natural Earth projection rendered with d3.geoPath, while D3 scales control triangle geometry and color assignment. React manages the component structure, and the dataset comes from the Significant Earthquakes from 1965 Kaggle dataset. Hovering a triangle reveals a tooltip with coordinates, magnitude, and date.

VVarun Eranki

81% match

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…

LineChart Test

This visualization presents earthquake data as a bubble chart plotting longitude and latitude, with bubble size encoding earthquake magnitude and color representing the continent. It includes interactive filtering by continent through the legend, which also shows size ranges. Built with D3 v7, the code uses `d3.select`, `d3.scaleOrdinal`, and `d3.scaleLinear` to render circles in an SVG, with a custom CSV parser for the earthquake dataset. Hovering over bubbles reveals tooltips showing magnitude and continent details.

DDuc Pham

79% match

Loading thumbnail…

Earthquake Map

This map visualizes global earthquakes using D3.js, plotting each event as a colored circle on a dark equirectangular projection. Circle size and color encode earthquake magnitude, with the data sourced from a CSV file of USGS earthquake records. The map employs an SVG rendering and includes a polar fisheye distortion effect, initially centered on Japan, that magnifies the map around the cursor's position. The fisheye implementation uses D3’s projection and custom fisheye.js, with event handling throttled for performance.

PPhilippe Rivière

78% match

Loading thumbnail…

Ver3 Earthquakes (past 30 days)

This visualization displays global earthquake activity from the past 30 days on an interactive world map. Circles are positioned using a D3 geoEquirectangular projection, with circle size encoding earthquake magnitude. Color encodes depth, with red for shallow (<70km), green for intermediate (70-300km), and blue for deep (≥300km) earthquakes. The map also shows country boundaries, graticules, and tectonic plate boundaries. Users can click any earthquake circle to open its USGS details page in a new tab, or pan and zoom using the d3.zoom() interaction. Additional brush-based zooming is implemented to allow for more intuitive exploration of the data.

Llingjizhu@gmail.com

78% match

Loading thumbnail…

Significant Earthquake in World: 1970-2019

This visualization maps significant earthquakes from 1970 to 2019 on a world map, with bubble size encoding focal depth and color distinguishing tsunami-generating events. Hovering a point filters the display to that event type and reveals its coordinates. The React app uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses from World Atlas TopoJSON, while d3.scaleSqrt and d3.scaleOrdinal map earthquake attributes. Data comes from the NOAA Significant Earthquake Database, loaded via d3.csv.

Gguangxinhu

78% match

Loading thumbnail…

Earthquakes

This heatmap visualizes earthquake counts (M3+) across U.S. states from 2010 to 2015, with each cell’s color encoding the annual total via a `d3.scaleQuantize` over nine discrete bins. A dropdown menu lets users filter the display by magnitude category (e.g., “10 to 99”), updating the visible rectangles. Built with D3 v5, the SVG renders axes using `d3.axisBottom` and `d3.axisLeft`, while a tooltip appears on hover to show the exact count. Data is loaded from a CSV with `d3.csv` and processed using `d3.nest` for grouping.

MManishJariwala22

77% match