Fork of Fork of Line Chart with Multiple Lines

100%

Fork of Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Sep 25, 2021

Created on Sep 25, 2021

Forked from 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.

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

98% 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 readings in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It renders multiple smoothed lines using d3.line with curveBasis, colored by city via d3.scaleOrdinal and schemeCategory10. The visualization includes time and temperature axes with gridlines, a color legend, and a title. Data is parsed from CSV using d3.csv, with nested grouping via d3.nest.

RRochisman Datta

97% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The chart plots time on the x-axis and temperature on the y-axis, with each city’s measurements rendered as a distinct colored, smooth curve using d3.line with curveBasis, plus a textured legend built from d3.scaleOrdinal and schemeCategory10. The visualization is rendered as SVG, using d3.axisBottom, d3.axisLeft, d3.nest for grouping, and d3.extent to set scales, with a blended multiply stroke effect on the paths.

HHaileabGH

97% match

Loading thumbnail…

Fork of 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.

Jjwadh

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 worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a colored line, with a legend showing city names and a title above the chart. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city colors, while d3.line with curveBasis generates smooth paths. Nesting via d3.nest groups data by city, and the code includes custom axis labels and a reusable color legend component, all rendered as SVG.

Cchandanagandla

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

97% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

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.

Rrpadron8

97% match