Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published1🌍 Public
CCarloWK1202
Last edited Aug 5, 2022
Created on Aug 5, 2022

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.

AI-generated description

Temperature in San Fransico Line Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Aannadehtiarova
94% 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
93% 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 distinct colored line. The visualization uses D3 v5 with SVG rendering to draw the lines, employing `d3.csv` for data loading, `d3.nest` to group readings by city, and `d3.line` with `curveBasis` for smooth paths. Temperature values are converted from Celsius to Fahrenheit before plotting. A color legend, axis labels, and a title accompany the chart, with gridlines and semi-transparent blended line strokes enhancing readability.

Jjlongwellchc
93% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load the dataset, d3.nest to group records by city, and d3.line with curveBasis to generate smooth paths. Axes are created with d3.axisBottom and d3.axisLeft, while the ordinal color scale uses d3.schemeCategory10. The chart renders as SVG with grid lines and a simplified custom legend.

Zzhangfa
93% 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
93% match
Loading thumbnail…

LineChart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file, and the chart is drawn as SVG with a title and a custom color legend.

Ccornshoots
92% match
Loading thumbnail…

Line Chart with Multiple Lines

This example shows a week of temperature readings for multiple cities, with each city represented as a separate colored line plotted over time. The chart includes a color legend, labeled axes, and a title, with lines sorted by their final temperature values. It uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `line` with `curveBasis` for path generation, and `nest` to group data by city. Temperature data is loaded from a CSV file and rendered as an SVG with axis and legend components.

Ssameer1986
92% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
92% match