Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Aaditikandoi
Last edited May 17, 2022
Created on May 17, 2022

This line chart displays one week of temperature data for cities worldwide from the Data Canvas - Sense Your City dataset, with each city rendered as a separate colored line using D3’s `nest` and `scaleOrdinal`. The visualization uses `d3.line` with `curveBasis` for smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and a custom `colorLegend` function for the categorical legend. The SVG includes labeled axes, a title, and gridlines generated via `axisBottom` and `axisLeft`, with lines styled using `mix-blend-mode: multiply`.

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 data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, using distinct colored lines for each city and a color legend for identification. It is rendered as an SVG using D3 v5, with the code employing `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, and `d3.nest`. The `d3.axisLeft` and `d3.axisBottom` create labeled axes, while a custom `colorLegend` function generates the interactive legend.

AAremu Oluwagbamila (SMOG)
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Eendlesstory
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 Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from the Data Canvas - Sense Your City initiative. Each colored line represents a city, with dots marking individual readings and a color legend identifying each series. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `curveBasis`, and `axisLeft`/`axisBottom` to render the SVG. Data is loaded via `csv` and processed from a linked GitHub dataset, while custom axes, gridlines, and a title are generated programmatically.

GGerasimos Katsagannis
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with a color legend on the right and a title above the chart. The visualization uses d3.csv to load data, d3.nest to group by city, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. It includes axis labels, grid lines, and rendered as SVG with mix-blend-mode for overlapping strokes.

GGriffin Wimminger
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a D3 v5 line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas – Sense Your City. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are generated via `d3.line` with `d3.curveBasis`, while a custom `colorLegend` function handles the categorical legend. Data is loaded from a CSV, parsed with timestamps converted to `Date` objects, and nested by city using `d3.nest`.

Aabhimanyu-dhar
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smoothly curved line, with a color legend on the right helping to identify them. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` to generate the paths, `d3.scaleTime` and `d3.scaleLinear` for the axes, and a custom `colorLegend` module to render the SVG legend.

Bbosonfor
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smoothly curved line, with a color legend on the right helping to identify them. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` to generate the paths, `d3.scaleTime` and `d3.scaleLinear` for the axes, and a custom `colorLegend` module to render the SVG legend.

Bbosonfor
96% match