Skip to main content
SimilarExport ZIP
100%

D3 - Scatterplot

✓ Published0🌍 Public
CChandana Srinivas
Last edited Feb 21, 2024
Created on Feb 19, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot - Earthquakes

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.

JJunying Li
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
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
82% match
Loading thumbnail…

Significant Earthquake in World: 1970-2019

This interactive scatterplot visualizes significant earthquakes from 1970 to 2019, plotting attributes like magnitude, focal depth, and year on selectable X and Y axes via React dropdowns. Each point’s color indicates tsunami occurrence, with a color legend that fades non-hovered categories on mouseover. Built with React and D3 v5, the chart uses d3.scaleLinear, d3.scaleOrdinal, and SVG circles for marks, and includes axes rendered via custom React components. Data comes from the NOAA significant earthquake database, loaded as CSV through d3.csv.

Gguangxinhu
82% match
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
80% match
Loading thumbnail…

LineChart

This line chart visualizes earthquake statistics from 2000 to 2015, comparing the annual frequency of earthquakes across different magnitude ranges (5–5.9, 6–6.9, 7–7.9, and 8.0+) as four distinct colored lines. Built with D3 v5 and rendered as SVG, it uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for gridlines. Data is loaded from a CSV via `d3.csv`, with the chart including a legend and axis labels.

Ssiddu7147
80% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes earthquake data from a CSV file, displaying the number of earthquakes per year across magnitude ranges. The visualization uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` functions to map years on the x-axis and earthquake counts on the y-axis, with circles rendered in SVG. Data is sourced from a VizHub-hosted dataset. The chart includes labeled axes, a title, and gridlines, with circles colored red and semi-transparent to show overlapping points.

Eedxiao97
79% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes earthquake data, displaying the number of earthquakes per year as orange circles. The visualization uses D3 v5 with scaleLinear functions to map the data, along with axisBottom and axisLeft for the axes. The chart includes labeled axes for year and number of earthquakes, with data loaded from a CSV file using d3.csv. The SVG rendering approach is used, with custom styling applied through CSS classes for ticks, axis labels, and the title.

Eedxiao97
79% match