Skip to main content
SimilarExport ZIP
100%

City Temperatures

✓ Published0🌍 Public
Rrigt
Last edited Oct 16, 2018
Created on Oct 15, 2018

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.

AI-generated description

Data

MIT Licensed

Similar vizzes

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
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…

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

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jjeelong
89% match
Loading thumbnail…

Temperature in multiple cities

Multiple city temperature trends are visualized as colored line paths over time, with a legend identifying each city and sorting them by final temperature value. The D3.js v5 code uses `nest()` to group data by city, `scaleTime` and `scaleLinear` for axes, and `line().curve(curveBasis)` for smooth paths. A color legend is built with a custom reusable component, while gridlines and axis labels support reading the temperature and time scales. The data comes from a CSV file of one week of city weather observations.

JJacob van Lingen
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
89% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings for multiple cities over a one-week period, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A color legend, built from `scaleOrdinal` with `schemeCategory10`, identifies each line. The SVG rendering includes axis labels, a title, and grid lines. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates.

Ssafdarawan
88% 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
88% match