Untitled

100%

✓ Published0🌍 Public

Last edited May 10, 2020

Created on May 10, 2020

This visualization shows London’s monthly air quality data from 2010–2018, displaying PM2.5 and PM10 particulate levels as a multi-line chart. A dropdown menu lets users select different pollutant measures, while a color legend indicates measurement year. The visualization uses D3.js v3 to render SVG graphics, with animate transitions on the line paths. Data originates from the Kings College London Air Quality Dataset, and the code relies on D3’s `scaleTime`, `scaleLinear`, `nest`, and `line` functions for time-series rendering. Axis helpers like `axisBottom` and `axisLeft` structure the plot.

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> Inspiration from Curran and this Vis. This week I spent time munging the data and adding a dropdown menu.

MIT Licensed

Similar vizzes

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

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

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

88% match

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for London from 2010 to 2018, showing how different pollutants like PM2.5, PM10, and ozone vary over time. A dropdown menu lets users switch between pollutant types, while multiple colored lines represent different years. The chart uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, d3.nest for grouping data by year, and d3.transition for animated line updates. Data comes from the London Datastore, rendered as an SVG with a color legend.

AArriannePandaraoan

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

88% match

Loading thumbnail…

Multiple Line plot

This visualization displays London’s monthly average PM2.5 particulate levels from 2010 through 2018, drawn from the Kings College London Air Quality Dataset in the London Datastore. Nine colored lines, one per year, show seasonal patterns using smooth curves generated with d3.line and curveBasis. The code uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for the color legend. SVG rendering supports the chart and interactive dropdown menu.

CCurran Kelleher

88% match

Loading thumbnail…

Multiple Line plot (refactored)

This visualization displays London’s monthly average PM2.5 particulate levels from 2010 through 2018 as multiple colored lines, one per year, overlaid on a shared time axis. It uses d3.csv for data loading, d3.nest and d3.line for grouping and path generation, d3.scaleTime, d3.scaleLinear for axes, and d3.scaleOrdinal for year-based color encoding. The view includes a dropdown menu, a color legend, and SVG rendering. Data derives from the Kings College London Air Quality Dataset via the London Datastore.

CCurran Kelleher

88% match

Loading thumbnail…

Multiple Line plot

This visualization displays monthly average PM2.5 particulate concentrations in London from January 2010 through August 2018, using nine separate colored lines to represent each year. The chart includes a World Health Organization guideline line at 10 µg/m³, with a dropdown menu and color legend for reference. Built with D3 v5, the visualization uses SVG rendering and implements d3.nest, d3.scaleTime, d3.line with curveBasis, and custom reusable components for the dropdown menu and color legend. Data comes from the Kings College London Air Quality Dataset in the London Datastore.

KKCachel

88% match