Skip to main content
100%

Making a Scatter Plot

✓ Published1🌍 Public
AAnnie Liao
Last edited Jun 9, 2020
Created on Jun 9, 2020
Forked from Making a Bar Chart

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.

AI-generated description

This chart shows the air quality (PM2.5 level, the lower the healthier) in midtown Manhattan around the time of COVID-19 outbreak, according to the New York City government website.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, showing a general decline during the early COVID-19 outbreak, with data sourced from the NYC government website. Rendered as an SVG using D3 v5, the visualization employs `csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis dates, and `axisLeft`/`axisBottom` for axes. Bars are drawn with `rect` elements, while a light-blue background and lavender fills enhance readability.

AAnnie Liao
88% match
Loading thumbnail…

NYC Air Quality Line Chart

A line chart tracks NYC’s weekly PM2.5 air pollution levels from February to May 2020, revealing a declining trend during the early COVID-19 period. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator, rendered as an SVG on a blue background with a lavender stroke. Data comes from the NYC government website, loaded via `csv()`. The chart includes labeled axes for time and PM2.5 concentration, with gridlines, but no data points or smoothing curves.

AAnnie Liao
85% match
Loading thumbnail…

NYC Air Quality Area Chart

This area chart tracks NYC PM2.5 air pollution levels from February to May 2020, showing a decline in particulate matter during the early COVID-19 period. The visualization uses D3 v5 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, an `area()` generator with `curveBasis` for the smoothed fill, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a local CSV file via `d3.csv` and mapped to the weekly measurements.

AAnnie Liao
85% match
Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

Wwaqaschughtai
80% 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
79% 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
78% 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
78% 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
77% match