London Air2

100%

✓ Published0🌍 Public

Last edited Nov 5, 2018

Created on Oct 30, 2018

This visualization displays monthly air quality measurements from the Kings College London dataset, with pollutant concentrations shown over time. Users can select different pollutants via a dropdown menu, while interactive legends filter data points by year and by measurement type (Roadside or Background). The SVG scatter plot uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal with interpolateBuPu colors, and animated transitions for circles. Tooltips appear on hover, and legend clicks trigger opacity and radius changes to emphasize selected categories.

AI-generated description

Kathleen Cachel

In this plot I played with adding interaction to the legend, and the drop down menur for the polutant. I also added a second legend to encode wether it was a Roadside or Background measure

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

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

London Air

This visualization displays monthly air quality measurements from the Kings College London dataset, plotting pollutant concentrations over time with circles colored by year and outlined by measurement type. The chart includes interactive legends that filter data by color or stroke value, a dropdown menu to select pollutant columns, and hover tooltips showing readings. Built with D3 v5, it uses scales for color and time axes, transitions for animated updates, and separate legend components for year and measurement type.

WW9183907

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

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

91% match

Loading thumbnail…

Fork of London Air

This interactive scatter plot visualizes monthly air quality measurements from the London Datastore (January 2010–August 2018), showing pollutant levels over time. Users can select which pollutant to display on the y-axis via a dropdown menu, while the color legend encodes the month and a second legend distinguishes Roadside versus Background measurement types. Built with D3 v5, the visualization uses `scaleOrdinal`, `scaleTime`, and `scaleLinear` for encoding, with clickable legends, animated transitions, and interactive tooltips. The color legend supports filtering by clicking, and the stroke legend uses `transition.attrTween` for updates.

Aall-over-yet

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

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

87% match

Loading thumbnail…

Scatter Plot Roadside Pollution over Time

This interactive scatter plot visualizes monthly roadside pollution levels in London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Each circle represents a monthly average, colored by pollutant type, with a legend that filters data on click. The visualization includes animated transitions using `transition().duration()` and `delay()`, a dropdown menu for selecting variables, and D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The chart renders as an SVG with interactive color legend and axis labels.

KKCachel

87% match