Skip to main content
SimilarExport ZIP
100%

Line chart with multiple lines

✓ Published1🌍 Public
LLongYuu
Last edited Nov 29, 2020
Created on Nov 28, 2020

This line chart displays one week of temperature data for multiple cities from the Data Canvas - Sense Your City dataset, using a distinct color for each city’s time series. The d3.v5 code employs `d3.line` with `curveBasis` to generate smooth SVG paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group by city. A custom color legend renders using `d3.scaleOrdinal` with `schemeCategory10`, while axis labels and gridlines are styled via CSS.

AI-generated description

This Line Chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

BBen Rambo-Martin
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render an SVG with a time-based x-axis and linear y-axis. Cities are color-coded via the `scaleOrdinal` and `schemeCategory10` APIs, with a custom legend built from `colorLegend`. The `nest` function groups data by city, while `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` generate the smoothed paths.

NNiall O'Brien
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Iishmam11
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, with d3.nest grouping the data. Rendered as SVG, the chart includes d3.axisBottom and d3.axisLeft with grid lines, and a color legend built via a custom function. Lines are drawn with d3.line using curveBasis, and styled with translucent strokes that blend via CSS mix-blend-mode.

SSadafKay
96% match
Loading thumbnail…

Line chart with multiple lines

This line chart displays one week of temperature data from multiple cities, with each city represented by a distinct colored line from the d3 schemeCategory10 scale. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group measurements by city. A custom colorLegend function renders the categorical color keys, while d3.axisLeft and d3.axisBottom create labeled axes with gridlines. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv and rendered as SVG elements.

TThomas Seberechts
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. Each smooth, colored line represents a different city’s temperature over time, with an ordinal color scale and a legend function defined in a separate module. The visualization uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data by city. The SVG rendering includes axis labels, a title, and gridlines styled via CSS.

Ddanhuijia
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius from multiple cities, sourced from Data Canvas - Sense Your City. A colored line represents each city, with a color legend on the right identifying them. The chart uses D3's `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. Axes feature gridlines and labels, rendered as SVG, with a title and legend included.

Ffbudwill
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. The visualization plots time on the horizontal axis and temperature in degrees Celsius on the vertical axis, with each city represented by a distinct colored line. Built with D3 version 5, the code uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom` and `axisLeft` for axes. A `nest` operation groups data by city, and a custom `colorLegend` function renders the categorical color key. Multiple lines are drawn using `line()` with a basis curve, rendered as SVG paths.

Jjesramyep1263
95% match