Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited Nov 12, 2019

Created on Nov 12, 2019

Forked from Line Chart with Multiple Lines

This line chart displays weekly temperature readings across multiple cities, with each colored line representing a different city’s production season. It uses D3 v5 with nested data grouping via `d3.nest()` and renders SVG paths generated by `d3.line()` with a basis curve. The chart includes axes from `d3.axisBottom` and `d3.axisLeft`, and a custom color legend built with `scaleOrdinal` and `schemeCategory10`. Data comes from the Data Canvas - Sense Your City dataset, loaded as CSV.

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 temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov

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

92% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Aannadehtiarova

92% match

Loading thumbnail…

Line Chart with Multiple Lines

A line chart displays a week of temperature readings (in Celsius) for multiple cities, sourced from Data Canvas – Sense Your City. Each city has its own colored path, rendered as smooth curves using `d3.line` with `curveBasis`, and a legend built via a custom `colorLegend` function. Axes use `axisBottom` and `axisLeft` with grid lines, while data is nested by city using `d3.nest` and sorted by final temperature. The visualization is implemented with D3 v5 and SVG, featuring a title and axis labels.

CCurran Kelleher

92% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render an SVG with a time-based x-axis and linear y-axis. Cities are color-coded via the `scaleOrdinal` and `schemeCategory10` APIs, with a custom legend built from `colorLegend`. The `nest` function groups data by city, while `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` generate the smoothed paths.

NNiall O'Brien

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

92% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of global temperatures across multiple cities, using colored lines to compare trends over time. The visualization uses D3 v5 with SVG rendering, employing `d3.nest` to group data by city and `d3.line` with `curveBasis` for smooth paths. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom color legend maps city names using `d3.scaleOrdinal` with `schemeCategory10`. Temperature data is loaded from a CSV file sourced from Data Canvas - Sense Your City.

Bbattlescarredshogun

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

91% match