Tag: Web development

Visual Story of GHG Emissions in Canada

By Sharon Seilman, Ryerson University
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2018

Background

Topic: 

An evaluation of annual Greenhouse Gas (GHG) Emissions changes in Canada and an in-depth analysis of which provinces/ territories contribute to most of the GHG emissions within National and Regional geographies, as well as by economic sectors.

  • The timeline for this analysis was from 1990-2015
  • Main data sources: Government of Canada Greenhouse Gas Emissions Inventory and Statistics Canada
Why? 

Greenhouse gas emissions are compounds in the atmosphere that absorbs infrared radiation, thus trapping and holding heat in the atmosphere. By increasing the heat in the atmosphere, greenhouse gases are responsible for the greenhouse effect, which ultimately leads to global climate change. GHG emissions are monitored in three elements -its abundance in the atmosphere, how long it stays in the atmosphere and its global warming potential.

Audience: 

Government organizations, Environmental NGOs, Members of the public

Technology

An informative website with the use of Webflow was created, to visually show the story of the annual emissions changes in Canada, understand the spread of it and the expected trajectory. Webflow is a software as a service (SaaS) application that allows designers/users to build receptive websites without significant coding requirements. While the designer is creating the page in the front end, Webflow automatically generates HTML, CSS and JavaScript on the back end. Figure 1 below shows the user interaction interface of Webflow in the editing process. All of the content that is to be used in the website would be created externally, prior to integrating it into the website.

Figure 1: Webflow Editing Interface
The website: 

The website it self was designed in a user friendly manner that enables users to follow the story quite easily. As seen in figure 2, the information it self starts at a high level and gradually narrows down (national level, national trajectory, regional level and economic sector breakdown), thus guiding the audience towards the final findings and discussions. The maps and graphs used in the website were created from raw data with the use of various software that would be further elaborated in the next section.

Figure 2: Website created with the use of Webflow
Check out Canada’s GHG emissions story HERE!

Method

Below are the steps that were undertaken for the creation of this website. Figure 3 shows a break down of these steps, which is further elaborated below.

