Skip to main content
SimilarExport ZIP
100%

Scatter Plot Convert to Line plot

✓ Published1🌍 Public
Aarun-subba
Last edited Aug 28, 2020
Created on Aug 28, 2020

This interactive visualization displays monthly average air quality measurements for London, comparing PM2.5 and PM10 particulate levels across different months. Users can select different pollutant variables from a dropdown menu, which updates the y-axis and recomputes the line chart using d3.scaleTime and d3.scaleLinear. The scatter plot converts to a line plot, with data points colored by month using d3.scaleOrdinal and the inferno color scheme. A color legend allows filtering by month, highlighting relevant data points. The visualization uses data from the Kings College London Air Quality Dataset via the London Datastore, rendered with d3.v5 SVG and animation transitions.

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> Thanks to Jonathan for helping me dubug my code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization displays monthly air quality measurements for London, plotting PM2.5 and PM10 particulate levels with a scatter plot that morphs into a line chart. The line chart uses d3.line with curveBasis to connect data points, while the color legend and dropdown menus allow filtering by month and selecting different measurement variables. Data comes from King's College London air quality datasets, rendered as SVG with animated transitions that transform the scatter plot points into a continuous line. Users can click legend items to highlight specific months in the multicolored inferno-scaled visualization.

CCurran Kelleher
97% match
Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization uses the D3.js library (v5) and displays monthly average air quality data for London from January 2010 to August 2018. Users can select different variables from dropdown menus to plot as the x and y axes. The chart transitions from a scatter plot, with circles colored by month using an inferno color scale, into a smooth line plot representing the data trend. The visualization also includes a clickable color legend to filter datapoints by month, highlighting the selected month's data while dimming others. The data is sourced from the Kings College London Air Quality Dataset.

Jjblaskovich
94% 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
93% 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

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

Scatter Plot Pollutant (Menu) over Time

This interactive scatter plot visualizes monthly air quality in London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset. Users can select different pollutant metrics for the x- and y-axes via dropdown menus, while the color legend encodes months and allows filtering by clicking. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleTime` for the temporal x-axis, `scaleLinear` for pollutant measurements, and `scaleOrdinal` with `interpolateInferno` for the month color scale.

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