Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published1🌍 Public

Last edited Sep 24, 2020

Created on Sep 24, 2020

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

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

98% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings from cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with the legend sorted by final temperature values. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis for smoothing, and d3.nest for grouping data by city. SVG rendering includes custom axis labels, a title, and a color legend built from d3.scaleOrdinal with schemeCategory10.

KKevinw97

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

98% 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. Multiple colored lines represent different cities, sorted by their final temperature values, with a color legend identifying each series. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city categories, while d3.line with curveBasis generates smooth paths. Axes are rendered via d3.axisBottom and d3.axisLeft, with d3.nest grouping the data by city.

OOday4

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 line represents a city’s temperature over time, distinguished by color, with a legend to identify cities. The chart uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest to group data by city. Axes are rendered with d3.axisBottom and d3.axisLeft. A custom colorLegend function creates the SVG legend.

MMikePowar

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 in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with a legend identifying the cities and a title summarizing the time period. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, and d3.nest for grouping. Axes are rendered with d3.axisBottom and d3.axisLeft, while the custom colorLegend component displays the categorical scale.

Wwinniepooh520

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