Color by Month Example

100%

Color by Month Example

✓ Published0🌍 Public

Last edited Dec 4, 2018

Created on Oct 3, 2018

Forked from Scatter plot with Interactive Filtering

This example uses an interactive scatter plot to show monthly air quality in London from 2010 to 2018, plotting roadside PM2.5 against PM10 particulates. A color legend allows viewers to click a month to highlight datapoints from that month while dimming others. The visualization, built with D3 v5, uses `scaleOrdinal` with an `interpolateRainbow` color scale, SVG circles for the data points, and a custom `colorLegend` module for clickable filtering. Data comes from the Kings College London Air Quality Dataset via 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with Interactive Filtering

This scatter plot displays London monthly air quality measurements from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset in the London Datastore. It plots Roadside PM2.5 particulate levels on the x-axis against Roadside PM10 levels on the y-axis, with points colored by year using a sequential color scheme. The visualization supports interactive filtering: clicking a year in the color legend dims points from other years and highlights the selected year’s data with a black outline. Built with d3.v5, the example uses `scaleLinear`, `scaleOrdinal`, `schemeRdYlBu`, `axisBottom`, `axisLeft`, and SVG rendering for both the scatter plot and legend.

KKCachel

88% match

Loading thumbnail…

Scatter plot with Interactive Filtering

This scatter plot visualizes London’s monthly roadside air quality data from the Kings College London dataset, plotting PM2.5 against PM10 particulate concentrations. A color legend allows interactive filtering by year, dimming non-selected data points and highlighting the chosen year. The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for the axes, while the custom `colorLegend` module handles the filtering interaction. Data is loaded from a CSV file and rendered as SVG circles.

Vveagy

88% match

Loading thumbnail…

Scatter plot with Menus -by Month

This interactive scatter plot visualizes London air quality data from January 2010 through August 2018, showing monthly measurements of various pollutants. Users can choose which two air quality variables to compare using dropdown menus, while data points are color-coded by month using D3's `scaleOrdinal` with the `interpolateViridis` palette. A clickable color legend filters the displayed data, and D3 transitions animate the scatter plot when the selected axes change. The visualization uses D3 v5 with SVG rendering, scaled axes, and custom axis labels to present the Kings College London Air Quality Dataset.

KKCachel

86% match

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

86% match

Loading thumbnail…

Scatter Plot Convert to Line plot

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.

Aarun-subba

86% match

Loading thumbnail…

Fork of London Air

This interactive scatter plot visualizes monthly air quality measurements from the London Datastore (January 2010–August 2018), showing pollutant levels over time. Users can select which pollutant to display on the y-axis via a dropdown menu, while the color legend encodes the month and a second legend distinguishes Roadside versus Background measurement types. Built with D3 v5, the visualization uses `scaleOrdinal`, `scaleTime`, and `scaleLinear` for encoding, with clickable legends, animated transitions, and interactive tooltips. The color legend supports filtering by clicking, and the stroke legend uses `transition.attrTween` for updates.

Aall-over-yet

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

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

84% match