Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
BBiki Deka
Last edited Nov 30, 2020
Created on Nov 30, 2020

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.

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

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus
97% match
Loading thumbnail…

Line Chart with Multiple Lines

A 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, with a color legend and axes labeled "Time" and "Temperature." The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest()`, and `line()` with `curveBasis` to draw smooth paths. It renders to SVG, includes gridlines via `axisLeft` and `axisBottom`, and employs `mix-blend-mode: multiply` for overlapping lines.

Aashpradhan01123
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
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
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius for multiple cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city is represented by a smooth, colored line, with a color legend identifying the cities and their final temperature values. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and `line` with `curveBasis` to generate the paths. The SVG output includes grid lines and labeled axes for time and temperature.

Eec13000ibm
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius across multiple global cities, with each city represented by a colored line. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature axes, while d3.nest groups the data by city for individual line paths generated with d3.line and curveBasis. A custom colorLegend component renders the categorical color scale using d3.scaleOrdinal. The data comes from Data Canvas - Sense Your City, and the SVG rendering includes gridlines, axis labels, and a title.

Aajaykumar2014
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas – Sense Your City. Each line represents a city, colored via a categorical scale, with a legend and axes labeled for time and temperature. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group by city. The SVG rendering includes gridlines, a title, and smooth curved paths.

LLittledevil7
96% match