Temperature across cities

100%

Temperature across cities

✓ Published1🌍 Public

Last edited Jul 20, 2020

Created on Jul 20, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

91% match

Loading thumbnail…

Temperature of Multiple Cities

This visualization displays temperature trends across multiple cities over time, with each city represented by a distinct colored line. The data comes from a CSV file and is rendered using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and a line generator with `curveBasis`. A custom color legend, positioned on the right, maps city names to their line colors via `colorLegend` function. The chart includes gridlines, axis titles, and a main title, all rendered as SVG elements with CSS styling for typography and line appearance.

Hhxc20060903

90% match

Loading thumbnail…

Temperature in multiple cities

This example shows temperature trends over time for multiple cities, with each city represented as a colored line and sorted by its final value. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for city colors. A custom colorLegend component renders the legend, while d3.nest groups the CSV data by city. The SVG rendering includes grid lines via axis tick sizing and a mix-blend-mode for overlapping lines.

Ssafdarawan

90% match

Loading thumbnail…

Temperature in multiple cities Line Chart

A line chart displays a week of temperature readings across multiple cities, with each city rendered as a distinct colored path sorted by its final temperature. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. A custom colorLegend component generates the ordinal color scale legend, while SVG rendering includes labeled axes and a title.

HHasideluxe

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

89% match

Loading thumbnail…

Multi-line chart

This example visualizes the changing temperature across multiple cities over a week, using time on the x-axis and temperature on the y-axis. Each city is represented by a distinct colored line, with a legend identifying each city. Built with React and D3.v5, the chart renders as an SVG using `line` and `curveBasis` for smooth paths, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is loaded via `csv` from a remote source, and the legend is generated using a custom `colourLegend` function.

JJoseph Popoola

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