Line Chart With Multiple Lines

100%

Line Chart With Multiple Lines

✓ Published0🌍 Public

Last edited Sep 25, 2020

Created on Sep 21, 2020

This example displays a line chart tracking temperature over time across multiple worldwide cities, using data from Curran’s senseYourCity dataset. Multiple colored lines show each city’s temperature trend, with a time-scaled x-axis and linear temperature y-axis. The visualization uses React with d3.scaleTime, d3.scaleLinear, d3.line, and d3.curveNatural to generate smooth SVG paths, alongside custom AxisBottom and AxisLeft components for ticks and labels.

AI-generated description

Some Temperature data collected from an assortment of worldwide cities, data provided by [Curran]https://github.com/curran/data/blob/gh-pages/senseYourCity/day.csv).

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Eedxiao97

90% match

Loading thumbnail…

Line Chart with multiple Lines

A line chart displays one week of temperature readings from multiple cities, with each city represented by a separate smoothed line and distinguished by color from the categorical color scale. The chart includes labeled axes for time and temperature, a title, and a color legend listing city names. The visualization is built with React and D3 v5, using d3.line with curveBasis, scaleTime, scaleLinear, scaleOrdinal, and d3.nest to group data. Temperature data comes from the Data Canvas Sense Your City project, rendered as SVG paths with axis components from d3.axis.

PPeter S

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius across multiple global cities, with each city represented by a colored line. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature axes, while d3.nest groups the data by city for individual line paths generated with d3.line and curveBasis. A custom colorLegend component renders the categorical color scale using d3.scaleOrdinal. The data comes from Data Canvas - Sense Your City, and the SVG rendering includes gridlines, axis labels, and a title.

Aajaykumar2014

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses D3 v5’s scaleTime, scaleLinear, and line generators with a curveBasis to create smooth paths, while nest() groups data by city and sorts lines by their final temperature value. SVG rendering handles the axes, gridlines, and labels, with the data loaded from a CSV file via d3.csv.

Vvic126

89% match

Loading thumbnail…

Line Chart with Multiple Lines with D3.js!

This visualization displays a week of temperature data from multiple cities worldwide, using distinct colored lines to represent each city’s temperature changes over time. Built with React and D3.js (v5), it employs scales like `scaleTime` and `scaleLinear`, a `line` generator with `curveBasis`, and nested data via `nest` to group readings by city. A custom `colorLegend` component renders the legend. The data originates from Data Canvas – Sense Your City, presented as an SVG.

Fforcox43

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius for multiple cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city is represented by a smooth, colored line, with a color legend identifying the cities and their final temperature values. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and `line` with `curveBasis` to generate the paths. The SVG output includes grid lines and labeled axes for time and temperature.

Eec13000ibm

88% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, colored line from the d3 category10 scale, with a color legend and labeled axes for time and temperature. The visualization is built with d3.v5, using `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest`, and SVG rendering. The data is loaded from a CSV file and parsed before plotting.

Nnorangai

88% match

Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays a week of temperature readings (in Celsius) for multiple cities, sourced from Data Canvas – Sense Your City. Each city has its own colored path, rendered as smooth curves using `d3.line` with `curveBasis`, and a legend built via a custom `colorLegend` function. Axes use `axisBottom` and `axisLeft` with grid lines, while data is nested by city using `d3.nest` and sorted by final temperature. The visualization is implemented with D3 v5 and SVG, featuring a title and axis labels.

CCurran Kelleher

88% match