Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published2🌍 Public
EEllednera
Last edited Nov 20, 2020
Created on Nov 5, 2020

This line chart displays a week of temperature readings from multiple cities around the world, with each city represented by a distinct colored line plotted over time. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. The data comes from a CSV file loaded via `d3.csv` and rendered with custom axes, grid lines, and a title.

AI-generated description

This dataset can also be found at https://vizhub.com/curran/datasets/temperature-in-san-francisco.csv

Video: https://youtu.be/xFI-us1moj0?t=915 Color legend:

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature data for multiple cities around the world, with each city represented by a smooth, color-coded line. The chart is rendered as an SVG using D3 v5, with axes, gridlines, and a color legend positioned to the right. Data is loaded from a CSV using `d3.csv` and processed with `d3.nest` to group measurements by city. The lines are generated with `d3.line` and `curveBasis`, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` handle scaling and colors. The dataset originates from the Data Canvas - Sense Your City project.

SSourav Sarker
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding legend. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis smooths the paths. Data is loaded via d3.csv from an external dataset, and the SVG is rendered with axes, grid lines, and labels styled through CSS.

NNkwachi Abel
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data across multiple cities worldwide, with each city represented by a distinct colored line plotted over time. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, while d3.line with curveBasis generates the smoothed paths. A nested data structure organizes measurements by city, and a custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The chart includes gridlines, axis labels, and a title, with data loaded from a CSV file.

Ssafdarawan
96% match
Loading thumbnail…

Line chart with multiple lines

A line chart displays a week of temperature readings for multiple cities, with each city’s time series drawn as a distinct colored line and a color legend identifying each one. The chart uses D3’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `d3.line` with `curveBasis` for path generation, and `d3.nest` to group data by city. The SVG rendering includes axes with gridlines, and data is loaded via `d3.csv`.

Aarieltonglet
96% match
Loading thumbnail…

Line Chart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line to reveal comparative trends. The chart uses a time-scaled x-axis, a linear temperature y-axis, and an ordinal color scale, with a custom legend displayed on the right. The code relies on d3.csv, d3.nest, d3.line with d3.curveBasis, and d3.axisBottom/axisLeft to render the SVG. Data is loaded from an external CSV file containing timestamp and temperature values, with gridlines drawn through tick sizing and stroke styling.

MMatthiasVanCampen
96% match