Magnitude of Earthquakes over 7 Days

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`.

92% match

Ver04 of Magnitude of Earthquakes over 7 Days

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.

91% match

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.

79% match

Final - Earthquake Scatter Plot

This scatter plot visualizes earthquakes from the past week using USGS GeoJSON data, showing the relationship between earthquake depth and magnitude on a time-based x-axis. The circles are colored by depth category (shallow, intermediate, deep), and hovering over the legend highlights one category while dimming the others. Built with D3 v7, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom` to render axes and a custom color legend, with a `ResizeObserver` for responsiveness. The plot reveals that shallow earthquakes span the widest magnitude range, while deep earthquakes all exceed M4.0.

Ver2 Earthquake Scatter Plot

This visualization plots earthquake magnitude against time using data from the USGS all-week GeoJSON feed, with points colored by depth category (shallow, intermediate, deep). The main scatter plot includes hover tooltips showing magnitude, location, time, and depth, while a context view below displays the full dataset with a d3.brushX selection that filters the primary view to a brushed time interval. Built with D3 v7 and React, the visualization uses scaleLinear, scaleOrdinal, and utcFormat to render the charts.

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.

Past 7 Days Earthquakes Dataset

This visualization shows a choropleth map of earthquake distribution, with the intensity of the data displayed chronologically over the past 7 days. The map is rendered using a WebGL-based framework, likely Three.js, to provide a three-dimensional view of the earth's surface. Each earthquake is represented as a point, with its position mapped using latitude and longitude coordinates from the CSV file. The depth and magnitude of each quake are also visualized, with color and size potentially encoding these attributes. Data is sourced from the USGS earthquake feed, parsed and loaded directly from a local data.csv file using a custom import. The implementation relies on a JavaScript map projection library and a 3D rendering engine to plot the geographic data.

Earthquake Scatter Plot expandable x-scale

This interactive scatter plot visualizes earthquake magnitudes over time, with points colored by depth category (shallow, intermediate, deep) using a D3 ordinal color scale. Users can zoom horizontally via a d3.zoom behavior that rescales the time axis, and hover over the color legend to highlight matching earthquakes. The chart uses d3.scaleTime and d3.scaleLinear for axes, with data loaded from a CSV file containing USGS earthquake records. A brush selection adds black strokes to selected points, though the zoom functionality takes precedence.