Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published1🌍 Public

Last edited Nov 27, 2019

Created on Nov 27, 2019

Forked from 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.

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

98% 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 for cities around the world, sourced from Data Canvas - Sense Your City. Each city appears as a smooth curve, colored by a categorical scale and sorted by its final temperature. The visualization uses D3 v5 with SVG rendering, employing `d3.line` with `curveBasis`, `d3.nest` for grouping, and `scaleTime`/`scaleLinear` for axes, plus a custom color legend component.

Mmartvdmarel

97% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. It displays multiple lines, each representing a city's temperature fluctuations over time. The chart uses D3 v5 functions including `scaleTime`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line`, and `curveBasis`. The visualization applies a `nest` operation to group data by city, with lines colored using `schemeCategory10`. The rendering includes a color legend and labeled axes, all drawn using SVG.

PPrithwi Raj

97% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. Each smooth, colored line represents a different city’s temperature over time, with an ordinal color scale and a legend function defined in a separate module. The visualization uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data by city. The SVG rendering includes axis labels, a title, and gridlines styled via CSS.

Ddanhuijia

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

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

Nnataliaokuneva

97% match