Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published1🌍 Public
HHe Jianfeng
Last edited Apr 15, 2021
Created on Apr 15, 2021

This example displays a week of temperature data for multiple cities using an SVG line chart with one line per city, colored via a categorical scale. The chart includes labeled axes, a title, and a color legend positioned to the right. It uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, d3.line with curveBasis for smooth paths, and d3.group to organize data by city. The data originates from the Data Canvas "Sense Your City" dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Line chart with multiple lines

This line chart displays one week of temperature data from multiple cities, with each city represented by a distinct colored line from the d3 schemeCategory10 scale. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group measurements by city. A custom colorLegend function renders the categorical color keys, while d3.axisLeft and d3.axisBottom create labeled axes with gridlines. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv and rendered as SVG elements.

TThomas Seberechts
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, with each city represented by a colored line and a categorical legend. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. Data comes from Data Canvas - Sense Your City, rendered as SVG with a color legend built from d3.scaleOrdinal and schemeCategory10. The chart includes gridlines from axis ticks and a title.

KKarkG
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Iishmam11
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding legend. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis smooths the paths. Data is loaded via d3.csv from an external dataset, and the SVG is rendered with axes, grid lines, and labels styled through CSS.

NNkwachi Abel
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a differently colored line, with a color legend identifying the cities. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title, with d3.axisBottom and d3.axisLeft generating the ticks.

OOliver Wills
95% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature readings across multiple global cities, with each city represented by a distinct colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by city, and d3.line with curveBasis for smooth paths. A d3.scaleOrdinal with schemeCategory10 handles color encoding, while an interactive color legend explains city assignments. The chart includes axis labels, a title, and a legend, rendering data from the Data Canvas - Sense Your City dataset.

Wwishcsdev
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. A d3.nest() groups the data by city, with d3.scaleTime() and d3.scaleLinear() mapping time and temperature, while d3.line() with curveBasis smooths each city's temperature trend. The chart uses d3.axisLeft and d3.axisBottom with gridlines, and a custom colorLegend function renders categorical colors via d3.scaleOrdinal. SVG rendering with mix-blend-mode multiply overlays the lines, and the visualization concludes with a title reflecting the global scope.

Ssteveaigbe
95% match