Skip to main content
SimilarExport ZIP
100%

Multi-line chart

✓ Published3🌍 Public
JJoseph Popoola
Last edited Feb 17, 2020
Created on Feb 17, 2020

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.

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
94% 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
93% 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
92% 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
91% match
Loading thumbnail…

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jjeelong
90% 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 example visualizes a week of temperature readings from multiple cities around the world as a multi-line chart. The visualization uses D3 v5 to render SVG paths, with color distinguishing each city via a categorical color scale. Temperature data is loaded from a CSV, and axes are drawn using D3’s `axisLeft` and `axisBottom` functions. A legend, built with a custom `colorLegend` module, maps each color to its city. The lines use a basis curve and a multiply blend mode to handle overlapping strokes.

YYedrup
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