Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published4🌍 Public

Last edited Oct 9, 2025

Created on Feb 21, 2024

This line chart visualizes daily surface air temperature data, colored by year, with the year 2024 highlighted in red. Each line represents a year’s temperature variation over the day of the year, using a plasma color scale for other years. The visualization relies on `d3.scaleLinear`, `d3.extent`, and `d3.flatGroup` from the D3 library to group data and map values. Axes and labels are generated via `@curran/responsive-axes`, while the chart updates responsively using `observeResize`.

AI-generated description

A visualization of Daily Surface Air Temperature, colored by year, with 2024 highlighted in red. Made in collaboration with EJ Fox, leveraging data prepared by Matthias Stahl.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, showing how temperature varies across the days of the year for multiple years. The chart uses multiple lines, one per year, with a color scale from the plasma interpolator to differentiate between years. The year 2024 is emphasized with a red, thicker line, while other years appear semi-transparent. The code leverages D3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` APIs, along with the `@curran/responsive-axes` library for axes, to render the visualization from the provided dataset.

Rreddysushma994@gmail.com

91% match

Loading thumbnail…

Line chart

This line chart visualizes daily mean temperature changes over time, with the x-axis representing days and the y-axis showing mean temperature in degrees. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render an SVG path with red strokes. Data is loaded from a CSV file via `d3.csv`, and dates are parsed with `d3.timeParse`. Grid lines are drawn using tick sizes, and axis labels are added manually within the SVG.

KKishen Patel

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

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

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Eedxiao97

77% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

CCarloGato

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This chart displays one week of temperature data across multiple cities, drawn as overlaid line paths with a color-coded legend. Using d3.line, d3.scaleTime, and d3.scaleLinear, the visualization maps year against temperature, while d3.nest groups readings by city and d3.scaleOrdinal assigns categorical colors. Axes and labels are rendered via d3.axisBottom and d3.axisLeft, with data sourced from a CSV file.

SSagarikaS

77% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line from the d3.schemeCategory10 scale. The visualization uses d3.nest() to group data by city and d3.line() with curveBasis to create smooth paths, while d3.scaleTime() and d3.scaleLinear() map timestamps and temperatures to the SVG canvas. A custom colorLegend module renders the city labels, and the chart includes gridlines from axisBottom and axisLeft with tick marks. The data comes from a CSV file containing hourly temperature observations.

MMounikaBeerelly

77% match