Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Cchandanagandla
Last edited Apr 8, 2023
Created on Apr 8, 2023

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.

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

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.nest grouping measurements by city and d3.line with curveBasis generating smooth paths for each city’s temperature trend. A d3.scaleOrdinal with schemeCategory10 assigns colors, and a custom colorLegend component renders city labels. The SVG output includes gridlines, axis labels, and a title, with semi-transparent lines blended via mix-blend-mode for overlapping series.

RRochisman Datta
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart shows one week of temperature readings in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with a schemeCategory10 palette to map each city to a distinct colored line, rendered as smooth curves via d3.line with curveBasis. A custom colorLegend component positions circles and labels beside the chart. The SVG rendering includes axes with tick marks, axis labels, and a title, with lines using mix-blend-mode for readability.

DDamon Young
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with a color legend on the right and a title above the chart. The visualization uses d3.csv to load data, d3.nest to group by city, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. It includes axis labels, grid lines, and rendered as SVG with mix-blend-mode for overlapping strokes.

GGriffin Wimminger
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data (in Celsius) for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a smoothed colored line, with an ordinal color scale and legend ordering cities by their final temperature values. The visualization uses d3.csv to load data, d3.nest and d3.scaleOrdinal for grouping and coloring, and d3.line with curveBasis to generate the SVG paths. Axis labels and a title are rendered with d3.axisBottom and d3.axisLeft, while a custom colorLegend module draws the legend circles and text.

Lleahfurn
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 line chart shows one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and cities to visual channels. Multiple city lines are rendered as SVG paths via d3.line with a curveBasis interpolation, sorted by their last temperature value, and accompanied by a custom color legend. Axes are drawn with d3.axisBottom and d3.axisLeft, with gridlines and labels styled through CSS.

Aangelathacker123
96% match