Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Ssiim1
Last edited Nov 3, 2018
Created on Nov 3, 2018

This visualization displays temperature readings across multiple global cities over a one-week period, using a multi-line chart with smooth curves to emphasize comparative trends. Each city receives a distinct color, identified through a legend positioned to the right of the plot. The implementation relies on D3 v5's scaling, axis, and line generator APIs, with data parsed from a CSV source. The rendering uses SVG paths with semi-transparent strokes and a curve-basis interpolation. The chart sorts cities by their final temperature values, adding a subtle comparative layer to the visualization.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities worldwide, using a multiline chart to compare trends over time in degrees Celsius. Each city’s temperature series is drawn as a distinct colored path, with a color legend identifying the cities. The chart is built with D3 v5, using scales and axes for time and temperature, and the `line` generator with `curveBasis` for smoothing. Data is loaded from a CSV, parsed, and nested by city, with rendering handled via SVG.

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

Line Chart with Multiple Lines

This visualization displays one week of temperature readings for cities worldwide, with each city represented by a smooth, semi-transparent line. The chart uses d3.line with curveBasis to generate paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend uses exported functions from colorLegend.js. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv, with nested grouping via d3.nest to separate city series.

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

Line Chart with multiple lines

This line chart displays temperature readings from cities around the world over a one-week period, with each city represented by a colored line. The visualization uses D3 v5, rendering SVG paths with a spline curve (`curveBasis`) and a categorical color scale (`scaleOrdinal` with `schemeCategory10`). A legend, generated via a custom `colorLegend` component, identifies each city. The data comes from the Data Canvas Sense Your City project, loaded with `csv()`, and the chart includes labeled axes and a title.

MMunTatt Yap
94% match