Skip to main content
SimilarExport ZIP
100%

Line chart with multiple lines

✓ Published0🌍 Public
Jjlspangl
Last edited Oct 13, 2021
Created on Oct 13, 2021

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.

AI-generated description

This scatter plot shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

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

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

A line chart displays a week of temperature readings in Celsius for cities worldwide, with each city’s data as a distinct colored line. The visualization prioritizes readability by ordering lines by their final temperature value and using semi-transparent strokes. It uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `nest()` to group data by city, and a custom color legend module. Data comes from the Data Canvas - Sense Your City dataset, rendered as an SVG with axis labels and a title.

BBiki Deka
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render the labeled axes with grid lines. A `colorLegend` function, built with SVG circles and text, maps city names to a `schemeCategory10` palette. The data originates from Data Canvas - Sense Your City, and the chart emphasizes final temperature values by sorting city lines in descending order.

AAmirah Syafiqah
96% match
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 cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, ordered by final temperature. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A custom `colorLegend` component renders the city labels, while SVG rendering applies `mix-blend-mode: multiply` to overlapping strokes.

Ccyanea1
96% match