Multi-line chart

100%

Multi-line chart

✓ Published0🌍 Public

Last edited Feb 17, 2020

Created on Feb 17, 2020

A multi-line chart displays a week of worldwide temperature readings per city, with each city’s time series drawn as a smooth basis curve. The visualization uses React to render SVG elements, while D3 v5 handles scales, axes, and the `d3.nest()` grouping of data by city. Animated color legend circles appear via a custom `colourLegend` component, and the chart applies a categorical color scale with semi-transparent paths for overlapping lines. Temperature data is loaded from a remote CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-line chart

A multi-line chart displays weekly temperature trends for multiple cities, with each city rendered as a distinct colored line sorted by its final temperature value. The visualization uses React for component structure and D3 v5 for data binding, scales, and axes, with SVG paths generated by the `line` generator using `curveBasis`. A legend is added via a custom `colourLegend` component, and city colors come from `schemeCategory10`. Data is loaded from a CSV file, with axes featuring gridlines and a title indicating the time period.

AApollox01

95% match

Loading thumbnail…

Multi-line chart

This multi-line chart displays a week of global temperature readings across multiple cities, using color-coded lines to distinguish each location. The visualization is built with React and D3 v5, rendering SVG paths with smooth curves via `d3.line` and `curveBasis`. The data, loaded from a CSV file, is processed with `d3.nest`, while axes and scales are created using `d3.axisLeft`, `d3.axisBottom`, `scaleTime`, and `scaleLinear`. A custom color legend, driven by `scaleOrdinal` and `schemeCategory10`, animates with `transition().duration(1000)`.

TTural Novruzov

95% match

Loading thumbnail…

Multi-line chart

This example visualizes the changing temperature across multiple cities over a week, using time on the x-axis and temperature on the y-axis. Each city is represented by a distinct colored line, with a legend identifying each city. Built with React and D3.v5, the chart renders as an SVG using `line` and `curveBasis` for smooth paths, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is loaded via `csv` from a remote source, and the legend is generated using a custom `colourLegend` function.

JJoseph Popoola

92% 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…

Temperature - Linechart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line over time. The chart includes axes labeled "Time" and "Temperature," a title, and a color legend identifying each city. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.nest` to group by city, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` with `curveBasis` for smooth paths. Axis ticks are styled with grid lines, and lines use `mix-blend-mode: multiply` for overlap.

AAnShed

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

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

88% match

Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata

87% match