Fun with scatter

100%

Fun with scatter

✓ Published1🌍 Public

Last edited Feb 11, 2020

Created on Feb 11, 2020

Two scatterplots compare daily PM2.5 concentrations over time in 2018, with one chart treating the date as a categorical axis and the other as a continuous time axis. Both use the `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, rendered as SVG circles via `d3.select` and `d3.append`. The data comes from `2018.csv`, loaded with `d3.csv`. Axis ticks are generated with `d3.axisLeft` and `d3.axisBottom`, with the PM2.5 axis labeled explicitly.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple scatter plots

Four time-series scatter plots visualize daily measurements of airborne particulate concentration, pressure, air temperature, and wind speed from 2018. The plots use D3 version 5's `scaleTime` for the date axis and `scaleLinear` for the value axis, rendering each day as a circle via SVG. Brushing is implemented with `brushSelection` from D3, which highlights brushed circles in magenta and dims the rest to gray.

JJunyanL

77% match

Loading thumbnail…

SVG chart

This example shows two parallel bar charts from the v3 dataset, each plotting PM2.5 concentration (Raw.Conc.) over time, with one chart treating dates as ordinal strings and the other as parsed date objects. The visualization uses D3 v5’s SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, plus `axisLeft` and `axisBottom` for tick marks. Data is loaded from the 2018.csv file, and each chart’s rect elements are colored steelblue via CSS, while axis labels and titles are styled with D3 text elements.

JJunyanL

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

76% match

Loading thumbnail…

Making a Scatter Plot

A scatter plot displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, sourced from the NYC government website. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis dates. Circles are positioned with `cx` and `cy` attributes, while `axisLeft` and `axisBottom` generate gridlines. The chart highlights declining air pollution during the early COVID-19 outbreak period.

AAnnie Liao

76% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the relationship between U.S. county-level PM2.5 air pollution measurements from 2010 and 2018, using data from a raw GitHub-hosted CSV file. Each point represents a county, with positions mapped through D3’s `scaleLinear` and `extent` functions. The visualization uses D3 v7 to load the data via `csv`, filter rows with null values, and render circles in an SVG. Axes are generated using `axisLeft` and `axisBottom`, all embedded within a React-hosted HTML page that fills the viewport.

KKhanin Sisaengsuwanchai

74% match

Loading thumbnail…

Project Task 6

This scatterplot compares PM2.5 and NO2 AQI values from a pollution dataset, with each blue circle representing a data point. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map values to SVG coordinates and render axes. Data is loaded via `d3.csv` from a GitHub gist, and circles are drawn with `selectAll().join()`. Green axis labels and a red title style the chart, which fills the browser window.

MMichael Biancardi

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

73% match

Loading thumbnail…

Multiple scatter plots

Four scatter plots show variations in raw concentration, pressure, air temperature, and wind speed over time, using data from a 2018 CSV file. Each plot renders an SVG via React and d3.v5, using `scaleTime` and `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks. The circles are colored steelblue with hover effects, and a brush/Highlight module supports selecting points, highlighting them pink while dimming others.

JJunyanL

73% match