Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Ppurplemaestro
Last edited May 21, 2022
Created on May 21, 2022

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.

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