Figure 3:  Project Process
  1. Understanding the Topic:
    • Prior to beginning the process of creating a website, it is essential to evaluate and understand the topic overall to undertake the best approach to visualizing the data and content.
    • Evaluate the audience that the website would be geared towards and visualize the most suitable process to represent the chosen topic.
    • For this particular topic of understanding GHG emissions in Canada, Webflow was chosen because it allows the audience to interact with the website in a manner that is similar to a story; providing them with the content in a visually appealing and user friendly manner.
  2. Data Collection:
    • For the undertaking of this analysis, the main data source used was the Greenhouse Gas Inventory from the Government of Canada (Environment and Climate Change). The inventory provided raw values that could be mapped and analyzed in various geographies and sectors. Figure 4 shows an example of what the data looks like at a national scale, prior to being extracted. Similarly, data is also provided at a regional scale and by economic sector.

      Figure 4: Raw GHG Values Table from the Inventory
    • The second source for this visualization was the geographic boundaries. The geographic boundaries shapefiles for Canada at both a national scale and regional scale was obtained from Statistics Canada. Additionally, the rivers (lines) shapefile from Statistics Canada too was used to include water bodies in the maps that were created.
      • When downloading the files from Statistics Canada, the ArcGIS (.shp) format was chosen.
  3. Analysis:
    • Prior to undertaking any of the analysis, the data from the inventory report needed to be extracted to excel. For the purpose of this analysis, national, regional and economic sector data were extracted from the report to excel sheets
      • National -from 1990 to 2015, annually,
      • Regional -by province/territory from 1990 to 2015, annually
      • Economic Sector -by sector from 1990 to 2015, annually
    • Graphs:
      • Trend -after extracting the national level data from the inventory, a line graph was created in excel with an added trendline. This graph shows the total emissions in Canada from 1990 to 2015 and the expected trajectory of emissions for the upcoming five years. In this particular graph, it is evident that the emissions show an increasing trajectory. Check out the trend graph here!
      • Economic Sector -similar to the trend graph, the economic sector annual data was extracted from the inventory to excel. With the use of the available data, a stacked bar graph was created from 1990 to 2015. This graph shows the breakdown of emissions by sector in Canada as well as the variation/fluctuations of emissions in the sectors. It helps understand which sectors contribute the most and which years these sectors may have seen a significant increase or decrease. With the use of this graph, further analysis could be undertaken to understand what changes may have occurred in certain years to create such a variation. Check out the economic sector graph here!
    •  Maps:
      • National map -the national map animation was created with the use of ArcMap and an online GIF maker. After the data was extracted to excel, it was saved as a .csv files and uploaded to ArcMap. With the use of ArcMap, sixteen individual maps were made to visualize the varied emissions from 1990 to 2015. The provincial and territorial shapefile was dissolved using the ArcMap dissolve feature (from the Arc Tool box) to obtain a boundary file at a national scale (that was aligned with the regional boundary for the next map). Then, the uploaded table was joined to the boundary file (with the use of the Table join feature). Both the dissolved national boundary shapefile and the river shapefile were used for this process, with the data that was initially exported from the inventory for national emissions. Each map was then exported a .jpeg image and uploaded to the GIF maker, to create the animation that is shown in the website. With the use of this visualization, the viewer can see the variation of emissions throughout the years in Canada. Check out the national animation map here!
      •  Regional map -similar to the national one, the regional map animation was created in same process. However, for the regional emissions, data was only available for three years (1990, 2005 and 2015). The extracted data .csv file was uploaded and table joined to the provinces and territories shapefile (undissolved), to create three choropleth maps. The three maps were them exported as .jpeg images and uploaded to the GIF maker to create the regional animation. By understanding this animation, the viewer can distinctly see which regions in Canada have increase, decreased or remained the same with its emissions. Check out the regional animation map here!
  4. Final output/maps:
    • The graphs and maps that were discussed above were exported as images and GIFs to integrate in the website. By evaluating the varied visualizations, various conclusions and outputs were drawn in order to understand the current status of Canada as a nation, with regards to its GHG emissions. Additional research was done in order to assess the targets and policies that are currently in place about GHG emissions reductions.
  5. Design and Context:
    • Once the final output and maps were created, and the content was drafted, Webflow enables the user to easily upload external content via the upload media tool. The content was then organized with the graphs and maps that show a sequential evaluation of the content.
    • For the purpose of this website, an introductory statement introduces the content discussed and Canada’s place in the realm of Global emissions. Then the emissions are first evaluated at a national scale with the visual animation, then the national trend, regional animation and finally, the economic sector breakdown. Each of the sections have its associated content and description that provides an explanation of what is shown by the visual.
    • The Learn More and Data Source buttons in the website include direct links to Government of Canada website about Canada’s emissions and the GHG inventory itself.
    • The concluding statement provides the viewer with an overall understanding of Canada’s status in GHG emissions from 1990 to 2015.
    • All of the font formatting and organizing of the content was done within the Webflow interface with the end user in mind.
  6. Webflow:
    • The particular format that was chosen in for this website because of story telling element of it. Giving the viewer the option to scrolls through the page and read the contents of it, works similarly as story because this website was created for informative purposes.

Lessons Learned: 

  • While the this website provides informative information, it could be further advanced through the integration of an interactive map, with the use of additional coding. This however would require creating the website outside of the Webflow interface.
  • Also, the analysis could be further advanced with the additional of municipal emissions values and policies (which was not available in the inventory it self)

Overall, the use of Webflow for the creation of this website, provides users with the flexibility to integrate various components and visualizations. The user friendly interface enables uses with minimal coding knowledge to create a website that could be used for various purposes.

Thank you for reading. Hope you enjoyed this post!

Earthquake Browser Web Application for the Country of Iran

Author: Atanaz Dorrani Arab
GeoVis Project Assignment @ RyersonGeo, SA 8905, Fall 2018

The website of Iranian Seismological Center (ISC) is popular not only among the geologist, geophysicist and seismotectonics specialists, but also the general public. When an earthquake happens, people who felt the temblor tend to know its location and magnitude in the shortest time possible. The ISC website is the quickest way to obtain information regarding the latest earthquake. It gives details of time and location of the earthquakes and visualizes earthquakes spatial distribution across the country. However, the website is not user-friendly and provides date and time location for a limited number of earthquakes and maps the location of earthquakes for a period of only 24 hours.

The Earthquake Browser is an effort to make a user-friendly web app, which is easy to use and can serve both the general public and seismotectonics specialists.

The web app is designed to have three main section:

  • A section to display the spatial distribution of the earthquakes on map
  • A section that provides a list of earthquakes, which provides detailed information regarding each earthquake including magnitude, location, longitude, latitude, time.
  • A section which visualizes the frequency distribution of earthquakes by year in form of a vertical bar chart. This part is more beneficial to the specialists, as this chart can give general information about the seismic structure of earth within political borders of Iran.

