Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Line Chart with Multiple Lines

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

This line chart displays one week of temperature readings in degrees Celsius for multiple cities, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, multi-hued line, with a color-coded legend on the right. The visualization uses D3 version 5, employing `scaleTime` and `scaleLinear` for the axes, `nest` to group data by city, and a Bézier curve for line generation. The chart is rendered as an SVG, featuring a titled y-axis, labeled axes, and a legend created via a custom `colorLegend` module.

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 Fork of Line Chart with Multiple Lines

This line chart shows a week of temperature data in degrees Celsius for multiple cities around the world, using data from Data Canvas - Sense Your City. Each city is represented by a separate smoothed line, with a color legend positioned on the right. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes axis labels, a title, and a custom colorLegend component.

Jjwadh
97% match
Loading thumbnail…

Fork of Fork of Fork of Line Chart with Multiple Lines

A multi-line chart displays one week of temperature data from Data Canvas - Sense Your City, plotting temperatures in Celsius over time for multiple cities. Each city appears as a separate smoothed line, colored via d3.scaleOrdinal with schemeCategory10 and sorted by final temperature. The visualization uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.nest to structure the data. A color legend built with a custom function, axis labels, and gridlines rendered as SVG complete the chart.

JJaswitha09
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature readings in degrees Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. It plots each city’s temperature over time as a smooth line using d3.line with curveBasis, while nesting data by city via d3.nest and ordering lines by their final value using d3.descending. The SVG render includes d3.axisBottom and d3.axisLeft, a d3.scaleOrdinal color scale based on schemeCategory10, and a custom color legend module.

IIlayaraja R
96% match
Loading thumbnail…

Fork of 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 colored line, with a legend showing city names and a title above the chart. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city colors, while d3.line with curveBasis generates smooth paths. Nesting via d3.nest groups data by city, and the code includes custom axis labels and a reusable color legend component, all rendered as SVG.

Cchandanagandla
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 line chart displays one week of temperature data (in degrees Celsius) for cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with time on the x-axis and temperature on the y-axis, sorted by each city's final temperature reading. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line, d3.curveBasis, d3.nest, and d3.axisBottom/axisLeft to render the chart and its axes. A custom colorLegend function draws the categorical legend, and the SVG output includes styled grid lines and labels.

Jjwadh
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5’s `line`, `curveBasis`, and `nest` functions to draw smooth, multi-line paths, with a categorical color scale and custom color legend. SVG rendering includes grid lines via `axisLeft` and `axisBottom`, and the chart is sorted by each city’s last temperature value.

Jjudeluka
96% match
Loading thumbnail…

Fork of 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. It uses d3.nest to group readings by city, then draws smoothed multi-line paths with d3.line and curveBasis, colored via a d3.scaleOrdinal with schemeCategory10. The visualization includes axes with gridlines, a color legend built from a custom colorLegend function, and axis labels. Rendering is SVG-based, with d3.axisBottom and d3.axisLeft for ticks, and d3.scaleTime and d3.scaleLinear for spatial mapping.

SShweta-tech
96% match