Skip to main content
SimilarExport ZIP
100%

London Air Scatter Plot Back vs Road

✓ Published1🌍 Public
KKCachel
Last edited Nov 5, 2018
Created on Oct 24, 2018

A scatter plot visualizes London air quality measurements from 2010 to 2018, plotting monthly pollutant levels (such as PM2.5 and ozone) against time. Users can select different pollutants via dropdown menus. The color of each point represents the type of monitoring site (backstreet or roadside), and clicking a legend entry filters the visualization to that category. Tooltips show data details on hover, while axis transitions animate when new variables are selected. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, and `d3.axisBottom`/`axisLeft`, with data loaded from a CSV file and rendered as SVG circles.

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 tooltips, shout out to Jonathan who's week 5 scatter plot inspired the tooltips.

</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 Quality Scatter Plot

This scatter plot visualizes average monthly roadside ozone and nitrogen dioxide readings in London from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. Each magenta circle represents one month, with ozone on the x-axis and nitrogen dioxide on the y-axis. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `csv` loads the data. The SVG rendering includes custom tick styling and axis labels, with semi-transparent circles to reveal overlapping data points.

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

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
89% 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
88% match
Loading thumbnail…

ICE-7 London Air Scatter Plot Background vs Roadside

This visualization presents a scatter plot of London air quality measurements, comparing roadside versus background monitoring stations across time. Users can select different pollutants via a dropdown menu, while color encodes month and stroke distinguishes station type. The visualization includes interactive legends that filter data points by month or station type, with animated transitions updating circle positions. The code utilizes D3 v5 modules including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `interpolateBuPu` for color encoding, with data loaded from a CSV file using `d3.csv`.

SShreeti Upreti
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
88% 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
87% 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
87% match