Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
HHanseul Lee
Last edited Aug 5, 2022
Created on Aug 3, 2022

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, are rendered using SVG paths with a basis curve, mapping timestamps to a time scale and temperatures to a linear scale. The chart uses d3.nest, d3.scaleOrdinal, and d3.schemeCategory10, with axes generated by d3.axisBottom and d3.axisLeft. A color legend is added via a custom component, and lines are layered with mix-blend-mode for visual distinction.

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

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.scaleTime and d3.scaleLinear axes with a d3.line generator and curveBasis to draw smooth paths, colored by city via d3.scaleOrdinal. A custom colorLegend component renders the categorical legend. The SVG is rendered with d3.nest to group data by city, and axes include tick marks and labels.

DDino
97% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays a week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render multiple lines in SVG, with each line representing a city. The code constructs time and linear scales for the axes, and applies a curve basis smoothing to the line paths. It also includes a custom color legend component and sorts the city lines in descending order based on their final temperature value.

DDaniel Tkach
96% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This chart displays a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City, with each city represented by a differently colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by city, and d3.line with curveBasis for smooth line generation. A custom colorLegend component renders the scale, while axis labels and a title complement the SVG rendering.

GGerasimos Katsagannis
96% 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 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
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 presents one week of temperature data from cities worldwide, sourced from the Data Canvas - Sense Your City project. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 to map timestamps, temperatures, and cities. Multiple paths are drawn with d3.line and curveBasis, colored by city, and sorted by final temperature. A custom colorLegend module displays the city labels, while styled axes and gridlines enhance readability in the SVG rendering.

DDennis Angelov
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
95% match