Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published1🌍 Public
Zzhouxiaojiejillian
Last edited Apr 4, 2020
Created on Apr 4, 2020

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. It shows multiple colored lines tracking temperature over time, with a color legend identifying each city. The visualization uses D3 v5 with d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis smoothing, d3.nest for grouping, and d3.axisLeft/axisBottom. SVG rendering with mix-blend-mode creates overlapping line effects, while axis labels and a title are added via SVG text elements.

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 displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.nest to group data by city, rendering smooth lines via d3.line with curveBasis. A custom color legend component and d3.axisBottom/axisLeft with grid lines complement the SVG rendering. d3.csv loads the data, while styles apply stroke-linejoin, stroke-linecap, and mix-blend-mode for visual distinction.

Zzhouxiaojiejillian
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses multiple colored lines, one per city, sorted by final temperature, with a color legend positioned to the right. It renders as an SVG using D3 v5, employing d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft. Grid lines and axis labels clarify the time and temperature scales.

UUtsav Singh
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses multiple colored lines, one per city, sorted by final temperature, with a color legend positioned to the right. It renders as an SVG using D3 v5, employing d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft. Grid lines and axis labels clarify the time and temperature scales.

UUtsav Singh
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It visualizes temperature trends over time, with each city represented by a distinct colored line and a color legend showing city names. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with curveBasis for path generation, and d3.nest to group data by city. Axes are rendered with d3.axisBottom and d3.axisLeft, while a custom colorLegend function handles the legend. The chart is drawn as SVG using d3 v5.

Kkhanhkhanh
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, show temperature trends over time, with a color legend identifying each city. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title.

SSarahKiyani
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, with each city represented by a colored line and a legend identifying the cities. It uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. The SVG rendering includes gridlines, axis labels, and a custom color legend built with d3.scaleOrdinal and schemeCategory10.

Ssiim1
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, with each city represented by a colored line and a legend identifying the cities. It uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. The SVG rendering includes gridlines, axis labels, and a custom color legend built with d3.scaleOrdinal and schemeCategory10.

Ssiim1
98% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, with each city represented by a colored line and a legend identifying the cities. It uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. The SVG rendering includes gridlines, axis labels, and a custom color legend built with d3.scaleOrdinal and schemeCategory10.

Ssiim1
98% match