Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
TTylerWoodby16
Last edited Nov 29, 2020
Created on Nov 29, 2020

This interactive line chart displays one week of temperature readings in Celsius for multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses `d3.line` with `curveBasis` to create smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `schemeCategory10` for color assignment. A custom `colorLegend` module renders the city key, while data parsing and nesting rely on `d3.csv` and `d3.nest` to group readings by city. The SVG output includes grid lines, axis labels, and a title.

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

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Iishmam11
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data (in degrees Celsius) for multiple cities worldwide, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5 to render smooth, curving lines (via `curveBasis`) for each city, with an ordinal color scale (`schemeCategory10`) and embedded color legend. The chart leverages `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for labeled axes, with a title and axis labels included. Data is loaded from a provided CSV file using `csv` and parsed into nested groups by city.

Eec13000ibm
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth, semi-transparent temperature trends per city. Colors are assigned via d3.scaleOrdinal with schemeCategory10, and a custom colorLegend module generates the interactive legend. d3.nest groups measurements by city, while axis labels and a title are added as SVG text elements.

Bbattlescarredshogun
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius from multiple cities around the world, using data from Data Canvas - Sense Your City. Each city appears as a separate smooth curve, colored via a categorical scale, with a legend positioned to the right. The visualization is built with D3 v5, using `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for path generation, and `d3.nest` to group readings by city. An ordinal color scale assigns distinct hues, and a custom color legend renders circles and labels.

SSourav Sarker
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

BBen Rambo-Martin
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with a legend positioned to the right. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, respectively. Lines are generated with `d3.line` and `curveBasis` smoothing, while axes are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV and nested by city using `d3.nest`.

Bbattlescarredshogun
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays a week of temperature readings (in Celsius) for multiple cities, sourced from Data Canvas – Sense Your City. Each city has its own colored path, rendered as smooth curves using `d3.line` with `curveBasis`, and a legend built via a custom `colorLegend` function. Axes use `axisBottom` and `axisLeft` with grid lines, while data is nested by city using `d3.nest` and sorted by final temperature. The visualization is implemented with D3 v5 and SVG, featuring a title and axis labels.

CCurran Kelleher
96% match