LineChart Test

100%

LineChart Test

✓ Published0🌍 Public

Last edited Mar 3, 2024

Created on Mar 3, 2024

This visualization presents earthquake data as a bubble chart plotting longitude and latitude, with bubble size encoding earthquake magnitude and color representing the continent. It includes interactive filtering by continent through the legend, which also shows size ranges. Built with D3 v7, the code uses `d3.select`, `d3.scaleOrdinal`, and `d3.scaleLinear` to render circles in an SVG, with a custom CSV parser for the earthquake dataset. Hovering over bubbles reveals tooltips showing magnitude and continent details.

AI-generated description

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

Similar vizzes

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

83% match

Loading thumbnail…

Line charts

Multiple line charts display earthquake frequencies from 2000 to 2015, broken down by magnitude bands (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+), alongside estimated deaths as a radius scale. Built with D3 v5, the visualization uses `d3.line` with monotone curve interpolation, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders as SVG. Data comes from the USGS earthquake records embedded in the local CSV file.

Aandrewtran1991

81% match

Loading thumbnail…

Fork of A5_BubbleChart

This bubble chart maps earthquake locations using longitude and latitude coordinates, with each steelblue circle representing a seismic event. The visualization plots raw geographic data points without magnitude encoding, emphasizing spatial distribution over intensity. The code uses D3 v7’s `d3.csv` for data loading and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft` to construct axes. SVG circles are positioned via the `xScale` and `yScale` functions, rendering the dataset from the provided external CSV file into an 800×600 pixel chart.

Vvinodreddysagam929@gmail.com

80% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart compares the frequency of earthquakes across four U.S. regions from 2011 to 2015, using data from a CSV file that includes state, region, year, and count. The visualization uses D3 v5 with `nest()` and `rollup()` to aggregate counts by region and year, then draws smoothed lines with `line()` and `curveBasis` to show trends. Color-coded circles mark yearly data points, and a custom `colorLegend` function displays the regional color key. The chart is rendered as SVG with axes from `axisLeft` and `axisBottom`, and includes interactive hover effects on the points.

HHalian Vilela

80% match

Loading thumbnail…

EarthQuakes Bubblegraph

This visualization displays recent significant earthquakes as a bubble graph, plotting each seismic event as a circle positioned by its magnitude. The interactive map, rendered as an SVG canvas, uses mouseover events to highlight individual quakes and display their location and magnitude in a text element. Built with React and D3.v5, the code fetches live data from the USGS Earthquake API, styling each bubble with radius scaled to magnitude and colored by alert level, set against a stylized blue background.

SSreenivasulu

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

79% match

Loading thumbnail…

Worldwide Earthquake Multi Chart

This multi-chart visualization displays worldwide earthquake data over time, plotting yearly counts across four magnitude categories. The primary chart shows a yellow line representing earthquakes of magnitude 5–5.9 using d3.line with curveBasis smoothing. The visualization processes CSV data loaded via d3.csv, converting year strings to Date objects and numeric fields for analysis. Scales are created using d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axes rendered using d3.axisBottom and d3.axisLeft. The SVG rendering approach uses D3 v5 selection and append methods to build the chart structure.

KKelvin Yuen

78% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays US earthquake counts by region from 2011 to 2015, using data from the Data Canvas - Sense Your City project. Multiple colored lines represent different regions, with circles marking individual data points. The visualization uses d3.nest to aggregate and rollup data, d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line with curveBasis for path generation. A color legend is rendered using a custom colorLegend module, and the chart includes interactive mouseover and mouseout events on the data circles.

Ssafdarawan

78% match