Skip to main content
SimilarExport ZIP
100%

D3 Line Chart with Multiple Lines

✓ Published0🌍 Public
JJunilo Pagobo
Last edited Dec 23, 2019
Created on Dec 23, 2019

This example displays temperature readings from multiple cities over time as smoothed, multi-hued lines, with a color legend identifying each city. It uses the D3 v5 library, building the chart with SVG and relying on `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data. Data is loaded from a CSV file, and lines are generated using `line` with `curveBasis`, while axes use `axisBottom` and `axisLeft`. The visualization also employs a custom `colorLegend` function to render the categorical color key.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

CCarloGato
94% match
Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization shows temperature trends across multiple cities over a one-week period, using a multi-line chart with a categorical color scheme and a custom color legend. D3’s `scaleTime` and `scaleLinear` map timestamps and temperature values to SVG coordinates, while `line()` with `curveBasis` creates smooth paths for each city. The code uses `nest()` to group data by city, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom`/`axisLeft` for axes with gridlines. Data loads from a CSV file via `d3.csv`, and a custom `colorLegend` component renders the legend.

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

D3 Course 13: Line Chart with Multiple Lines

This line chart displays temperature readings over time across multiple cities, with each city represented by a distinct colored line and a sorted color legend. The visualization uses D3 v5 APIs including `d3.nest()` to group data by city, `d3.line()` with `curveBasis` for smooth paths, and `scaleOrdinal` with `schemeCategory10` for colors. Data loads from a CSV file containing one week of sensor measurements. The chart applies blended stroke modes and rounded line caps for aesthetic distinction.

GGabrz
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This example shows the temperature in five cities over a week, with each city as a separate smoothed line and a categorical color legend identifying them. The lines are plotted using D3 v5’s `line` generator with `curveBasis`, and the axes are built with `axisBottom` and `axisLeft`. Data is loaded from a CSV via `csv`, nested by city using `nest`, and rendered as SVG paths with a `mix-blend-mode` for overlapping strokes.

CCarloWK1202
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding legend. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis smooths the paths. Data is loaded via d3.csv from an external dataset, and the SVG is rendered with axes, grid lines, and labels styled through CSS.

NNkwachi Abel
91% match
Loading thumbnail…

Multiple lines

This example visualizes a week of temperature readings from multiple cities using multiple colored lines, with a legend identifying each city. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `nest()` to group data by city, and `line()` with `curveBasis` for smooth paths. A categorical color scale assigns distinct strokes, and a custom `colorLegend` function renders the legend. Data is loaded from a CSV file via `d3.csv`, with axes from `axisBottom` and `axisLeft`.

RRoger Yu-Hsiang Lo
90% match
Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays city temperature trends over time as a multi-series line chart titled “Temp Around the World.” It plots temperature readings (y-axis) against timestamps (x-axis) for multiple cities, with each city distinguished by color from a categorical color scale. Built with D3 v5, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.lineGenerator` with `d3.curveBasis` for smoothed paths, `d3.nest` to group data by city, and a custom legend component. The interactive SVG renders the data from a CSV file sourced from data-canvas-sense-your-city-one-week.

CCarloGato
90% match