Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published2🌍 Public
Nnorangai
Last edited Nov 1, 2019
Created on Nov 1, 2019

This line chart visualizes one week of temperature data from Data Canvas - Sense Your City across multiple global cities. It shows time on the x-axis, temperature in degrees Celsius on the y-axis, and encodes city as color, with lines sorted by their final temperature value. The visualization uses d3.scaleLinear, d3.scaleTime, d3.scaleOrdinal, d3.line, and d3.curveBasis to render a smooth path for each city. A custom color legend, rendered as an SVG group, is positioned in the upper-right corner using the colorLegend function.

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 visualizes one week of temperature data in degrees Celsius across multiple global cities, sourced from Data Canvas - Sense Your City. The chart displays time on the x-axis and temperature on the y-axis, with each city represented by a distinct colored line using a categorical color scale. The visualization is rendered as an SVG using D3 v5, employing d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest for grouping data by city. A color legend is generated through a custom function that maps city names to their corresponding line colors.

Ccliffng
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This 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, sorted by final temperature, with a legend showing city names. The visualization uses d3-scale for time and linear axes, d3-shape’s line generator with curveBasis smoothing, and d3-scaleOrdinal with schemeCategory10 for colors. Rendering employs SVG within a d3.v5 setup, including axis components and custom color legend logic.

Mmgrundell
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with a legend identifying the cities and a title summarizing the time period. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest for grouping. Axes are rendered with d3.axisBottom and d3.axisLeft, while the custom colorLegend component displays the categorical scale.

Wwinniepooh520
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, using data from the Data Canvas - Sense Your City project. Each city appears as a distinct colored line, with a color legend on the right and standard axes labeled "Time" and "Temperature." The visualization uses d3.csv for data loading, d3.nest to group readings by city, and d3.line with curveBasis to generate smooth paths. A d3.scaleTime and d3.scaleLinear map the timestamps and temperatures to x and y positions, while an ordinal color scale assigns hues from schemeCategory10.

Nnkohdatavis
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, using data from the Data Canvas - Sense Your City project. Each city appears as a distinct colored line, with a color legend on the right and standard axes labeled "Time" and "Temperature." The visualization uses d3.csv for data loading, d3.nest to group readings by city, and d3.line with curveBasis to generate smooth paths. A d3.scaleTime and d3.scaleLinear map the timestamps and temperatures to x and y positions, while an ordinal color scale assigns hues from schemeCategory10.

Nnkohdatavis
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas – Sense Your City. Multiple colored lines represent different cities, sorted by their final temperature values, with a color legend identifying each series. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city categories, while d3.line with curveBasis generates smooth paths. Axes are rendered via d3.axisBottom and d3.axisLeft, with d3.nest grouping the data by city.

OOday4
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 a week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, colored line from the d3 category10 scale, with a color legend and labeled axes for time and temperature. The visualization is built with d3.v5, using `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest`, and SVG rendering. The data is loaded from a CSV file and parsed before plotting.

Nnorangai
96% match