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/