To use this app users need to enter a time period for which they want to obtain information about the occurred earthquakes. They can also narrow down their search by selecting a magnitude range.

The earthquakes data are being retrieved online from U.S. Geological Survey (USGS) website each time a user select a time period and a magnitude range.

HTML, JavaScript and CSS are the markup, programming and style languages that are used to create the earthquake browser web application. HTML is used to describe the structure of information on the web application; CSS is used for controlling the appearance; and the functionality is programmed by JavaScript. Four libraries were utilized in designing this web application:

  • Mapbox GL JS used for the web mapping tool, due to the variety of visually pleasant map designs.
  • D3.js used for the dynamic data visualization in the chart section of the app.
  • jQuery used for sending Ajax request to USGS server.
  • Font-Awesome Library used for adding icon fonts which are displayed in the sidebar of the web app. Icon fonts are just fonts. But, instead of containing letters, they contain symbols and glyphs. They give the web app a more graphic design.

 

Welcome to the app

When a user opens the web application on the browser, a map centered to the Iran’s political border would be displayed. A side bar with three icon fonts designed on the left side of the app let user to navigate to different sections of the web application. Each icon font presents one of the web app’s sections and its functionality.

The hamburger menu directs users to the place where the time period and the magnitude range should be inputted. The date-time field is set on the current local date-time of the user’s time zone as the default date-time in the app. The web app also requests user to not to enter dates prior to January 01, 1900; since there is no instrumental record of the earthquakes before the year 1900.

It is probable that users made some mistakes in filling up the fields of this section, such as entering a start date greater than the end date, entering maximum magnitude smaller than minimum magnitude, entering a date exceeding the current data-time, or entering a date prior to January 01, 1900.

When a user submits the request containing any of these mistakes, an alert with an appropriate message, which corresponds to the specific occurred error pops up and warn the users to correct it. Aside from the alerts, when users input a date-time which exceeds the current date-time or is prior to 1900, the box around the field of date-time changes from solid black line to dashed orange line to let the user know that something is not right before submitting a request. The figure below shows examples of these alerts and how they look on screen.

Additionally, another alert is also designed to notify user when there is no earthquake occurred for the selected time period and magnitude range. When no data received from USGS server this alert would pop up.

USGS provided a web API for access to its earthquake data and sending requests to its server. When a user fills out the date-time and magnitude fields, a URL based on the parameters defined by the USGS API documentation and the values entered by the user will be created and  will be sent to the USGS server.

In that URL request, an area which matches the Iranian borders needed to be defined; so the USGS only sends data for earthquakes that occurred in Iran. The area needs to be defined by a rectangular extent, a boundary box defined by 4 lats & longs, which contains the country of Iran. Although when USGS sends earthquake data the, information contains the country names in the location parameter; there is no way to narrow down the URL request based on the name of the countries. Thus, the received earthquakes data from USGS contains earthquakes that occurred out of the borders of the country.

After receiving the data form USGS server in the GeoJSON format, the data will be filtered by the name of country available in the location parameter. Those earthquakes which does not include the name “Iran” in their location will be removed from the data.

Then, user can view the spatial distribution of the earthquakes on map based on the filtered data. User is able to zoom in to places where there are many events occurred. A legend is also displaying on bottom right corner of the map to help reader get an idea of the earthquakes’ magnitude. A color is assigned to each magnitude with a round number (the magnitude ranges from 2 to 8). The color selection is inspired by USGS color scheme for earthquakes magnitudes. The color of the points representing earthquakes changes relative to the magnitude and changes within the range of selected colors. Earthquakes with greater magnitudes are also have larger points. This helps making the larger earthquakes, which are kind of more important, more visible. The figure below show the map after the earthquakes data had been received,  filtered, and displayed on map.

The exact magnitude of the earthquake can be found by clicking on the its point on the map. In addition to the magnitude, user can find a row number, which corresponds to the row number in the earthquakes’ list section.

By going to the list section, user can find extra information about that exact earthquake. This list is also beneficial when user is just looking for the latest earthquakes in order to find out the earthquake exact location and magnitude.

In the chart section of the app, a vertical bar chart is showing the frequency of events by year for the selected time period and magnitude range. The Y axis shows the earthquakes frequency and the X axis shows the years. For making this chart, the earthquakes data received from USGS will be categorized by year. The years will be displayed on the X axis and the count of earthquakes in each  category will be displayed on the Y axis. When the user places the mouse on each bar of the chart, the exact number of earthquakes in that year will be displayed. This makes the chart more readable when the X axis includes a wide range of years.