Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
CClaudio Caldeirão
Last edited May 15, 2020
Created on May 15, 2020

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.

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 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 for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a differently colored line, with a color legend identifying the cities. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title, with d3.axisBottom and d3.axisLeft generating the ticks.

OOliver Wills
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. 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
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

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. Temperature is plotted over time with distinct colored lines for each city, and a color legend identifies which line corresponds to which location. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, `nest` to group data by city, and `line` with `curveBasis` for smoothed paths.

Ssayli-lab
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 from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef
97% match