Skip to main content
SimilarExport ZIP
100%

Line Chart with multiple lines

✓ Published1🌍 Public
MMatthiasVanCampen
Last edited Feb 20, 2020
Created on Feb 14, 2020

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line to reveal comparative trends. The chart uses a time-scaled x-axis, a linear temperature y-axis, and an ordinal color scale, with a custom legend displayed on the right. The code relies on d3.csv, d3.nest, d3.line with d3.curveBasis, and d3.axisBottom/axisLeft to render the SVG. Data is loaded from an external CSV file containing timestamp and temperature values, with gridlines drawn through tick sizing and stroke styling.

AI-generated description

This data comes from my own idea about how interesting different visualisation techniques can be in order to get an amazing Project Visualisation dashboard.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, using color to distinguish each city's time series. The visualization is rendered as an SVG using D3 v5, with a time-based x-axis and linear temperature scale. The code applies a basis curve to smooth the lines, nests the data by city, and includes a categorical color legend. Data is loaded from a CSV of global temperature measurements.

KKarkG
96% 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
96% 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
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities around the world, with each city represented by a distinct colored line plotted over time. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. The data comes from a CSV file loaded via `d3.csv` and rendered with custom axes, grid lines, and a title.

EEllednera
96% match
Loading thumbnail…

Line chart with multiple lines

A line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses d3.nest to group data by city, d3.line with curveBasis for smooth paths, and d3.scaleOrdinal with schemeCategory10 for color mapping. Data comes from a CSV file loaded via d3.csv, rendered as SVG with axes from d3.axisLeft and d3.axisBottom.

MMauradion
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature readings for multiple cities, with each city represented by a colored line that conveys its temperature trend over time. A legend identifies the color associated with each city. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group the CSV data by city. d3.scaleOrdinal with schemeCategory10 assigns colors, while custom legend and axis components are built using SVG.

ZZ-Richard
96% 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
95% 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
95% match