Skip to main content
SimilarExport ZIP
100%

Project Task 5

✓ Published1🌍 Public
MMichael Biancardi
Last edited Jul 23, 2023
Created on Jul 23, 2023
Forked from Project Task 4

This scatterplot compares PM2.5 and CO AQI values from a pollution population dataset, plotting each data point as a blue circle. The chart reveals the relationship between these two air quality metrics. The visualization is rendered as an SVG using D3 v5, loading data via `d3.csv` and scaling axes with `d3.scaleLinear`. It uses `d3.extent` for domain calculation and `d3.axisLeft` and `d3.axisBottom` to draw the axes, with custom text labels for each axis.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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

Project Task 4

This scatterplot visualizes the relationship between PM2.5 and Ozone AQI values from a pollution population dataset. It renders blue circles for each data point, with axes labeled and styled using D3's `select`, `append`, `scaleLinear`, `axisLeft`, and `axisBottom`. The SVG is sized to the window dimensions, and the chart displays axis labels rotated for the vertical orientation. The code loads data via `d3.csv` from a GitHub gist, then maps the parsed values to x and y coordinates using linear scales.

MMichael Biancardi
93% match
Loading thumbnail…

Project Task 1

This example shows average PM2.5 AQI values for various countries as a horizontal bar chart, with each country’s bar length proportional to its pollution level. The visualization uses React for component structure and D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads pollution data from a GitHub-hosted CSV. The SVG bars are rendered as `rect` elements, with axes built from `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and map over `yScale.domain()`. Tooltips are provided via SVG `<title>` elements.

MMichael Biancardi
81% match
Loading thumbnail…

Vis for Project

This visualization shows the average Air Quality Index (AQI) for six pollutants—CO, NO2, SO2, PM10, PM2.5, and Ozone—as a pie chart with a custom legend listing each pollutant and its mean value in units. The code loads a CSV dataset from a GitHub gist, aggregates the pollutant-specific AQI values by summing and averaging non-void entries, and renders the result using D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10`. The SVG is drawn with paths, and each segment includes a mouseover handler that logs the pollutant’s AQI to the console.

Llibramanju
77% 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
75% 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
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
74% 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
73% match