Skip to main content
SimilarExport ZIP
100%

D3 Course 13: Line Chart with Multiple Lines

✓ Published1🌍 Public
GGabrz
Last edited May 13, 2020
Created on May 13, 2020

This line chart displays temperature readings over time across multiple cities, with each city represented by a distinct colored line and a sorted color legend. The visualization uses D3 v5 APIs including `d3.nest()` to group data by city, `d3.line()` with `curveBasis` for smooth paths, and `scaleOrdinal` with `schemeCategory10` for colors. Data loads from a CSV file containing one week of sensor measurements. The chart applies blended stroke modes and rounded line caps for aesthetic distinction.

AI-generated description

Data Visualization with D3 course; Line Chart with Multiple Lines

<h3>Line Chart with Multiple Lines</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Using d3.nest</b></li> <li><b>Rendering multiple lines</b></li> <li><b>Making lines different colors</b></li> <li><b>Aesthetics: line caps, blending modes</b></li> <li><b>Adding a color legend</b></li> <li><b>Sorting the color legend to match lines</b></li> </ul> </td> </tr> </table>
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

CCarloGato
91% match
Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization shows temperature trends across multiple cities over a one-week period, using a multi-line chart with a categorical color scheme and a custom color legend. D3’s `scaleTime` and `scaleLinear` map timestamps and temperature values to SVG coordinates, while `line()` with `curveBasis` creates smooth paths for each city. The code uses `nest()` to group data by city, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom`/`axisLeft` for axes with gridlines. Data loads from a CSV file via `d3.csv`, and a custom `colorLegend` component renders the legend.

Rrdeichert
91% match
Loading thumbnail…

D3 Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over time as smoothed, multi-hued lines, with a color legend identifying each city. It uses the D3 v5 library, building the chart with SVG and relying on `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data. Data is loaded from a CSV file, and lines are generated using `line` with `curveBasis`, while axes use `axisBottom` and `axisLeft`. The visualization also employs a custom `colorLegend` function to render the categorical color key.

JJunilo Pagobo
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line from the d3.schemeCategory10 scale. The visualization uses d3.nest() to group data by city and d3.line() with curveBasis to create smooth paths, while d3.scaleTime() and d3.scaleLinear() map timestamps and temperatures to the SVG canvas. A custom colorLegend module renders the city labels, and the chart includes gridlines from axisBottom and axisLeft with tick marks. The data comes from a CSV file containing hourly temperature observations.

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

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Eedxiao97
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov
89% 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
89% match