PM2.5

100%

✓ Published0🌍 Public

Last edited Sep 8, 2021

Created on Sep 8, 2021

This example displays the size and structure of a PM2.5 global air pollution dataset. A large text message reports the file size in kilobytes, the number of rows, and the number of columns after loading the CSV. The code uses D3.js v5’s `d3.csv` method to fetch and parse the data from a GitHub Gist, then computes the metrics using `d3.csvFormat` and array properties. The data originates from a Kaggle dataset covering mean annual PM2.5 exposure for 240 countries from 2010 to 2017.

AI-generated description

World Population Data

Gist

Source: The data shown here comes from the Kaggle:PM2.5 Global Air Pollution 2010-2017 (Mean Annual Exposure for 240 Countries)

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading data "PM2.5 Global Air Pollution 2010-2017" by Enze Liu

This example reads a CSV file of PM2.5 air pollution data for 240 countries from 2010 to 2017, then displays a simple summary of the dataset. It shows the file size in kilobytes, the number of rows, and the number of columns as large text on the page. The visualization uses only the d3.csv method from D3 v5 to load and parse the data, and it also includes commented-out alternatives using fetch with async/await and a nested promise approach. The data originates from a Kaggle dataset hosted on GitHub Gist.

Rrioto9858

85% match

Loading thumbnail…

PM2.5 by County

A minimal data-loading demonstration reports basic facts about a county-level PM2.5 dataset from 2000 to 2018. Using `d3.csv` to fetch a gist-hosted CSV file, it prints the file size in kilobytes, the total row count, and the number of columns into a large `<pre>` element via `d3.csvFormat` and `textContent`. The page also shows commented-out alternatives with `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different ways to handle asynchronous data in D3 v5.

Ggeorgeeeee

80% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse three CSV datasets from GitHub Gists using D3 v5. It displays the file size in kilobytes, row count, and column count for each dataset—PM2.5 air quality data, bike rental records, and COVID-19 infection statistics—inside a styled `<pre>` element. The code uses the `d3.csv` method to fetch and parse each file, then `d3.csvFormat` to calculate the raw data size, and `data.length` and `data.columns.length` to report the dimensions. Results are appended incrementally as each promise resolves, with the final output rendered to the page.

SStefanZhang

79% match

Loading thumbnail…

PM2.5 Around the World

This visualization combines a choropleth map and line chart to explore global PM2.5 air pollution levels from 2010 to 2017. A slider selects the year, updating the map's color shading and highlighting the corresponding point on the time-series chart. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection for the map and `d3.scaleLinear` for chart axes. The data comes from a Kaggle dataset of mean annual PM2.5 exposure for 240 countries, with missing values shown via a diagonal hatch pattern.

Rrioto9858

75% match

Loading thumbnail…

PM2.5 Air Pollution Trend

This visualization presents PM2.5 air pollution trends from 2010 to 2017 for 240 countries, with each country’s annual mean exposure drawn as a thin, semi-transparent line over time, revealing a sharp global dip in 2014 followed by a rebound in 2015. Built with the vega-lite-api and D3.js, it loads CSV data from a GitHub Gist via `d3.csv`, then melts the dataset into a tidy format before rendering line marks with tooltips. The code customizes axis styles, hides the domain, and uses a dark color scheme to improve readability, with the view auto-sizing to the browser window.

Rrioto9858

74% match

Loading thumbnail…

PM2.5 For Selected Country

This visualization displays PM2.5 pollution trends for a selected country between 2010 and 2017, using data from Kaggle’s Global Air Pollution dataset. A dropdown menu lets users choose a country, triggering a D3 line chart that updates with the new country’s yearly values. The code uses d3.line, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the SVG chart, with a color legend built via a custom colorLegend function. Data is loaded and processed using d3.csv and d3.nest.

PPakcheera Choppradit

74% match

Loading thumbnail…

PM2.5 Around the World

This interactive visualization displays PM2.5 air pollution levels for countries worldwide from 2010 to 2017. A choropleth map, rendered using d3.geoPath and d3.geoNaturalEarth1, color-codes each country by its annual mean PM2.5 concentration. Users can select a year via a slider, which updates both the map and a line chart showing pollution trends for all countries. Hovering or clicking a country highlights its data in red on the line chart. The data is sourced from Kaggle's PM2.5 Global Air Pollution dataset.

Rrioto9858

74% match

Loading thumbnail…

PM2.5 For Selected Country

This visualization shows the annual PM2.5 air pollution trend for a selected country from 2010 to 2017, with the user choosing the country via a dropdown menu. It uses D3 v5 with React, rendering an SVG line chart with axes, a color legend, and a title. The data comes from a Kaggle dataset on global air pollution, processed and structured per country. Key APIs include `d3.csv`, `scaleLinear`, `line`, `nest`, and `axisBottom`.

PPakcheera Choppradit

73% match