Multiple Line plot with Dropdown

100%

Multiple Line plot with Dropdown

✓ Published8🌍 Public

Last edited Nov 5, 2018

Created on Oct 20, 2018

A dropdown menu controls the y-axis metric of a multi-line chart tracking London air quality from January 2010 to August 2018, using particulate matter and gas concentration data from the London Datastore. The visualization displays nine color-coded time series, one per year, with a legend on the right. Built with D3 v5, it uses `d3.nest` to group data by year, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime` for the x-axis. A custom `dropdownMenu` module handles user selection, triggering a 1.5-second `transition.attrTween` animation when switching metrics.

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 visualization displays multiple line plots of London's monthly air quality data, allowing users to select different pollutants (like PM2.5 or PM10) from a dropdown menu. Each line represents a year from 2010 to 2018, with a color legend mapping years to distinct shades. The D3 v5 code uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `nest` to group data by year before generating paths with the `line` generator. The dropdown menu is built via a custom `dropdownMenu` component that triggers re-rendering with the newly selected column. Data originates from the Kings College London Air Quality Dataset via the London Datastore.

SShabani Muswamba

94% match

Loading thumbnail…

Multiple Line plot with Dropdown

Filtering London air quality data from January 2010 through August 2018, this interactive visualization displays yearly trends for multiple pollutant measures as colored lines, with each year distinguished by a sequential purple color scale. A dropdown menu lets users switch the y-axis among variables like PM2.5, PM10, and nitrogen oxides, updating the line chart with a smooth 1.5-second transition. Built with D3 v5, the example uses `d3.nest` to group data by year, `d3.line` with a basis curve for path generation, and a custom dropdown component; a color legend maps each year to its hue.

KKeerthiKandadai

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

92% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization presents multiple line plots of air quality data from the Kings College London dataset, displayed from January 2010 through August 2018. A dropdown menu allows users to select which pollutant metric to display, with each line colored according to its category. The visualization uses D3 v5 with SVG rendering and animated transitions. The code employs `scaleTime`, `scaleLinear`, `line`, `nest`, and `transition.attrTween` via D3’s transition system, alongside custom modules for the dropdown menu and color legend.

WW9183907

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

92% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays monthly air quality measurements from the London Datastore, plotting pollutant concentrations over time with a dropdown menu to switch between different pollutants. The chart renders smooth multi-line paths for each year using d3.line and curveBasis, while a dynamic y-scale and axis labels update to reflect the selected measurement. The dropdown menu, built with d3.select and .on('change'), triggers a render function that recomputes the line chart with the newly chosen column. Color-coded lines distinguish annual trends, with a legend explaining the color scale.

KKeerthiKandadai

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

91% match

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive visualization displays a multiple line plot of air quality data, allowing users to compare trends across different pollutants via a dropdown menu. The chart plots daily values for each pollutant across time, with lines colored by category. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, while a custom `dropdownMenu` component handles user selection. The data comes from the London Datastore, and the visualization updates dynamically with animated transitions on the SVG paths.

LLex

91% match