Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Aandrewtran1991

Last edited Feb 22, 2020

Created on Feb 21, 2020

This line chart displays the number of earthquakes recorded in four U.S. regions—West, South, Midwest, and Northeast—from 2011 to 2015. Each line represents a region, with points plotted per year using `d3.scaleTime` and `d3.scaleLinear` for axes. Hovering over a point triggers a second SVG bar chart showing earthquake counts by state for that region and year. The visualization uses D3 v5, SVG rendering, and data from the state-year-earthquakes.csv file.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Selecting a Year on a line chart

This example shows a multi-line chart tracking earthquake counts across four U.S. regions (Midwest, Northeast, South, and West) from 2010 to 2015. The code uses D3 v5 with SVG rendering and animation, loading data from a CSV file via `d3.csv`. It employs `d3.nest()` to aggregate counts by year and region, then draws separate colored lines using `d3.line()` and `d3.scaleTime()`/`d3.scaleLinear()`. A legend and axis labels are added, with the visualization built using the margin convention and React as the framework.

NNeepaB

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

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

84% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the count of a phenomenon across U.S. states, grouped by region (South, West, Midwest, Northeast) over five years (2011–2015), with each region represented by a distinct colored line. The visualization uses D3 v5’s `nest()` and `rollup()` to aggregate state-level data from a CSV file, then renders paths with `d3.line()`. It employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10` for axes and color encoding, plus a custom `colorLegend` component for region labels. SVG rendering includes axis labels and a title, with data sourced from the Data Canvas - Sense Your City project.

Sshehryar-hashir

84% match

Loading thumbnail…

bar chart

This bar chart displays earthquake counts across U.S. states for the Western region in 2011, sorting states from highest to lowest frequency. The visualization uses D3 v5’s `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `axisBottom` for tick marks, rendering as SVG. Data is loaded from a CSV file and filtered for the specific region and year, with bars sized proportionally to earthquake counts.

Ggotyou007

82% match

Loading thumbnail…

LineChart Test

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.

DDuc Pham

78% match