multi series line chart

100%

multi series line chart

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This multi-series line chart visualizes daily weather trends for temperature, humidity, and pressure over a 200-day synthetic period. Three colored lines display the temporal patterns of each variable, accompanied by axes, gridlines, and a legend. The example uses D3 v7 APIs including `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering SVG paths within a React component. The code generates randomized sinusoidal data, demonstrating how multiple time series can be overlaid with distinct stroke colors and compared on a shared value scale.

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

83% match

Loading thumbnail…

Line Chart and bar chart

This example combines bars and a line chart to compare two related variables across a time series. It visualizes humidity as light blue bars on the left y-axis and temperature as a red line on the right y-axis, with a legend, gridlines, and axis labels for each scale. The chart renders synthetic sine-wave data in an SVG using d3.scaleLinear for both axes, d3.axisBottom, d3.axisLeft, and d3.axisRight for ticks, and d3.line for the temperature path. A React version loads student performance data via d3.tsv, groups records into intervals, and plots average study time as bars against average absences as a line.

Ssairathan.p045@gmail.com

81% match

Loading thumbnail…

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

SShane Carey

81% match

Loading thumbnail…

Multi-line chart

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.

AAnkit

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

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

81% match

Loading thumbnail…

Multi Line Chart

This multi-line chart displays three data series (A, B, C) over a two-week period in July–August 2019, plotting daily measurement values. Each series is rendered as a distinct colored path with different dash patterns, accompanied by end-of-line labels. The visualization uses D3 v5 with an SVG viewBox for responsive scaling, d3.scaleTime and d3.scaleLinear for axes, d3.line with default curve interpolation for paths, and d3.axisLeft/axisBottom for gridlines. Data comes from an inline CSV file.

Nneetusingla12(Neetu Singla)

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

80% match