Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Ssarahdays
Last edited May 26, 2020
Created on May 26, 2020

A line chart plots daily temperatures for a week across multiple cities, with each city drawn as a colored line and labeled in a legend to the right. The visualization uses D3 v5 to load CSV data, create time and linear scales with `scaleTime` and `scaleLinear`, and generate paths with a `line` generator using `curveBasis`. Axis labels and a title clarify the chart, while `colorLegend` renders the city labels. Data originates from the Sense Your City project.

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…

Line chart with multiple lines

A line chart displays one week of temperature data for multiple cities, with each city represented by a colored line. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time and temperature, while `nest()` groups the data by city and `line()` with `curveBasis` smooths each series. Color-coded lines are sorted by their final temperature values, and a custom `colorLegend` function renders a categorical legend. The data originates from Data Canvas - Sense Your City, showing temperatures in Celsius.

Jjlspangl
95% match
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
95% match
Loading thumbnail…

Line chart with multiple lines

A line chart displays a week of temperature readings for multiple cities, with each city represented by a colored line and a legend identifying its color. The visualization uses D3.js scales and axes (d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom) with a d3.line generator and curveBasis for smoothing. Data comes from a CSV file loaded via d3.csv, and city colors are assigned using d3.scaleOrdinal with schemeCategory10. The chart is rendered as SVG with grid lines and labeled axes.

Ssafdarawan
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov
94% match
Loading thumbnail…

LineChart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file, and the chart is drawn as SVG with a title and a custom color legend.

Ccornshoots
94% 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
94% 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
94% 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
94% match