Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
AAmirah Syafiqah
Last edited Oct 12, 2020
Created on Oct 12, 2020

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.

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 one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City, with each line representing a different city. The visualization aggregates the data using a nested hierarchy and renders the result as SVG paths, with color encoding to distinguish between cities. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to process the data, while `axisBottom`, `axisLeft`, and a custom `colorLegend` module handle the axes and legend. The chart includes a time-based x-axis, a linear y-axis, and a categorical color scale with a legend.

Uu148
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for multiple cities worldwide, with each city represented by a colored line and a categorical legend. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. Data comes from Data Canvas - Sense Your City, rendered as SVG with a color legend built from d3.scaleOrdinal and schemeCategory10. The chart includes gridlines from axis ticks and a title.

KKarkG
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 is represented by a distinct colored line, with a legend positioned to the right. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, respectively. Lines are generated with `d3.line` and `curveBasis` smoothing, while axes are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV and nested by city using `d3.nest`.

Bbattlescarredshogun
97% 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
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
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple world cities, with each city represented by a distinct colored line. The visualization uses D3 v5’s scaleTime, scaleLinear, scaleOrdinal, and nest to group data by city, while a line generator with curveBasis smooths each temperature trend. A color legend, rendered via a custom colorLegend module, identifies the cities. The data comes from the Data Canvas - Sense Your City dataset, loaded as CSV, and the chart is drawn as SVG with gridlines and axis labels.

JJosé
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for multiple cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented as a separate colored line, with a legend identifying the cities, and the chart includes labeled time and temperature axes. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. Axes are generated with `axisBottom` and `axisLeft`, while a custom `colorLegend` function renders the color-coded legend.

Mmyskotima130
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. It uses d3.csv to load the dataset, with d3.scaleTime and d3.scaleLinear for the axes, and d3.nest to group readings by city. Multiple lines are rendered using d3.line with a curveBasis interpolation, while d3.scaleOrdinal assigns categorical colors. A custom colorLegend function generates the city legend, and d3.axisBottom and d3.axisLeft create gridlines.

Sssatabdwi
97% match