Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Iinu231
Last edited Nov 6, 2019
Created on Nov 6, 2019

This visualization displays a week of temperature readings from multiple cities around the world as smooth, overlapping line charts. The chart sorts cities by their final temperature values and uses a color legend to distinguish them. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A mouseover interaction uses a `bisector` to find the nearest data point and displays a tooltip with the timestamp and temperature. The data comes from a CSV file loaded via `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

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

Line Chart with Multiple Lines

A multi-line chart shows temperature readings from multiple cities over one week, using color-coded paths to distinguish each city. The visualization includes a custom color legend and interactive mouse tracking that displays tooltips with the exact timestamp and temperature at the cursor position. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line`, and `curveBasis` to structure the data and render SVG paths. The data comes from a CSV file loaded via `csv`, with axes generated using `axisBottom` and `axisLeft`.

Iinu231
94% 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
94% 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
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

JJef
94% match
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 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
94% match
Loading thumbnail…

Line Chart with multiple lines

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.

MMatthiasVanCampen
93% match