Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
DDamon Young
Last edited Jun 5, 2023
Created on Jun 5, 2023

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.

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

Fork of Line Chart with Multiple Lines

This fork of a line chart displays one week of temperature data in Celsius for various global cities, sourced from Data Canvas - Sense Your City. The visualization encodes time on the x-axis and temperature on the y-axis, with each city represented by a colored line using d3.curveBasis for smoothing. It employs d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with the schemeCategory10 palette, drawing axes via d3.axisBottom and d3.axisLeft. A custom colorLegend function renders the categorical legend, while the SVG rendering includes styled grid lines and titles.

DDi Cui
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart shows one week of temperature readings in Celsius for cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a smoothed, semi-transparent line with a corresponding color legend. The visualization employs d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft to render SVG paths and axes, with a custom colorLegend module.

AAdriana Rodriguez Sanabria
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes one week of temperature data in degrees Celsius for cities worldwide, sourced from the Data Canvas "Sense Your City" project. It uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with a categorical color scheme to distinguish cities. Curves are generated with `d3.line` and `d3.curveBasis`, while a custom `colorLegend` function adds an interactive legend. The SVG rendering relies on `axisBottom` and `axisLeft` for gridlines, with nested data grouped via `d3.nest`.

JJan Medina
96% match