Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Hhberrong
Last edited Feb 23, 2021
Created on Feb 19, 2021

This line chart displays one week of temperature data in degrees Celsius for multiple cities, sourced from Data Canvas - Sense Your City, with each city represented by a colored line over time. The chart uses D3 v5 APIs including `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeCategory10`, `d3.line` with `curveBasis`, `d3.nest`, and `d3.axisLeft`/`d3.axisBottom` to render axes with gridlines. The SVG rendering includes a title, axis labels, and semi-transparent overlapping lines via `mix-blend-mode: multiply`.

AI-generated description

This line chart 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 in degrees Celsius from multiple cities, sourced from Data Canvas - Sense Your City. A colored line represents each city, with a color legend on the right identifying them. The chart uses D3's `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. Axes feature gridlines and labels, rendered as SVG, with a title and legend included.

Ffbudwill
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 the Data Canvas - Sense Your City project. The visualization uses D3 v5 to render smooth, curving lines (via `curveBasis`) for each city, with an ordinal color scale (`schemeCategory10`) and embedded color legend. The chart leverages `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for labeled axes, with a title and axis labels included. Data is loaded from a provided CSV file using `csv` and parsed into nested groups by city.

Eec13000ibm
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 line represents a city, with time on the x-axis and temperature on the y-axis, using a basis curve for smooth paths and a color legend to identify cities. The visualization is built with D3 v5, rendering as SVG, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, `d3.nest`, and `d3.schemeCategory10` for color mapping. Gridlines and axis labels provide context, while paths are styled with mix-blend-mode for overlapping lines.

Gglimpsedchaos
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 around the world, sourced from the Data Canvas - Sense Your City dataset. Each city appears as a distinct colored line, with a color legend positioned to the right. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to structure the data by city. Multiple lines are rendered as SVG paths with a multiply blend mode for overlapping strokes.

Aandrewtran1991
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city appears as a distinct colored line, with a color legend positioned to the right. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to structure the data by city. Multiple lines are rendered as SVG paths with a multiply blend mode for overlapping strokes.

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