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 Nov 28, 2021

Created on Nov 28, 2021

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

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 readings in degrees Celsius for multiple cities, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, multi-hued line, with a color-coded legend on the right. The visualization uses D3 version 5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and a Bézier curve for line generation. The chart is rendered as an SVG, featuring a titled y-axis, labeled axes, and a legend created via a custom `colorLegend` module.

JJaswitha09

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

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

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

96% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature readings in degrees Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. It plots each city’s temperature over time as a smooth line using d3.line with curveBasis, while nesting data by city via d3.nest and ordering lines by their final value using d3.descending. The SVG render includes d3.axisBottom and d3.axisLeft, a d3.scaleOrdinal color scale based on schemeCategory10, and a custom color legend module.

IIlayaraja R

96% match

Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in Celsius for multiple cities, with lines sorted by their final value and distinguished by color from a categorical scale. The visualization includes a title, labeled axes, a color legend, and a grid created by axis tick marks. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line` with `curveBasis`, and `nest` to group data by city, rendering as SVG. Temperature data originates from the Data Canvas - Sense Your City dataset.

Ppurplemaestro

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

95% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses D3 v5 to render multiple smoothed lines, one per city, with a color-coded legend. It employs `scaleTime` and `scaleLinear` for axes, `nest` to group data by city, and `curveBasis` for line smoothing. The SVG rendering includes a title, axis labels, and a custom color legend, with city lines sorted by their final temperature values.

JJspring42

95% match