Climate Change Dashboard

This is a question that has been on everyone's mind since June 23, 1988 when Dr James Hansen, director of NASA's Institute for Space Studies testified before the US Senate[(1)]. Since that time, climate change has moved more and more from a scientific debate to a political one. There have been numerous studies done to see if CO2 emissions are being reduced, the changes of the Earth's temperature, and its affects on our future.

As a project, we have decided to look into the temperature changes of the different countries of the world, spanning a time period of over 60 years, and created a dashboard depicting those changes. This dashboard contains current demographics of each country and has multiple charts that interact with each other to visually display how the temperatures have changed.

Data

Format	Description
	1. Temperature changes: Data set found here shows the changes in temperature in each country from 1961 to 2019. The data is also split up into each month, so that you can compare January vs January, and by season. The changes go anywhere from 9°C cooler to 11°C warmer. 2. CO2 Emissions: Temperature fluctuations can be caused by many different events, one of which is CO2 emissions. Each country produces different amounts of CO2 dependent on their access to electricity, the total population, the urban population and other factors. We used the data from https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions and you can find the dataset here.
	3. Country demographics: Since the CO2 emissions can be influenced by the demographics of the country, the dashboard includes current demographics, as of May 2021, so that as you are reviewing the charts, you can see how the demographics might play a role. The demographics were scraped from three different websites using Beautiful Soup. After scraping the websites, the data was pushed into the sqlite database as an additional table and also saved as a csv file. - a. Flags - https://www.worldometers.info/geography/flags-of-the-world/ - b. Population - https://www.worldometers.info/world-population/population-by-country/ - c. Latitude and Longitude coordinates - https://developers.google.com/public-data/docs/canonical/countries_csv - You can find the scrape code here.
	4. GeoJson: For the map, we used Leaflet and geoJson files for the boundaries of each country. You can find the full geoJson file here https://opendata.arcgis.com/datasets/2b93b06dc0dc4e809d3c8db5cb96ba69_0.geojson.

ETL

• Data is queried, cleaned, transformed and loaded to SQLiteDB using python pandas, SQLAlchemy .
  
  

• PostresSQLDB is used to deploy the app to Heroku.
  
• Find Heroku requirements and repository here.

---

Web Framework

- python Flask REST API is implemented to manage HTTP requests, render templates and JSON serialized data for manipulating the charts.
- Click on app.py to get FlaskAPI source code.

Navigation

Data rendered from python Flask API is then used to visualize data on the web client. User can find the following features:

• Launch Page :

  • Dropdown option to choose a country, a table of demographics (default World Info), and a geoJson map of the world.
  • Built with HTML, Bootstrap , Jquery.js, JavaScript, Leaflet.js

• Country Selection:

  • Select a country from the drop-down menu or click on the leaflet.js map.
  • Jquery.js is used to asynchronously render HTML elements for charts when a country is selected.

• Demographic Table :

  • When a country on the map is clicked or selected from the dropdown menu, the demographic table will also update with country-specific information.

• Charts: Built with leaflet.js, Plotly.js and D3.js
  Once a country is chosen from the dropdown or map, it will render new charts that display information specific to that country.

  • Warming Stripes chart: Built with Plotly.js,
    • Is a special kind of chart that is used as a country header that shows the increase and decrease of the temperatures by color. Shades of red for warmer and shades of blue for colder. This chart is not interactive, but it sure does look cool.
  • Country Map: Built with Leaflet.js,
    • Shows the map of the selected country and its overall temperature change and Co2 emission over time.
    • Country flag has been used as a legend.
  • Line Chart: Built with D3.js,
    • Shows all the temperature changes for each month of the year for the chosen country.
    • By clicking on Seasons or Months, you can see all the data for or navigate to a specific season/month over time since 1960.
    • Hovering over the markers will show the value of the temperature change.
  • Pie Chart: Built with D3.js,
    • Provides overall temperature change from 1960 to 2019. The Pie chart is also interactive with the line chart. Clicking on a particular season or a month on the pie chart, provides access to the data and trends on the line chart.
  • Temp and Co2 correlation chart: Built with D3.js,
    • Identifies the relation between countries Co2 production and avg. temp changes over the years. data is color-coded as green being low emission, yellow and orange being intermediate, and red being high.

Note: All the charts are individually color-coded by seasons, months, and Co2 emission rate.

• Nagivation button: User can navigate back to the launch page via the navigation button on the top right or selecting World Info on the drop-down menu.

Deployment

- https://climate-changedashboard.herokuapp.com/

ScreenShots

1. Launch Page Navigation: World Map and Demographic Information Table

2. Charts

Tools and Technology

1. JavaScript

   • Plotly
   • D3.js
   • JQuery
   • Leaflet/GeoJson
   • SVG

2. Python

   • Flask
   • SqlAlchemy
   • Pandas
   • Beautiful Soup
   • Splinter

3. Sqlite

4. CSS

5. Bootstrap

6. HTML

Source Code

1. Climate.py -contains functions to pull necessary data from database
2. app.py -contains flask application with routes to render HTML page -needs to be run to launch page on local host
3. country_scrape.py -contains python script to scrape websites for country demographics
4. JQueryRenderHTML.js -contains JQuery functions to render HTML page events
5. map.js and mimMap.js -contains geoJson for main map of countries with events and map of selected country with(out) flag
6. launch.js -contains function to render initial launch page
7. pieLineChart.js -contains SVG for pie chart and the line chart
8. scatterTempCO2.js -contains SVG for scatter chart
9. stripe_chart.js -contians function for plotly to create warming stripes chart.