Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published2🌍 Public
KKazushige Okuma
Last edited Sep 30, 2019
Created on Sep 30, 2019

A line chart displays one week of temperature data from multiple cities, ordered by their final recorded values. The visualization uses D3 v5 with SVG rendering. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `d3.nest` to group data by city. A custom color legend communicates the city categories, while `d3.axisBottom` and `d3.axisLeft` generate the labeled gridlines. Data originates from the Data Canvas-Sense Your City dataset.

AI-generated description

This Line Chart shows one week of temprature in San Francisco city. Data comes from [Data Canvas- Sense your city] https://archive.ics.uci.edu/ml/datasets/auto+mpg

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities worldwide, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line()` with `curveBasis`, and `nest()` to group measurements by city. The SVG rendering features gridlines, axis labels, and a title, with the data sourced from Data Canvas - Sense Your City and loaded as CSV. Lines are sorted by their final temperature value for comparison.

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

Line Chart with Multiple Lines

A 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, ordered by final temperature. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A custom `colorLegend` component renders the city labels, while SVG rendering applies `mix-blend-mode: multiply` to overlapping strokes.

Ccyanea1
96% match
Loading thumbnail…

Line chart with multiple lines

This line chart displays one week of temperature data from multiple cities, with each city represented by a distinct colored line from the d3 schemeCategory10 scale. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group measurements by city. A custom colorLegend function renders the categorical color keys, while d3.axisLeft and d3.axisBottom create labeled axes with gridlines. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv and rendered as SVG elements.

TThomas Seberechts
96% match
Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays one week of temperature data for multiple cities around the world, with each city represented by a smooth, color-coded line. The chart is rendered as an SVG using D3 v5, with axes, gridlines, and a color legend positioned to the right. Data is loaded from a CSV using `d3.csv` and processed with `d3.nest` to group measurements by city. The lines are generated with `d3.line` and `curveBasis`, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` handle scaling and colors. The dataset originates from the Data Canvas - Sense Your City project.

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

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. It uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, with d3.nest grouping the data. Rendered as SVG, the chart includes d3.axisBottom and d3.axisLeft with grid lines, and a color legend built via a custom function. Lines are drawn with d3.line using curveBasis, and styled with translucent strokes that blend via CSS mix-blend-mode.

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