Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Rrpadron8
Last edited Oct 7, 2021
Created on Oct 7, 2021

This visualization displays one week of temperature readings in Celsius for cities worldwide, using data from the Data Canvas - Sense Your City dataset. The chart plots timestamps on the x-axis against temperatures on the y-axis, with each city represented by a distinct colored line from the d3.schemeCategory10 palette. Built with d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and a custom colorLegend module, it renders smooth curves via d3.line with curveBasis. A sorted legend and gridlined axes, created with d3.axisLeft and d3.axisBottom, complete the SVG output.

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…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays one week of temperature data in Celsius for various global cities, sourced from Data Canvas - Sense Your City. The visualization encodes time on the x-axis and temperature on the y-axis, with each city represented by a colored line using d3.curveBasis for smoothing. It employs d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with the schemeCategory10 palette, drawing axes via d3.axisBottom and d3.axisLeft. A custom colorLegend function renders the categorical legend, while the SVG rendering includes styled grid lines and titles.

DDi Cui
97% match
Loading thumbnail…

Fork of 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. Each city is represented by a distinct colored line, with time on the x-axis and temperature on the y-axis, sorted by each city's final temperature reading. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line, d3.curveBasis, d3.nest, and d3.axisBottom/axisLeft to render the chart and its axes. A custom colorLegend function draws the categorical legend, and the SVG output includes styled grid lines and labels.

Jjwadh
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data (in Celsius) for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a smoothed colored line, with an ordinal color scale and legend ordering cities by their final temperature values. The visualization uses d3.csv to load data, d3.nest and d3.scaleOrdinal for grouping and coloring, and d3.line with curveBasis to generate the SVG paths. Axis labels and a title are rendered with d3.axisBottom and d3.axisLeft, while a custom colorLegend module draws the legend circles and text.

Lleahfurn
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart shows one week of temperature readings in Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a smoothed, semi-transparent line with a corresponding color legend. The visualization employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft to render SVG paths and axes, with a custom colorLegend module.

AAdriana Rodriguez Sanabria
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from the Data Canvas - Sense Your City project. Using d3.csv to load data and d3.nest to group by city, the visualization renders multiple temperature trends over time with d3.line, applying a curved basis interpolation. The chart includes custom axes with d3.axisLeft and d3.axisBottom, a categorical color scale using d3.scaleOrdinal with schemeCategory10, and a legend generated from a separate colorLegend function. The SVG output features semi-transparent lines with mix-blend-mode for overlapping clarity.

Mmtan8
97% match
Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.nest grouping measurements by city and d3.line with curveBasis generating smooth paths for each city’s temperature trend. A d3.scaleOrdinal with schemeCategory10 assigns colors, and a custom colorLegend component renders city labels. The SVG output includes gridlines, axis labels, and a title, with semi-transparent lines blended via mix-blend-mode for overlapping series.

RRochisman Datta
97% match
Loading thumbnail…

Fork of 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 distinct colored line, with a color legend on the right and a title above the chart. The visualization uses d3.csv to load data, d3.nest to group by city, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. It includes axis labels, grid lines, and rendered as SVG with mix-blend-mode for overlapping strokes.

GGriffin Wimminger
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro
96% match