Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published1🌍 Public
JJaswitha09
Last edited Nov 28, 2021
Created on Nov 28, 2021

This chart visualizes a week of temperature data from cities worldwide, using a line chart with multiple colored lines to compare temperature trends over time. It displays time on the x-axis and temperature in degrees Celsius on the y-axis, with each city represented by a distinct color from the `scaleOrdinal` and `schemeCategory10` palette. The visualization uses `d3.line` with `curveBasis` for smoothing and includes a color legend generated by a custom `colorLegend` function. Data is loaded via `d3.csv` from the Data Canvas - Sense Your City dataset and rendered as SVG.

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

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature readings in Celsius for cities worldwide, using data from the Data Canvas - Sense Your City dataset. The chart plots timestamps on the x-axis against temperatures on the y-axis, with each city represented by a distinct colored line from the d3.schemeCategory10 palette. Built with d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and a custom colorLegend module, it renders smooth curves via d3.line with curveBasis. A sorted legend and gridlined axes, created with d3.axisLeft and d3.axisBottom, complete the SVG output.

Rrpadron8
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, respectively, while d3.line and d3.curveBasis generate smooth paths for each city's temperature trend. The chart includes axes with tick marks, a color legend, and a title, with the SVG rendered directly on the page.

Ddasari234
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 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
96% match