Scatter plot with Menus - by Year

100%

Scatter plot with Menus - by Year

✓ Published3🌍 Public

Last edited Nov 5, 2018

Created on Oct 7, 2018

Forked from Scatter plot with Interactive Filtering

This interactive scatter plot displays London’s monthly average air quality readings for PM2.5 and PM10 particulates, with each point colored by year. The visualization uses two dropdown menus implemented via the `dropdownMenu` function to let users switch the x- and y-axis variables among eight roadside and background pollutant metrics. Built with D3 v5, the chart renders SVG circles, uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for the year-based color scale, and supports a clickable color legend that highlights data points from a selected year.

AI-generated description

Kathleen Cachel

Data in this scatter plot is from from the Kings College London Air Quality Dataset in the London Datastore. The data is from January 2010 through August 2018.

</n> Thanks to Jonathan for helping me dubug my code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with Menus -by Month

This interactive scatter plot visualizes London air quality data from January 2010 through August 2018, showing monthly measurements of various pollutants. Users can choose which two air quality variables to compare using dropdown menus, while data points are color-coded by month using D3's `scaleOrdinal` with the `interpolateViridis` palette. A clickable color legend filters the displayed data, and D3 transitions animate the scatter plot when the selected axes change. The visualization uses D3 v5 with SVG rendering, scaled axes, and custom axis labels to present the Kings College London Air Quality Dataset.

KKCachel

92% match

Loading thumbnail…

Scatter Plot Pollutant (Menu) over Time

This interactive scatter plot visualizes monthly air quality measurements for London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Users select which two pollutants to plot against each other using dropdown menus, while the color of each circle encodes the month of the year using a D3 `scaleOrdinal` color scale based on `interpolateInferno`. Clicking a legend item highlights all data points from that month, dimming others. The visualization uses D3 v5, rendering as an SVG with animated transitions of 1500 milliseconds via `transition.duration` and `.delay`, with axis and legend components built using D3’s `axisBottom`, `axisLeft`, and custom `dropdownMenu` and `colorLegend` modules.

KKCachel

88% match

Loading thumbnail…

Scatter plot with Interactive Filtering

This scatter plot displays London monthly air quality measurements from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset in the London Datastore. It plots Roadside PM2.5 particulate levels on the x-axis against Roadside PM10 levels on the y-axis, with points colored by year using a sequential color scheme. The visualization supports interactive filtering: clicking a year in the color legend dims points from other years and highlights the selected year’s data with a black outline. Built with d3.v5, the example uses `scaleLinear`, `scaleOrdinal`, `schemeRdYlBu`, `axisBottom`, `axisLeft`, and SVG rendering for both the scatter plot and legend.

KKCachel

87% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive line chart visualizes monthly average PM2.5 and PM10 particulate levels across London from January 2010 to August 2018, using a dropdown menu to compare different air quality measurements. Built with D3 v5, the visualization renders smooth time-series lines using `d3.line()` and `d3.curveBasis`, with axes scaled via `d3.scaleTime()` and `d3.scaleLinear()`. The dropdown, implemented through a custom menu component, triggers smooth transitions (1500ms) as the Y-axis data changes. Color-coded by year, the chart includes a D3 ordinal color legend, while the dataset originates from the Kings College London Air Quality Dataset in the London Datastore.

YYash G

86% match

Loading thumbnail…

Scatter plot with Interactive Filtering

This scatter plot visualizes London’s monthly roadside air quality data from the Kings College London dataset, plotting PM2.5 against PM10 particulate concentrations. A color legend allows interactive filtering by year, dimming non-selected data points and highlighting the chosen year. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for the axes, while the custom `colorLegend` module handles the filtering interaction. Data is loaded from a CSV file and rendered as SVG circles.

Vveagy

85% match

Loading thumbnail…

Scatter Plot Pollutant (Menu) over Time

This interactive scatter plot visualizes monthly air quality in London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset. Users can select different pollutant metrics for the x- and y-axes via dropdown menus, while the color legend encodes months and allows filtering by clicking. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleTime` for the temporal x-axis, `scaleLinear` for pollutant measurements, and `scaleOrdinal` with `interpolateInferno` for the month color scale.

WW9183907

85% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality levels for PM2.5 and PM10 particulates in London from 2010 to 2018, with each year represented by a colored line. A dropdown menu allows users to switch between different pollutant measurements, updating the y-axis and line chart accordingly. Built with D3 v5, the SVG rendering uses `scaleTime` and `scaleLinear` for axes, `nest` to group data by year, and `line` with `curveBasis` for smooth paths. Data comes from the Kings College London Air Quality Dataset via the London Datastore.

Lluavabo

85% match

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for PM2.5 and PM10 particulates in London from 2010 to 2018, using a dropdown menu to switch between different pollutant metrics. Multiple colored lines represent individual years, with a color legend distinguishing each annual series. The SVG chart uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to render the paths, while d3-transition animates updates. Data comes from the Kings College London Air Quality Dataset via the London Datastore, loaded as CSV using d3.csv.

LLex

85% match