Skip to main content
SimilarExport ZIP
100%

Temperature in multiple cities

✓ Published2🌍 Public
Sszy1900
Last edited May 23, 2020
Created on May 23, 2020

This visualization displays population trends over time for multiple cities, with each colored line representing a different region. A vertical black line marks the currently selected year, and moving the mouse across the chart updates this selection and re-renders the view. The code uses D3 v5 APIs including `nest()`, `scaleTime()`, `scaleOrdinal()`, `line()` with `curveBasis`, and axis generators. Data comes from the UN population estimates CSV files, processed by melting wide-format years into tidy rows, and rendered as SVG paths with a categorical color legend.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple regions, with each region represented by a colored line. A vertical black line marks a selected year, allowing users to compare population values across regions at that specific moment. The visualization uses d3.nest to group data by region, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for the paths. A mouse-interceptor rect captures pointer movement and updates the selected year via d3.mouse, triggering a re-render. The data comes from UN population estimates and medium-variant projections, loaded with d3.csv and processed through a melt function to format years.

Pporrasgp
96% 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
95% match
Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple regions, with each region represented by a colored line. A vertical line marks the currently selected year, and hovering over the chart updates this selection. The view includes an ordinal color legend using `d3.scaleOrdinal` with `schemeCategory10`. Data is loaded via `d3.csv` from UN population estimates, processed through a custom melting function, and rendered using `d3.line` with `curveBasis` and SVG paths. Interactive mouse events trigger year selection.

NNelson30
95% match
Loading thumbnail…

Temperature in multiple cities

This interactive line chart depicts population changes for multiple regions over time, sourced from UN population estimates. Users can click or hover to select a specific year, triggering a vertical line that updates across all series. The visualization uses the D3.js library with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` for paths, and `scaleOrdinal` for color encoding. Data is processed from CSV files using `csv`, `timeParse`, and `range`, and a custom `colorLegend` function displays the categorical color scale.

Aarths-glitch
93% match
Loading thumbnail…

Temperature in multiple cities

This interactive line chart depicts population changes for multiple regions over time, sourced from UN population estimates. Users can click or hover to select a specific year, triggering a vertical line that updates across all series. The visualization uses the D3.js library with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` for paths, and `scaleOrdinal` for color encoding. Data is processed from CSV files using `csv`, `timeParse`, and `range`, and a custom `colorLegend` function displays the categorical color scale.

Aarths-glitch
93% match
Loading thumbnail…

Temperature in multiple cities

This interactive line chart displays population trends for multiple countries over time, with a color-coded legend identifying each nation and a vertical line marking a user-selectable year. Built using D3 v5, it leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render smoothed paths. Data is loaded from UN population CSV files, and hovering over the chart updates the selected year to show values at that point.

JJacob van Lingen
92% 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
89% 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
87% match