Task

Past 7 Days M4.5+ Earthquakes Dataset

Rendered as a JSON object, the visualization displays the raw attributes of a single earthquake record from the USGS Past 7 Days M4.5+ Earthquakes dataset. It shows parsed data fields such as time, latitude, longitude, depth, and magnitude in a structured text format. The example uses D3.js to load and parse the CSV file, converting string values to numbers and dates for further analysis. This approach highlights data preprocessing rather than spatial mapping.

84% match

Past 30 days Earthquakes on Earth

This visualization shows global earthquake activity over the past 30 days, plotting each event as a small blue dot on a world map with latitude and longitude projections. The map renders country boundaries and a graticule using `d3.geoNaturalEarth1` and `d3.geoPath` from the D3 library, while earthquake data loaded from a CSV file is filtered and positioned by the projection. The visualization loads world topology from a TopoJSON file via the `topojson-client` library, and updates dynamically as data is fetched asynchronously.

79% 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.

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.

Ver4 Earthquakes (past 30 days)

This visualization displays earthquakes from the past 30 days on an interactive world map, with circle size representing magnitude. Circle color encodes depth category: red for shallow (less than 70km), green for intermediate, and blue for deep (300km or more). Users can zoom and pan using d3.zoom(), and clicking any circle opens the corresponding USGS earthquake report. The map uses d3.geoEquirectangular and d3.geoPath to render countries from topojson data and tectonic plate boundaries, while earthquake data is fetched live from the USGS API.

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.

Ver2 of Earthquakes (past 30 days)

This map shows the locations of earthquakes from the past 30 days, with each event drawn as a circle scaled by magnitude and colored by depth. The visualization uses real-time GeoJSON data from USGS.gov, and each earthquake marker is hyperlinked to its corresponding USGS event page. Built with D3.js, the map colors circles along a gradient to represent depth, with clickable markers that open detailed information for each recorded earthquake.

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