Skip to main content
SimilarExport ZIP
100%

Ver04 of Magnitude of Earthquakes over 7 Days

✓ Published0🌍 Public
Llingjizhu@gmail.com
Last edited Feb 13, 2024
Created on Feb 13, 2024

A scatter plot visualizes earthquake magnitude and depth from the past seven days, using time on the x-axis and magnitude on the y-axis. The depth is categorized into three levels—shallow (red), intermediate (blue), and deep (green)—via `d3.scaleOrdinal`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map axes, with circles colored by depth and a hover interaction that enlarges points and displays crosshair lines. It leverages the d3 library, integrates responsive container and axis handling, and sources data from the Earthquake Dataset.

AI-generated description

A scatter plot shows both magnitude and depth of the earthquakes happened in the past 7 days.

This plot was integrated with responsive viz container and responsive axes.

Data can be found here: Earthquake Dataset.

The depth of the earthquake is categorized into 3 levels:

  • RED: Shallow: depth < 70km
  • BLUE: Intermediate: 70km <= depth < 300km
  • GREEN: Deep: depth >= 300km
MIT Licensed

Similar vizzes

Loading thumbnail…

Ver02 of Magnitude of Earthquakes over 7 Days

This scatter plot displays the magnitude and timing of earthquakes over a seven-day period, with depth categorized into shallow, intermediate, and deep levels using red, blue, and green from a D3 ordinal scale. The visualization uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering circles with fill colors derived from depth categories. A legend generated via SVG groups clarifies the color mapping, while the code imports utilities from `@curran/axis-labels` and loads earthquake data from `@Ljz2018/earthquake`.

Llingjizhu@gmail.com
96% match
Loading thumbnail…

Magnitude of Earthquakes over 7 Days

This scatter plot displays the magnitude of earthquakes over a seven-day period, with time on the x-axis and earthquake magnitude on the y-axis. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, with points rendered as semi-transparent circles. Data comes from the Earthquake Dataset and is filtered to exclude rows with missing values. The visualization highlights temporal clustering and magnitude variations, with gray inner rectangles marking the plot area.

Llingjizhu@gmail.com
91% match
Loading thumbnail…

Ver04 of Magnitude of Earthquakes - Added Responsiveness

This interactive scatter plot visualizes earthquakes from the past seven days, showing magnitude over time while color-coding each point by depth category—red for shallow, blue for intermediate, and green for deep quakes. The visualization uses D3 scales and axes to map the data, and implements responsive rendering via `observeResize` and the `axes` helper library, adapting to container size changes. Circles enlarge on mouseover through D3 transitions. The plot fetches data from the publicly available Earthquake Dataset on VizHub.

Llingjizhu@gmail.com
86% match
Loading thumbnail…

Ver03 of Magnitude of Earthquakes - Added Responsiveness

A responsive scatter plot visualizes earthquake magnitude over time from the past seven days, using a USGS-derived dataset loaded via the `@Ljz2018/earthquake` data module. Circles are colored by depth category—red for shallow, blue for intermediate, and green for deep—through a `d3.scaleOrdinal` color scale. The chart employs `d3.scaleTime` and `d3.scaleLinear` for axes, with layout managed by `observeResize` from `@Ljz2018/axis-labels` to adapt width and height dynamically, while `d3.select` and `.join` handle SVG element updates.

Llingjizhu@gmail.com
84% match
Loading thumbnail…

Earthquake Scatter Plot

This scatter plot visualizes earthquake data from January 2024, showing magnitude over time with points colored by depth category (shallow, intermediate, deep). A color legend allows interactive highlighting by hovering over depth categories, while a brush tool supports time-range selection. The visualization uses D3.js APIs including scaleTime, scaleLinear, scaleOrdinal, brushX, and axis components to render the chart with ResizeObserver for responsive sizing.

Llingjizhu@gmail.com
84% match
Loading thumbnail…

Magnitude vs Depth

This scatterplot visualizes the relationship between earthquake magnitude and depth using data from the Significant Earthquakes from 1965 dataset. Interactive dropdown menus filter data points by magnitude ranges (e.g., 5-6, 6-7) and depth ranges (e.g., 0-250, 251-500 km). Hovering over a circle reveals a tooltip with the country, date, magnitude, and depth. Built with React and D3 v5 (using `scaleLinear` and `extent`), the visualization uses SVG circles, with axes rendered by custom components (`AxisBottom`, `AxisLeft`).

VVarun Eranki
84% match
Loading thumbnail…

Scatter Plot Mag Depth

This interactive scatter plot displays earthquake magnitude against depth using live USGS GeoJSON data for all earthquakes from the past day. Each circle represents a quake, positioned by its depth on the x-axis and magnitude on the y-axis, with hover tooltips revealing the exact values. Built with D3 v4, it uses `d3.json` for data loading, `d3.scaleLinear` for axis ranges, and SVG circle elements with `mouseover` and `mouseout` events to trigger the tooltip’s opacity transitions. The chart includes labeled axes with tick marks to facilitate comparison of seismic activity patterns.

MMTClass
83% match
Loading thumbnail…

Class 6 ScatterPlot

This visualization plots earthquake magnitudes against time over a week, using a scatterplot with circles positioned by time on the x-axis and magnitude on the y-axis. The code overlays a line path connecting the data points via d3.line, though the primary focus is the scatter of events. It loads live data from the USGS earthquake feed as CSV, parses timestamps with d3.utcParse, and applies d3.scaleTime and d3.scaleLinear for axes. The SVG is rendered with D3 v4, and hovering over a dot turns it red. The visualization also attempts to add a legend, but the referenced color scale is undefined, so no legend appears.

MMTClass
79% match