Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Nnorangai
Last edited Nov 1, 2019
Created on Nov 1, 2019

The visualization displays a week of temperature readings from multiple global cities as a multi-series line chart, with each city represented by a distinct colored line derived from the D3 `schemeCategory10` ordinal scale. It uses D3 v5’s `scaleTime` and `scaleLinear` for the time and temperature axes, and constructs the smooth curves via `line()` with `curveBasis`. The data is loaded from a CSV dataset provided by Data Canvas - Sense Your City, and a custom `colorLegend` component annotates the city names.

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…

Line Chart with Multiple Lines

This line chart displays a week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth, colored line from the d3 category10 scale, with a color legend and labeled axes for time and temperature. The visualization is built with d3.v5, using `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest`, and SVG rendering. The data is loaded from a CSV file and parsed before plotting.

Nnorangai
96% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes one week of temperature data from Data Canvas - Sense Your City across multiple global cities. It shows time on the x-axis, temperature in degrees Celsius on the y-axis, and encodes city as color, with lines sorted by their final temperature value. The visualization uses d3.scaleLinear, d3.scaleTime, d3.scaleOrdinal, d3.line, and d3.curveBasis to render a smooth path for each city. A custom color legend, rendered as an SVG group, is positioned in the upper-right corner using the colorLegend function.

Nnorangai
95% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays one week of temperature readings for cities worldwide, with each city represented by a smooth, semi-transparent line. The chart uses d3.line with curveBasis to generate paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend uses exported functions from colorLegend.js. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv, with nested grouping via d3.nest to separate city series.

Hhuankoh
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data (in degrees Celsius) for multiple cities worldwide, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5 to render smooth, curving lines (via `curveBasis`) for each city, with an ordinal color scale (`schemeCategory10`) and embedded color legend. The chart leverages `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for labeled axes, with a title and axis labels included. Data is loaded from a provided CSV file using `csv` and parsed into nested groups by city.

Eec13000ibm
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

A line chart displays one week of temperature readings in Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.line with curveBasis to create smooth paths per city, colored via an ordinal scale from schemeCategory10, and includes axes with gridlines, labels, and a color legend. It relies on d3.csv for data loading, scaleTime and scaleLinear for scales, nest() for grouping by city, and a custom colorLegend module, all rendered as SVG elements with d3.v5.

Iishmam11
94% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. Each line represents a city, color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and plotted over time with `d3.scaleTime` and `d3.scaleLinear`. The visualization uses `d3.line` with `curveBasis` for smooth curves, `d3.nest` to group data by city, and a custom `colorLegend` function rendered as SVG. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with gridlines and a title, all styled through the SVG.

BBen Rambo-Martin
94% match
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
94% match