Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
RRamin Melikov
Last edited Oct 5, 2020
Created on Oct 5, 2020

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.

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

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line over time. The visualization includes axes with labels, a legend showing city names, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest` to group data by city, and a `line` generator with `curveBasis` for smooth paths. Data comes from Data Canvas - Sense Your City, rendered as SVG with custom axis styling and a color legend component.

Rrintisch
96% match
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
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

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
96% 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
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

A line chart displays a week of temperature readings (in Celsius) for multiple cities, sourced from Data Canvas – Sense Your City. Each city has its own colored path, rendered as smooth curves using `d3.line` with `curveBasis`, and a legend built via a custom `colorLegend` function. Axes use `axisBottom` and `axisLeft` with grid lines, while data is nested by city using `d3.nest` and sorted by final temperature. The visualization is implemented with D3 v5 and SVG, featuring a title and axis labels.

CCurran Kelleher
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature data from multiple cities, ordered by their final recorded values. The visualization uses D3 v5 with SVG rendering. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `d3.nest` to group data by city. A custom color legend communicates the city categories, while `d3.axisBottom` and `d3.axisLeft` generate the labeled gridlines. Data originates from the Data Canvas-Sense Your City dataset.

KKazushige Okuma
95% match