Fork of Line Chart with Multiple Lines

100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Aug 20, 2021

Created on Aug 20, 2021

Forked from Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, using distinct colored lines for each city and a color legend for identification. It is rendered as an SVG using D3 v5, with the code employing `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, and `d3.nest`. The `d3.axisLeft` and `d3.axisBottom` create labeled axes, while a custom `colorLegend` function generates the interactive legend.

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 for cities around the world, sourced from the Data Canvas - Sense Your City initiative. Each colored line represents a city, with dots marking individual readings and a color legend identifying each series. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `curveBasis`, and `axisLeft`/`axisBottom` to render the SVG. Data is loaded via `csv` and processed from a linked GitHub dataset, while custom axes, gridlines, and a title are generated programmatically.

GGerasimos Katsagannis

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 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

97% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data in cities worldwide, sourced from Data Canvas – Sense Your City. Each colored line represents a city, with a legend using `d3.scaleOrdinal` and `schemeCategory10` to distinguish them. The chart uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for smooth paths. D3 v5 renders the SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and `d3.nest` groups data by city for plotting.

Eendlesstory

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 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

97% 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

97% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, with d3.line and curveBasis generating smooth paths. The chart renders in SVG and includes a custom colorLegend function for city labels. Data is loaded via d3.csv, and axes are created with d3.axisBottom and d3.axisLeft.

Ppurplemaestro

97% match