A Week of Temperatures Around the World

100%

A Week of Temperatures Around the World

✓ Published5🌍 Public

Last edited Jan 3, 2020

Created on Dec 28, 2019

This visualization displays temperature readings for a week, using a line chart to show how temperatures change over time for a set of cities. The chart uses time on the x-axis and temperature on the y-axis, with each city assigned a distinct color from a sequential color scale. The visualization is built with D3 version 5, specifically using `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with a curve basis to smooth the data. A legend showing the color-to-city mapping is rendered via a custom `colorLegend` component, and the project is structured as a React application that loads data from a CSV file.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

A Week of Temperatures Around the World Various Lines Chart

This line chart displays one week of temperature readings in Celsius across multiple cities, with each city represented as a distinct colored line. The visualization uses a nested data grouping to organize city series and sorts them by their final temperature value. Built with d3 v5, the code employs scaleTime and scaleLinear for axes, a line generator with curveBasis for smooth paths, and an ordinal color scale from schemeCategory10. The visualization renders to SVG and pulls its data from the Data Canvas - Sense Your City dataset.

GGonzalo Montañés

91% match

Loading thumbnail…

Temperatures of Cities

This visualization displays temperature measurements from cities around the world over a one-week period. Multicolored line paths represent each city's temperature fluctuation over time, with a color legend positioned at the right identifying each city. The chart includes gridlines and labeled time and temperature axes. Built with React and D3 v6, the example uses `scaleTime` and `scaleLinear` for scaling, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from a CSV file loaded via `csv()`, and the SVG rendering employs the declarative selection API.

MMatthew Rubino

90% match

Loading thumbnail…

Temperature - Linechart with multiple lines

This visualization shows a week of temperature readings from multiple cities, with each city represented as a colored line over time. The chart includes axes labeled "Time" and "Temperature," a title, and a color legend identifying each city. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.nest` to group by city, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` with `curveBasis` for smooth paths. Axis ticks are styled with grid lines, and lines use `mix-blend-mode: multiply` for overlap.

AAnShed

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

87% match

Loading thumbnail…

Temperature across cities

This example visualizes temperature variations across multiple cities over a one-week period, with each city represented as a distinct colored line. The chart displays time on the x-axis and temperature on the y-axis, and includes a color legend identifying each city. Data is loaded from a CSV file using `d3.csv`. The visualization uses `d3.line` with `curveBasis` to generate smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors. A custom `colorLegend` component provides the interactive legend, and the rendering uses SVG with animated transitions on legend updates.

BB Sundaresan

86% match

Loading thumbnail…

A Week of Temperature

A Week of Temperature displays temperature readings from multiple cities over a single week using multi-line time series. Colored lines, generated by the `line` generator with `curveBasis` smoothing, show temperature trends, while an ordinal color scale with a custom legend distinguishes cities. The chart employs `scaleTime` and `scaleLinear` for axes, with data loaded via `csv` from a Curran dataset. Gridlines and rotated axis labels clarify temporal and temperature values.

Aala-wahibi

86% match

Loading thumbnail…

Line Chart - Multiple Lines

This line chart displays one week of temperature data from multiple cities, with a color legend identifying each city and a title reading “A Week of Temperature Around the World.” The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth path generation, and d3.nest to group data by city. D3’s ordinal color scale assigns category colors to each line. The chart includes grid lines from axis ticks and uses SVG rendering, with data sourced from Data Canvas - Sense Your City.

Ggabcoderboi

85% match

Loading thumbnail…

Line Chart with Multiple Lines with D3.js!

This visualization displays a week of temperature data from multiple cities worldwide, using distinct colored lines to represent each city’s temperature changes over time. Built with React and D3.js (v5), it employs scales like `scaleTime` and `scaleLinear`, a `line` generator with `curveBasis`, and nested data via `nest` to group readings by city. A custom `colorLegend` component renders the legend. The data originates from Data Canvas – Sense Your City, presented as an SVG.

Fforcox43

85% match