Skip to main content
SimilarExport ZIP
100%

Temperature in multiple cities

✓ Published1🌍 Public
JJacob van Lingen
Last edited May 20, 2020
Created on May 20, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Sszy1900
92% 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
91% 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
91% 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 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
90% 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
86% 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
85% match