Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot - Earthquakes

✓ Published1🌍 Public
JJunying Li
Last edited Sep 27, 2021
Created on Sep 13, 2021
Forked from D3 Scatter Plot

A scatter plot displays earthquake magnitude (Richter scale) on the y-axis against time (years 1900–1999) on the x-axis, with each circle's radius encoding the number of deaths. The plot uses D3 v6 with SVG rendering, employing `scaleLinear` for axes and circle size, `extent` for domain calculation, and `axisLeft`/`axisBottom` for tick marks. Data comes from a CSV file loaded via `d3.csv`, and circles are drawn with semi-transparent opacity to show overlapping points across the timeline.

AI-generated description

A D3 scatter plot shows the Richter of earthquakes occured from 1900 to 1999.

Data: Earthquakes Dataset.

Y-axis:

Richter of earthquakes

X-axis:

Timeline

Radius:

Deaths of earthquakes

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot With Brush - Earthquakes

A D3 scatter plot displays earthquakes from 1900 to 1999, mapping year on the x-axis, Richter magnitude on the y-axis, and death count to circle radius. The chart uses `d3.brushX` to select a time range, turning selected circles red; double-clicking either clears the selection or selects all circles if none exist. Data comes from a CSV hosted on GitHub Gist. The SVG visualization uses `d3.scaleLinear` for positioning and sizing, with `d3.axisLeft` and `d3.axisBottom` for axes, and is rendered from the `d3.v6` library.

JJunying Li
91% match
Loading thumbnail…

earthquake

This scatter plot visualizes earthquake frequency by year, with each orange circle representing a data point and the y-axis labeled "nums_of_earthquake." The visualization uses d3.csv to load data from a remote earthquakes dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and gridlines. The SVG chart is generated with d3.v5, applying margin-based layouts, axis labels, and a title, while styling circles and text through external CSS.

Eedxiao97
86% match
Loading thumbnail…

Untitled

This scatter plot displays the relationship between earthquake year and estimated deaths, with red translucent circles representing individual data points. The visualization uses D3 v4 to render an SVG chart with linear scales for both axes, axis labels, and gridlines. Data comes from a CSV file of earthquake records, and the code also includes a separate line chart example using time-series data from the Auto MPG dataset, though the primary visualization focuses on the earthquake scatter plot.

Eedxiao97
85% match
Loading thumbnail…

Untitled

This scatter plot displays the relationship between earthquake year and estimated deaths, with red translucent circles representing individual data points. The visualization uses D3 v4 to render an SVG chart with linear scales for both axes, axis labels, and gridlines. Data comes from a CSV file of earthquake records, and the code also includes a separate line chart example using time-series data from the Auto MPG dataset, though the primary visualization focuses on the earthquake scatter plot.

Eedxiao97
85% match
Loading thumbnail…

D3 - Scatterplot

This scatterplot visualizes earthquake data, plotting the significance level of earthquakes on the x-axis against their magnitude on the y-axis. Built with React and D3 v7, it renders an SVG chart with a light gray background, labeled axes, and title. The code uses `d3.csv` to load data from a GitHub Gist, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to generate ticks. Individual data points are drawn as purple circles with the `.dot` class, with the chart layout adjusted through SVG `rect`, `g`, and `line` elements.

CChandana Srinivas
84% match
Loading thumbnail…

Cars Scatterplot

This scatterplot displays the frequency of earthquakes by year, with circles positioned along the x-axis for year and the y-axis for the number of quakes in a magnitude range. It uses D3 v5 with SVG rendering and scales via `d3.scaleLinear` and `d3.extent`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while data loads from a CSV using `d3.csv`. The visualization highlights trends in seismic activity over time.

Eedxiao97
84% match
Loading thumbnail…

Cars Scatterplot

This scatterplot displays earthquakes over time, plotting year on the x-axis against the count of quakes in the 7.0–7.9 magnitude range on the y-axis, with each red semi-transparent circle representing a data point. The chart encodes the number of earthquakes per year in the "7_7.9" column of a CSV dataset loaded via `d3.csv`. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, while `d3.extent` sets the scales’ domains. SVG circles are bound to the parsed data, with margins and axis labels configured through D3 selections. The reversal of the y-scale places higher earthquake counts at the top.

Eedxiao97
84% match
Loading thumbnail…

Data Visualization

This visualization displays earthquake data from a CSV file, plotting year on the x-axis, magnitude on the y-axis, and encoding depth via circle radius. The SVG scatterplot uses d3.csv to load data, then d3.scaleLinear and d3.scaleSqrt for scales, with d3.axisBottom and d3.axisLeft generating the axes. Colored steelblue circles with 0.5 opacity clearly reveal distributions of earthquake events across the recorded timeframe.

HHassaan Gul
83% match