Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
DDhanraj Bhosale
Last edited Oct 19, 2022
Created on Oct 19, 2022

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.

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 visualization shows a week of temperature data for cities around the world, with each city represented by a colored line plotted against time and temperature axes. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10 to map data values, while d3.line with curveBasis generates the smoothed paths. A custom colorLegend displays the city names, and the data comes from the Data Canvas - Sense Your City project, loaded from a CSV file. The SVG rendering includes axis labels, grid lines, and a title, with the line paths styled using mix-blend-mode for visual distinction.

Bbindhureddy98
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 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.

Mmaavwin
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
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Eendlesstory
96% match