Skip to main content
SimilarExport ZIP
100%

Line Chart with multiple Lines

✓ Published1🌍 Public
PPeter S
Last edited Oct 5, 2019
Created on Sep 17, 2019

A line chart displays one week of temperature readings from multiple cities, with each city represented by a separate smoothed line and distinguished by color from the categorical color scale. The chart includes labeled axes for time and temperature, a title, and a color legend listing city names. The visualization is built with React and D3 v5, using d3.line with curveBasis, scaleTime, scaleLinear, scaleOrdinal, and d3.nest to group data. Temperature data comes from the Data Canvas Sense Your City project, rendered as SVG paths with axis components from d3.axis.

AI-generated description

An example showing the one week Temperature from San Francisco. The data comes form here

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses D3 v5’s scaleTime, scaleLinear, and line generators with a curveBasis to create smooth paths, while nest() groups data by city and sorts lines by their final temperature value. SVG rendering handles the axes, gridlines, and labels, with the data loaded from a CSV file via d3.csv.

Vvic126
95% match
Loading thumbnail…

Line chart with multiple lines

A line chart displays one week of temperature data for multiple cities, with each city represented by a colored line. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time and temperature, while `nest()` groups the data by city and `line()` with `curveBasis` smooths each series. Color-coded lines are sorted by their final temperature values, and a custom `colorLegend` function renders a categorical legend. The data originates from Data Canvas - Sense Your City, showing temperatures in Celsius.

Jjlspangl
94% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature readings across multiple global cities, with each city represented by a distinct colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by city, and d3.line with curveBasis for smooth paths. A d3.scaleOrdinal with schemeCategory10 handles color encoding, while an interactive color legend explains city assignments. The chart includes axis labels, a title, and a legend, rendering data from the Data Canvas - Sense Your City dataset.

Wwishcsdev
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis generates the smoothed paths. Data is nested by city using d3.nest and sorted by final value. The chart includes labeled axes and a title, rendered as SVG with elements created via d3 selections.

BBhojarajHG
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature readings in degrees Celsius for multiple cities, with each city represented by a colored line. The data comes from the Data Canvas - Sense Your City project. Using d3.line with curveBasis, the chart smooths the temperature trends over time, while d3.scaleTime and d3.scaleLinear map timestamps and temperatures to the SVG canvas. A color legend built with a custom d3 module and d3.scaleOrdinal helps identify each city, and axis labels clarify the time and temperature scales.

AAleksandr
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line over time. The visualization includes axes with labels, a legend showing city names, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest` to group data by city, and a `line` generator with `curveBasis` for smooth paths. Data comes from Data Canvas - Sense Your City, rendered as SVG with custom axis styling and a color legend component.

Rrintisch
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple cities, with each city represented by a distinct colored line. The chart uses d3.line with curveBasis for smooth curves, d3.scaleTime for the time axis, d3.scaleLinear for temperature, and d3.scaleOrdinal with schemeCategory10 for city colors. Data is loaded via d3.csv from the Data Canvas - Sense Your City dataset, parsed into timestamp and temperature values, then nested by city using d3.nest. A custom colorLegend module renders the legend, while the chart includes axis labels, gridlines, and a title.

AAziz Jaffrey
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. A d3.nest() groups the data by city, with d3.scaleTime() and d3.scaleLinear() mapping time and temperature, while d3.line() with curveBasis smooths each city's temperature trend. The chart uses d3.axisLeft and d3.axisBottom with gridlines, and a custom colorLegend function renders categorical colors via d3.scaleOrdinal. SVG rendering with mix-blend-mode multiply overlays the lines, and the visualization concludes with a title reflecting the global scope.

Ssteveaigbe
94% match