Skip to main content
SimilarExport ZIP
100%

26 - line chart w/ multiple lines - dataviz 2018

✓ Published1🌍 Public
Zzach b.
Last edited Jan 12, 2022
Created on Jan 12, 2022

A multi-line chart displays a week of temperature readings across multiple cities, with each city drawn as a distinct colored path using smooth curved lines. The visualization sorts city series by their final temperature value in descending order and includes a color legend. Built with D3 v5.6 and SVG, the code uses `d3.nest` for data grouping, `d3.line` with `curveBasis`, and scales for time and temperature axes. Data comes from a CSV file loaded via `d3.csv`.

AI-generated description

datraviz 2018 #26 - line chart w/ multiple lines

--
d3.nest was replaced with d3.group and d3.rollup in v6.0 (src). so i'll be using v5.6.0 like the course example here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line chart with multiple lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line. The visualization uses D3 v5 with SVG rendering to draw the lines, employing `d3.csv` for data loading, `d3.nest` to group readings by city, and `d3.line` with `curveBasis` for smooth paths. Temperature values are converted from Celsius to Fahrenheit before plotting. A color legend, axis labels, and a title accompany the chart, with gridlines and semi-transparent blended line strokes enhancing readability.

Jjlongwellchc
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Aannadehtiarova
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays a week of temperature readings from multiple cities around the world as smooth, overlapping line charts. The chart sorts cities by their final temperature values and uses a color legend to distinguish them. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A mouseover interaction uses a `bisector` to find the nearest data point and displays a tooltip with the timestamp and temperature. The data comes from a CSV file loaded via `d3.csv`.

Iinu231
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses D3 v5’s scaleTime, scaleLinear, and line generators with a curveBasis to create smooth paths, while nest() groups data by city and sorts lines by their final temperature value. SVG rendering handles the axes, gridlines, and labels, with the data loaded from a CSV file via d3.csv.

Vvic126
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of global temperatures across multiple cities, using colored lines to compare trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data by city and `d3.line` with `curveBasis` for smooth paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom color legend maps city names using `d3.scaleOrdinal` with `schemeCategory10`. Temperature data is loaded from a CSV file sourced from Data Canvas - Sense Your City.

Bbattlescarredshogun
88% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings from multiple cities over a one-week period, with each city represented by a distinct colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A custom `colorLegend` component renders ordinal color categories, while axis labels and a title annotate the SVG output. The data is loaded from a CSV hosted on VizHub.

Ffahmijaafar
88% match