PM25

Welcome to PM25! PM25 is a interactive data Javascript project that details the various concentrations of Air Pollution across the Globe. In it you can view the fine particulate matter - termed 'PM2.5' and how exposed each country is around a 30 year span (1990 to 2017).

Live Link

Features

There is an interactive graph based on which country/territory you click to view. Once a country is selected, it will fetch the data and using canvas it will draw up data and display it.

There is also a interactive globe and data which shows the absolute change and relative change over the 30-year period.

You can filter the countries through a search filter for easier traversal instead of having to scroll and search for the country you are looking for.

Tablet Devices

Mobile Devices

Key functions and logic

Everytime a user clicks on a new country, the previous chart gets destroyed and a new chart gets created while updating the data needed to match the new country being clicked. We are also fetching the ID and adding a event listener to make sure there are no errors.

function createChartForCountry() {
  arrayOfCountries.forEach((country) =>
    document
      .getElementById(country.replace(/ /g, ""))
      .addEventListener("click", (e) => {
        e.preventDefault();
        if (myChart) {
          myChart.destroy();
        }
        createChart(country);
      })
  );
}

The chart is created using chartJS a javascript library which handles the data and draws the chart in a canvas element.

myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: data.xlabels,
    datasets: [
      {
        label:
          "Concentrations of air pollution (µg/m³) in " + data.countryName[0],
        data: data.ypm25,
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
      },
    ],
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: "Exposure to air pollution with fine particulate matter, 1990 to 2017",
      },
      legend: {
        position: "bottom",
      },
    },
    scales: {
      y: {
        ticks: {
          callback: function (value, index, values) {
            return value + "µg";
          },
        },
      },
    },
  },
});

The search filter helps for a easier traversal of the countries/territory list through the use of querySelectorAll and changing the style from display block to display none.

const searchBox = document.querySelector(".searchbox");

const countryElement = document.querySelectorAll(".country-container div div");
const countryContainerElement = document.querySelectorAll(".country-container");

function search(e) {
  countryElement.forEach((ele, i) => {
    if (!ele.innerHTML.toLowerCase().includes(e.target.value)) {
      countryContainerElement[i].style.display = "none";
    } else {
      countryContainerElement[i].style.display = "block";
    }
  });
}

Technologies used

javascript to handle most of the logic of getting information to the page
Vanilla JS and DOM manipulation to handle HTML element interactions
Canvas API and ChartJS to handle chart information and interactions
Scss for styling purposes
Webpack and Babel.JS to transpile scripts for efficiency

Future Plans

Add additional information for more interactivity
Add a search/filter for the country/territory list
Add countries interactivity
Use D3JS for better interactivity

Credit:

Data and information were obtained from: https://ourworldindata.org/outdoor-air-pollution
Globe Map and Country Flags were obtained from: https://www.wikipedia.org/

dzhengg98/PM25