Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Nnataliaokuneva
Last edited Jul 27, 2019
Created on Jul 27, 2019

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, with temperature on the y-axis and time on the x-axis. The code uses d3’s `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to create smooth, colored paths with `nest().key()` for grouping. A custom `colorLegend` function renders the categorical color scale, while `mix-blend-mode: multiply` gives overlapping lines a blended appearance.

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 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 from cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

BBen Rambo-Martin
97% 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
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. Multiple lines, each representing a different city, use a color-coded legend to distinguish them. The visualization employs D3.js v5, specifically using `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for smoothing the paths, and `scaleOrdinal` with `schemeCategory10` for colors. The nested data is sorted and rendered as SVG paths.

CClaudio Caldeirão
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render an SVG with a time-based x-axis and linear y-axis. Cities are color-coded via the `scaleOrdinal` and `schemeCategory10` APIs, with a custom legend built from `colorLegend`. The `nest` function groups data by city, while `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` generate the smoothed paths.

NNiall O'Brien
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. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth, semi-transparent temperature trends per city. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend module generates the interactive legend. d3.nest groups measurements by city, while axis labels and a title are added as SVG text elements.

Bbattlescarredshogun
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. It uses D3.js v5 with SVG rendering to draw multiple colored lines, each representing a city's temperature over time. The code employs `d3.scaleTime` for the time axis, `d3.scaleLinear` for temperature, and `d3.line` with `curveBasis` for smooth paths. A separate color legend, created via nested selections, identifies each city. The chart includes axis labels and a title, with data loaded from a CSV file.

LLittledevil7
96% 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