Interactive fluctuation plot

100%

Interactive fluctuation plot

✓ Published0🌍 Public

Last edited Feb 4, 2020

Created on Jan 9, 2020

This interactive fluctuation plot compares air quality measurements across different years and weather variables. Users select a year and two variables via dropdown menus, and Chart.js renders a line chart showing the relationship between the chosen x-axis and y-axis columns. The visualization imports PM2.5 concentration and meteorological data from yearly CSV files (2016–2019) using the Fetch API. The chart displays tooltips that identify the corresponding date and variable values, with both canvas and SVG elements present in the underlying D3.js and p5.js structure.

AI-generated description

Template to import data

MIT Licensed

Similar vizzes

Loading thumbnail…

interactive scatter plot

This interactive scatter plot lets users explore air quality data from CSV files for the years 2016 through 2019. Users can select which columns (e.g., Raw.Conc., pressure, air_temp) map to the X and Y axes, as well as the year, via dropdown menus built with a custom `dropdownMenu` module. The visualization uses Chart.js to render the scatter plot on a Canvas element, while D3.js handles the dropdown interface and CSV data loading via `fetch`.

JJunyanL

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

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

78% match

Loading thumbnail…

Scatter plot with Menus - by Year

This interactive scatter plot displays London’s monthly average air quality readings for PM2.5 and PM10 particulates, with each point colored by year. The visualization uses two dropdown menus implemented via the `dropdownMenu` function to let users switch the x- and y-axis variables among eight roadside and background pollutant metrics. Built with D3 v5, the chart renders SVG circles, uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for the year-based color scale, and supports a clickable color legend that highlights data points from a selected year.

KKCachel

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

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

77% match

Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization compares monthly air quality measurements for PM2.5 and PM10 particulates from the Kings College London Air Quality Dataset, spanning January 2010 through August 2018. Users select different pollutant variables from dropdown menus, which triggers a smooth transition between scatter plot and line chart representations, using D3’s `transition().duration(1500)` to animate the data points as they morph into a connected line via `d3.line()` with `curveBasis`. A color legend, implemented with `scaleOrdinal` and `interpolateInferno`, lets users filter points by month. The visualization uses SVG rendering with axes from `axisBottom` and `axisLeft`.

KKCachel

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

77% match