Temperature in multiple cities

100%

Temperature in multiple cities

✓ Published0🌍 Public

Last edited Jun 1, 2020

Created on Jun 1, 2020

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature trends for multiple cities over time, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.nest to group data by city. SVG rendering includes gridlines via axis tick marks, while d3.scaleOrdinal with schemeCategory10 assigns line colors.

Eedxiao97

91% match

Loading thumbnail…

Temperature in multiple cities

This visualization shows population trends over time for multiple cities. A line chart displays each city’s population as a colored line, with a color legend identifying them. A vertical line marks the currently selected year, and moving the mouse across the chart updates that selection. The code builds the SVG using D3 v5, employing `d3.scaleOrdinal` with `schemeCategory10` for colors, `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveBasis` for smoothing, and `d3.mouse` for interaction. Data is loaded from a CSV file using `d3.csv`.

Ssafdarawan

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

90% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

CCarloGato

89% match

Loading thumbnail…

Multiple line Chart

This visualization displays temperature trends over time for multiple cities, with each city represented by a distinct colored line and labeled in a legend. The lines are smoothed using `curveBasis` and data is grouped by city via `d3.nest()`, while axes and scales are built with `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The color scale uses `d3.scaleOrdinal` with `schemeCategory10`, and the SVG rendering includes styled grid lines and a title. Data is loaded as CSV from an external URL.

AAjit Singh

88% match