Skip to main content
SimilarExport ZIP
100%

Fork of Multiple Line plot with Dropdown

✓ Published0🌍 Public
CChukwuebuka Ohaji
Last edited May 7, 2022
Created on May 7, 2022

This visualization displays monthly average air quality measurements for London, comparing PM2.5 and PM10 particulate levels across different years from 2010 to 2018. A dropdown menu lets users switch which pollutant is plotted on the y-axis, with each year rendered as a separate colored line using a time-based x-axis. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for axes, `nest` for grouping data by year, and `transition().duration(1500)` for animated line updates. The data comes from the Kings College London Air Quality Dataset in the London Datastore.

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…

Fork of Multiple Line plot with Dropdown

This visualization presents monthly air quality measurements for London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset in the London Datastore. A dropdown menu lets users select which pollutant to plot on the y-axis, while colored lines show annual trends for each year. Built with D3 v5, the example uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, with a transition animation updating the chart when the selection changes. The chart includes a color legend and axis labels.

DDonald Bagwell
96% match
Loading thumbnail…

Fork of Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset in the London Datastore. A dropdown menu lets users select which pollutant to plot, showing time-series lines for each year from 2010 to 2018, colored by year. The chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleLinear, d3.nest, and d3.axisBottom/axisLeft to render SVG paths with animated transitions. A color legend identifies the year for each line.

SSheela2930
95% match
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
94% 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
93% 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
92% match
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
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
91% match
Loading thumbnail…

Multiple Line plot with Dropdown

This visualization shows monthly air quality measurements in London from 2010 to 2018, displaying pollutant levels as a multiple line plot. A dropdown menu lets users select which pollutant to display, from options like PM2.5, PM10, and nitrogen dioxide. Each year is represented by a colored line, with a color legend identifying the annual series. The visualization uses D3 v5 with SVG rendering and animated transitions, loading data from the London Datastore via the `csv` method, and employing `d3.nest` for data grouping.

DDenise Mauldin
91% match