Skip to main content
SimilarExport ZIP
100%

D3 Line Chart with Multiple Lines

✓ Published1🌍 Public
CCarloGato
Last edited Dec 17, 2019
Created on Dec 17, 2019

This visualization displays city temperature trends over time as a multi-series line chart titled “Temp Around the World.” It plots temperature readings (y-axis) against timestamps (x-axis) for multiple cities, with each city distinguished by color from a categorical color scale. Built with D3 v5, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.lineGenerator` with `d3.curveBasis` for smoothed paths, `d3.nest` to group data by city, and a custom legend component. The interactive SVG renders the data from a CSV file sourced from data-canvas-sense-your-city-one-week.

AI-generated description
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
94% 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…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius for multiple cities around the world, sourced from the Data Canvas - Sense Your City dataset. Each city is represented by a smooth, colored line, with a color legend identifying the cities and their final temperature values. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and `line` with `curveBasis` to generate the paths. The SVG output includes grid lines and labeled axes for time and temperature.

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

Line Chart with Multiple Lines

This line chart displays one week of global temperatures across multiple cities, using colored lines to compare trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data by city and `d3.line` with `curveBasis` for smooth paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom color legend maps city names using `d3.scaleOrdinal` with `schemeCategory10`. Temperature data is loaded from a CSV file sourced from Data Canvas - Sense Your City.

Bbattlescarredshogun
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius across multiple global cities, with each city represented by a colored line. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature axes, while d3.nest groups the data by city for individual line paths generated with d3.line and curveBasis. A custom colorLegend component renders the categorical color scale using d3.scaleOrdinal. The data comes from Data Canvas - Sense Your City, and the SVG rendering includes gridlines, axis labels, and a title.

Aajaykumar2014
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, colored line from the d3 category10 scale, with a color legend and labeled axes for time and temperature. The visualization is built with d3.v5, using `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest`, and SVG rendering. The data is loaded from a CSV file and parsed before plotting.

Nnorangai
90% 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
90% match