Scatter plot with Menus -by Month

100%

Scatter plot with Menus -by Month

✓ Published0🌍 Public

Last edited Nov 5, 2018

Created on Oct 8, 2018

Forked from Scatter plot with Menus - by Year

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.

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 Year

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.

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

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

90% match

Loading thumbnail…

London Air

This scatter plot visualizes monthly air quality measurements from the Kings College London Air Quality Dataset, showing pollutant levels over time from January 2010 through August 2018. Users select a pollutant from a dropdown menu to update the y-axis, click color-coded month and type legends to filter data points, and hover over circles to see tooltips with values. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with interpolateBuPu for the color palette, and animated transitions triggered by axis updates.

KKCachel

89% match

Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization uses the D3.js library (v5) and displays monthly average air quality data for London from January 2010 to August 2018. Users can select different variables from dropdown menus to plot as the x and y axes. The chart transitions from a scatter plot, with circles colored by month using an inferno color scale, into a smooth line plot representing the data trend. The visualization also includes a clickable color legend to filter datapoints by month, highlighting the selected month's data while dimming others. The data is sourced from the Kings College London Air Quality Dataset.

Jjblaskovich

89% match

Loading thumbnail…

Fork of London Air

This scatter plot displays monthly London air quality measurements from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. The visualization uses D3 v5 to render an SVG with animated transitions, where users can select pollutants via a dropdown menu and filter data points by clicking interactive legends for both month and monitoring site type. The color legend encodes months using an interpolateBuPu scale, while the stroke legend distinguishes Roadside versus Background measurements using scaleOrdinal.

Eeourm20

88% match

Loading thumbnail…

London Air

This visualization displays monthly air quality measurements in London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Users can change the pollutant displayed via a dropdown menu, and interact with two legends to filter data by month or by measurement type (Roadside or Background). The scatter plot uses time-series animation to draw the data points, with color encoding for the month and stroke encoding for the location type. The D3.js code (v5) uses `d3.csv`, `d3.scaleOrdinal`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, and `d3.transition` to build the interactive SVG visualization.

WW9183907

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