Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
Aangelathacker123
Last edited Feb 26, 2022
Created on Feb 21, 2022

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.

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 from cities worldwide, sourced from the Data Canvas - Sense Your City project. Using d3.csv to load data and d3.nest to group by city, the visualization renders multiple temperature trends over time with d3.line, applying a curved basis interpolation. The chart includes custom axes with d3.axisLeft and d3.axisBottom, a categorical color scale using d3.scaleOrdinal with schemeCategory10, and a legend generated from a separate colorLegend function. The SVG output features semi-transparent lines with mix-blend-mode for overlapping clarity.

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

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It renders multiple smoothed lines using d3.line with curveBasis, colored by city via d3.scaleOrdinal and schemeCategory10. The visualization includes time and temperature axes with gridlines, a color legend, and a title. Data is parsed from CSV using d3.csv, with nested grouping via d3.nest.

RRochisman Datta
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 displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with a legend showing city names, and lines are sorted by their final temperature value. The chart includes labeled axes for time and temperature, plus a title, using a two-dimensional SVG rendering. The implementation uses d3.csv for data loading, d3.nest for grouping, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with curveBasis for path generation, axisLeft and axisBottom for axes, and a custom colorLegend function.

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