Skip to main content
SimilarExport ZIP
100%

CPSC 436V Week 6 - Multiline Chart

✓ Published1🌍 Public
JJordan Chiu
Last edited Feb 13, 2020
Created on Feb 13, 2020

This example visualizes one week of temperature readings from cities around the world, plotting each city as a distinct colored line over time. The chart uses d3.scaleTime, d3.scaleLinear, and d3.line with curveBasis to create smooth paths, while d3.nest groups data by city. A color legend, built with a custom colorLegend function, orders entries by each line’s final temperature value. The rendered SVG includes styled axes with gridlines, a title, and axis labels, drawing from a CSV dataset loaded via d3.csv.

AI-generated description

Tutorial from YouTube

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

Line Chart - Multiple Lines

This line chart displays one week of temperature data from multiple cities, with a color legend identifying each city and a title reading “A Week of Temperature Around the World.” The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth path generation, and d3.nest to group data by city. D3’s ordinal color scale assigns category colors to each line. The chart includes grid lines from axis ticks and uses SVG rendering, with data sourced from Data Canvas - Sense Your City.

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

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple cities, with each city represented by a distinct colored line. The chart uses d3.line with curveBasis for smooth curves, d3.scaleTime for the time axis, d3.scaleLinear for temperature, and d3.scaleOrdinal with schemeCategory10 for city colors. Data is loaded via d3.csv from the Data Canvas - Sense Your City dataset, parsed into timestamp and temperature values, then nested by city using d3.nest. A custom colorLegend module renders the legend, while the chart includes axis labels, gridlines, and a title.

AAziz Jaffrey
86% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render the labeled axes with grid lines. A `colorLegend` function, built with SVG circles and text, maps city names to a `schemeCategory10` palette. The data originates from Data Canvas - Sense Your City, and the chart emphasizes final temperature values by sorting city lines in descending order.

AAmirah Syafiqah
86% match
Loading thumbnail…

Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas – Sense Your City. Each line represents a city, colored via a categorical scale, with a legend and axes labeled for time and temperature. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group by city. The SVG rendering includes gridlines, a title, and smooth curved paths.

LLittledevil7
85% match