Fork of Fork of Fork of Line Chart with Multiple Lines

100%

Fork of Fork of Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Feb 21, 2022

Created on Feb 21, 2022

Forked from Fork of Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis to draw smoothed temperature trends, and d3.scaleOrdinal with schemeCategory10 to color each city. A custom colorLegend function renders interactive circles and labels, while d3.nest groups data by city and sorting orders lines by final temperature. SVG rendering and d3.axisBottom/axisLeft provide a complete multi-line comparison.

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 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 Fork of Line Chart with Multiple Lines

This line chart shows a week of temperature data in degrees Celsius for multiple cities around the world, using data from Data Canvas - Sense Your City. Each city is represented by a separate smoothed line, with a color legend positioned on the right. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes axis labels, a title, and a custom colorLegend component.

Jjwadh

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

Loading thumbnail…

Fork of Line Chart with Multiple Lines

Ppurplemaestro

96% match

Loading thumbnail…

Fork of Fork of Fork of Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data from Data Canvas - Sense Your City, plotting temperatures in Celsius over time for multiple cities. Each city appears as a separate smoothed line, colored via d3.scaleOrdinal with schemeCategory10 and sorted by final temperature. The visualization uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.nest to structure the data. A color legend built with a custom function, axis labels, and gridlines rendered as SVG complete the chart.

JJaswitha09

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

96% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, respectively, while d3.line and d3.curveBasis generate smooth paths for each city's temperature trend. The chart includes axes with tick marks, a color legend, and a title, with the SVG rendered directly on the page.

Ddasari234

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

96% match