Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Bbstillword
Last edited Apr 17, 2022
Created on Apr 17, 2022

This example visualizes one week of temperature data for cities worldwide, using D3 v5 to draw multiple smoothed line paths with a categorical color scale and an interactive color legend. The chart plots timestamp against temperature on linear and time-based axes, and sorts the city series by their final values using `d3.nest` and `d3.descending`. Data originates from the Data Canvas Sense Your City project, and the SVG rendering uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` APIs.

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 visualization displays one week of temperature data from cities around the world as multiple smooth line paths, colored by city and sorted by final temperature. It uses D3 v5 APIs including `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line` with `curveBasis`, and `d3.axisLeft`/`axisBottom` to render an SVG chart with gridlines, axis labels, and a custom color legend. The data comes from the Data Canvas - Sense Your City dataset, loaded via `d3.csv`.

Llee hyoung beom
97% 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 visualization shows one week of temperature data in cities around the world, plotted as multiple smoothed lines using temperature over time. Each city is assigned a distinct color, with a color legend on the right and axis labels for time and temperature. The code uses `d3.csv` to load data from the Data Canvas - Sense Your City dataset, then applies `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.nest`, and `d3.line` with `curveBasis` to generate the SVG paths. Custom functions handle the color legend and axis styling.

Vvivianaaai@qq.com
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities worldwide as multiple smooth, overlapping lines, with a color legend identifying each city. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and a custom `colorLegend` component. The SVG rendering includes gridlines, labeled axes, and a title. Data originates from the Data Canvas - Sense Your City dataset, loaded via `csv` and processed into JavaScript `Date` and numeric values.

Jjimdb8687
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example displays one week of temperature data for cities worldwide, using a multi-line chart with a color legend. The visualization plots time on the x-axis and temperature on the y-axis for each city, with lines sorted by final value. It uses d3.csv to load data, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 for color mapping, d3.line with curveBasis for smoothing, d3.nest for grouping, and d3.axisLeft/axisBottom for axes. Data comes from Data Canvas - Sense Your City, rendered as SVG with a multiply blend mode.

IIvan Ivanov
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart shows one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth curved line, colored via an ordinal scale, with a legend positioned on the right. Built with D3 v5 in SVG, it uses `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest` to group data by city, and `axisBottom`/`axisLeft` for axes. The chart sorts cities by their final temperature value, with axis gridlines and a title.

JJosh2903
95% 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. 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)
95% 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
95% match