Skip to main content
SimilarExport ZIP
100%

Line Chart - Multiple Lines

✓ Published1🌍 Public
Ggabcoderboi
Last edited Jan 1, 2021
Created on Dec 30, 2020

This line chart displays one week of temperature data from multiple cities, with a color legend identifying each city and a title reading “A Week of Temperature Around the World.” The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth path generation, and d3.nest to group data by city. D3’s ordinal color scale assigns category colors to each line. The chart includes grid lines from axis ticks and uses SVG rendering, with data sourced from Data Canvas - Sense Your City.

AI-generated description

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

Made in this video:

MIT Licensed

Similar vizzes

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

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
96% 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
96% 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
96% 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. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth, semi-transparent temperature trends per city. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend module generates the interactive legend. d3.nest groups measurements by city, while axis labels and a title are added as SVG text elements.

Bbattlescarredshogun
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings from cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with the legend sorted by final temperature values. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis for smoothing, and d3.nest for grouping data by city. SVG rendering includes custom axis labels, a title, and a color legend built from d3.scaleOrdinal with schemeCategory10.

KKevinw97
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, with each city represented by a colored line. The visualization uses d3.line with curveBasis to smooth the temperature trajectories, while d3.scaleTime and d3.scaleLinear map time and temperature values to positions. A custom colorLegend function renders the categorical color scale using d3.scaleOrdinal. Data comes from Data Canvas - Sense Your City, loaded via d3.csv, and is rendered as SVG paths with a multiply blend mode.

FFazerl
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City. Each line represents a city’s temperature over time, distinguished by color, with a legend to identify cities. The chart uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest to group data by city. Axes are rendered with d3.axisBottom and d3.axisLeft. A custom colorLegend function creates the SVG legend.

MMikePowar
96% match