Testing | 2008-2016

100%

Testing | 2008-2016

✓ Published0🌍 Public

Last edited Aug 7, 2020

Created on Aug 7, 2020

Forked from Line Chart with Multiple Lines

A multi-line chart displays daily temperature readings in Celsius for multiple cities over one week, with each city distinguished by color and a legend identifying them. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, and `nest` to group data by city. Data comes from the Data Canvas – Sense Your City dataset, loaded via `csv` and rendered as SVG paths with a color legend built from a custom `colorLegend` module.

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…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata

88% match

Loading thumbnail…

Line Chart with Multiple Lines

This interactive line chart displays one week of temperature readings in Celsius for multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses `d3.line` with `curveBasis` to create smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `schemeCategory10` for color assignment. A custom `colorLegend` module renders the city key, while data parsing and nesting rely on `d3.csv` and `d3.nest` to group readings by city. The SVG output includes grid lines, axis labels, and a title.

TTylerWoodby16

87% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Ssleyus

87% match

Loading thumbnail…

Several City Chart

A week of temperature readings for several cities is displayed as overlapping, semi-transparent lines on a time-series chart, with a color legend identifying each city. The lines are ordered by their final temperature values using `d3.nest()` and a descending sort. The visualization uses D3 v5 with SVG rendering, including `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line` with a basis curve, and axis components. Data is loaded from a CSV via `d3.csv` and formatted with `new Date` and numeric conversion.

Ssuperstark02

86% match

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

86% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render the labeled axes with grid lines. A `colorLegend` function, built with SVG circles and text, maps city names to a `schemeCategory10` palette. The data originates from Data Canvas - Sense Your City, and the chart emphasizes final temperature values by sorting city lines in descending order.

AAmirah Syafiqah

86% match

Loading thumbnail…

City Temperatures

This visualization displays one week of temperature data for multiple cities, using color-coded line paths to distinguish each city’s trends over time. The chart includes a dropdown selector to choose which data attribute to explore, alongside a color legend for city identification. Built with D3 v5, it uses `d3.csv` for data loading, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleTime` and `d3.scaleLinear` for axes. A `nest()` operation groups measurements by city, and the SVG rendering includes styled grid lines and axis labels.

Rrigt

86% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows one week of temperature readings in cities worldwide, sourced from Data Canvas - Sense Your City. It plots temperature over time for multiple cities, with each city assigned a unique color from the d3.schemeCategory10 palette and a legend generated via a custom colorLegend component. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, and d3.line with curveBasis for smooth curves. Data is loaded via d3.csv, parsed with timestamps converted to Date objects, and rendered as SVG paths with mix-blend-mode styling.

AAegon95

86% match