PM2.5 Around the World

100%

PM2.5 Around the World

✓ Published1🌍 Public

Last edited Oct 24, 2020

Created on Oct 23, 2020

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.

AI-generated description

A visualization constructed using D3.

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

The data is processed and melt to fit the visualization. It realize a Choropleth Map of the world to show the PM2.5 value in a specific year and the distribution around the world.

A slider is realized for user to select the year shown on the map and the purple line in the line chart shows the selected year.

The World Map can zoom in and out to make the perfect view for the user.

If the mouse is move on a specific country the country would be highlighted with red color and the related data in the line chart can also be highlighted.

If the user click on a specific country on the map the, there would be a highlighted view for the user to see the data for the specific country. The user can click again to quit the view.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

PM2.5 Around the World

This choropleth map visualizes global PM2.5 air pollution concentrations for the year 2011, using a grayscale color scale to represent exposure levels across countries. Missing data is marked with a diagonal hash pattern. The visualization uses d3.geoPath with a natural Earth projection, d3.scaleQuantize for color mapping, and d3.zoom for interactive panning. Data comes from a Kaggle dataset processed via TopoJSON and CSV files, with a custom colorLegend component displaying the value ranges for each shade.

Rrioto9858

94% match

Loading thumbnail…

[Project] PM2.5 Around the World

This visualization combines a world choropleth map, a line chart of all countries, and an interactive tool panel to explore PM2.5 air pollution data from 2010 to 2017. Users can hover over countries to see values, click to select a country and highlight its trend in red, and use a slider to change the year displayed. The map uses `geoNaturalEarth1` projection and `geoPath`, while the line charts are drawn with `d3.line` and `curveNatural`. Data is loaded from a CSV via `d3.csv` and processed with `d3.nest` and `d3.range`.

Rrioto9858

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

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

87% match

Loading thumbnail…

PM2.5 For Selected Country

This interactive visualization displays PM2.5 air pollution trends for a user-selected country from 2010 to 2017, using data from a Kaggle dataset processed via D3’s `csv` loader. A dropdown menu built with React and D3 lets viewers switch countries, triggering an update that redraws a line chart with `d3.line` and `curveBasis`. The SVG rendering includes axes via `axisBottom` and `axisLeft`, a color legend via `scaleOrdinal` with `schemeCategory10`, and removes and rebuilds all groups on each selection change.

Iivaleehan

86% match

Loading thumbnail…

PM2.5 For Selected Country

This visualization displays PM2.5 air pollution trends for a selected country from 2010 to 2017 using a multi-line chart. A dropdown menu allows users to switch between countries, updating the line path to show that nation’s annual mean exposure values. The code uses D3 v5 with React, employing `d3.line`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.nest` to process and render the data. It also uses a custom `colorLegend` component and `foreignObject` for the dropdown UI. Data originates from a Kaggle dataset loaded via a Gist URL.

Iivaleehan

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

86% match