Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Mmaavwin
Last edited Mar 8, 2021
Created on Mar 8, 2021

This visualization displays a week of temperature measurements from cities worldwide, sourced from the Data Canvas - Sense Your City dataset. It plots multiple lines, one per city, using a basis curve to smooth the temperature trends over time. The chart is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line()` with `curveBasis` for the paths, and `nest()` to group data by city. A color legend is rendered via a custom `colorLegend` component, while axis labels and grid lines are styled with CSS.

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…

Fork of Line Chart with Multiple Lines

This line chart visualizes a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses D3 v5 to render multiple smoothed lines, one per city, with a color-coded legend. It employs `scaleTime` and `scaleLinear` for axes, `nest` to group data by city, and `curveBasis` for line smoothing. The SVG rendering includes a title, axis labels, and a custom color legend, with city lines sorted by their final temperature values.

JJspring42
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smoothly curved line, with a color legend on the right helping to identify them. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` to generate the paths, `d3.scaleTime` and `d3.scaleLinear` for the axes, and a custom `colorLegend` module to render the SVG legend.

Bbosonfor
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smoothly curved line, with a color legend on the right helping to identify them. Built with D3 v5, the visualization uses `d3.line` with `curveBasis` to generate the paths, `d3.scaleTime` and `d3.scaleLinear` for the axes, and a custom `colorLegend` module to render the SVG legend.

Bbosonfor
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

PPiotr Paszek
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

PPiotr Paszek
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature readings across multiple global cities, using smooth curved lines to compare trends over time and a color legend to distinguish each city. The data comes from Data Canvas - Sense Your City, plotted on an SVG canvas with D3 v7. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.line` with `curveBasis` to generate the paths. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while a custom `colorLegend` function maps city names to colors.

DDhanraj Bhosale
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows one week of temperature data from cities worldwide, with each city represented by a distinct colored line on a time-series chart. The lines are smoothed using `curveBasis`, and the legend displays city names in the order of their final temperature values. The chart uses d3's `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to structure the data, with axes rendered via `axisBottom` and `axisLeft`. The color legend is built through a reusable function that appends circles and text. The data comes from Data Canvas - Sense Your City.

YYasara Peiris
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This chart displays a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City, with each city represented by a differently colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by city, and d3.line with curveBasis for smooth line generation. A custom colorLegend component renders the scale, while axis labels and a title complement the SVG rendering.

GGerasimos Katsagannis
96% match