Fork of Line Chart with Multiple Lines

100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Jul 11, 2021

Created on Jul 8, 2021

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

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

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

96% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5’s `line`, `curveBasis`, and `nest` functions to draw smooth, multi-line paths, with a categorical color scale and custom color legend. SVG rendering includes grid lines via `axisLeft` and `axisBottom`, and the chart is sorted by each city’s last temperature value.

Jjudeluka

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

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

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

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