Report

Introduction

Scope

Our Project attempts to provide tools for the purpose of weather data analysis. We aim to create an interactive visualization that enables intuitive analysis of climate change’s impact on Canadian weather. While it is not possible to directly correlate individual extreme weather events to climate change, it is possible to analyze patterns over time to find clear indications of climate change impact. That is why this area of topic is well suited for an analysis through an interactive visualization, as opposed to a static visualization.

Users / Audience

While prior knowledge on the topic of climate change will make understanding of our charts easier, we aim to create a website for a lay audience to understand the changes our planet is going through. Therefore, we suggest our targeted audience would be the general public, along with young adults – adults who would like to see the long-term effects of climate change.

Problem / Domain Questions

Overall, we would like to answer the following question:
What is the impact of Climate Change on Canadian Weather patterns?
To answer this question, we devised the following sub-component questions that can be asked and answered with our tool.

1. What are the contributing factors of climate change?
1. How has the atmospheric CO2 concentration changed over the last two millennia? What point in time shows a large spike to that concentration?
2. What is the relationship between CO2 content in the air and human caused CO2 emissions?
3. Who or what causes our CO2 emissions?
2. Since climate impacts weather, are there indications of Canadian weather behaving abnormally?
1. Is there a noticeable change in temperature patterns?
2. Is there a noticeable change in precipitation patterns?

Data

Each chart on our website has links/references to the data sources, as well as information about the dimensions and visual idioms used.

Our process began by analyzing simple datasets of CO2 emissions and atmospheric CO2 concentration data. After that, we began looking into datasets gathered from Canadian weather stations. Initially we wanted to see if there was a correlation between climate change and extreme weather disasters as part of our analysis, however, we shifted gears to only analyze weather and climate data itself. This was the best approach, as the data was more readily available

Data Cleaning

• Atmospheric CO2 concentration (Historic)
• Trimmed dataset to years >0, as we had trouble formatting the “BC” dates.
• Atmospheric CO2 concentration (Recent)
• Trimmed dataset further, to start the same year as the emissions set (1752).
• Human CO2 emissions
• Dataset contained emissions by region, including the region “world”; showing combined, global data. Trimmed dataset to only include the global data (Filter).
• Human CO2 emissions (by region)
• Trimmed original dataset to only feature major key regions, which includes the data from their sub-regions (ex: EU-28 includes Germany) (Filter).
• Sorted by Year, THEN by entity.
• Comparing emissions and atmospheric concentration
• Created using datasets from two previous charts (Combination).
• Canadian Weather Data
• Original data had monthly summaries of individual weather stations (1844 of them) all over Canada. This was far too much information to process in the browser, therefore, thorough formatting was necessary.
• Step 1
• Delete all unneeded columns, containing irrelevant or unusable data.
• Step 2
• Our source data site can only create .csv files with 150,000 rows, however we required just under 600,000 rows of data. Therefore, we had to download 4 separate files. -> Merge all datasets into one file.
• Step 3
• Sorting our Data: by Year, THEN by Month, THEN by Province.
• Step 4
• Data Cleaning:
• Delete all rows containing cells with no data
• Delete all rows with less than 25 days of valid temperature and precipitation values (there was a column indicating the number of valid days)
• At this point, we tried to load the data with D3, but discovered that it was still too much to handle smoothly in-browser. The crucial step consuming too much compute power was the fact that we still had to calculate averages of weather stations by province, month and year, using d3.average(). Solution: Calculate provincial averages beforehand in Excel and delete individual station data.
• Step 5
• Use a marker column which checks when the province value changes, and adds a mark when that is the case.
• Use new columns to calculate averages for the range of values between marks -> average of weather station data per province of that month of that year.
• Delete the data from individual weather stations and only keep the provincial averages (we now have one row per year / month / province).
• Step 6 (for the 4 Climate Change Impact Summary charts)
• Further processed Canadian weather data: calculated averages by year for the whole country only, deleted monthly and provincial data, as to minimize how much data needs to be handled in the browser (loaded 4 times for the 4 charts). Calculate absolute values as well (as this shows total change as compared to relative change).

Visualization Design

Detailed justifications of our Design choices can be found under each chart. Overall, we used following guidelines in designing our visualizations:

• The visualization must be simple to interpret for anybody.
• The visualization must be able to show time as a dimension, as we are interested in temporal trends.
• The visualization must not over-simplify the topic by ommitting important data.

The website is designed in a way that encourages data exploration, but at the same time guides users to go down a linear path. Therefore, we first start by analyzing how CO2 emissions have increased and resulted in an increase in atmoshperic CO2 concentration. Then, we dive into a very visually satisfying and exploratory visualization of climate change impact. Finally, we end the path on a more comprehensible and summarized representation of the canadian weather data map.

To use the visualizations, you can first use the navigation bar at the top to view different sections. Each section has multiple charts grouped together, which can be accessed by fixed the dropdown menu on the top right. We hope that each chart is entirely intuitive to use, as we designed certain cues, icons, abbreviations and interactions so that they can be easily understood. Generally, all line charts show precise values when hovering the cursor. Furthermore, the Canadian weather data chart has advanced interaction and visualization controls on the left.

Further Work

Overall, we’re very happy with the results. However, our datasets are slightly scattered (different year ranges, mixing Canadian data & global data), therefore, the project as a whole is not as focused as it could be in regards to the design focus.

Specifically, there are some issues with the Canadian weather data map, which we feel like they could've been done better. The legend on the right is disconnected from the provincial data we want to look at - it functions as an information display panel rather than a tooltip connected to the cursor. As an advantage though, this provides very detailed data (up to 9 dimensions). Furthermore, our website is not responsive, therefore, it doesn't work well on small or slim monitors resulting in poor accessibility.

We have a list of improvements in mind that could be possible future improvements:

• Expanding the ‘Canadian weather’ data set to include much earlier data, possibly starting similar to the world emissions dataset in the year of 1752. This would allow for an even better comparison and increase consistency.
• Reformatting the Canada legend to have more space. This would allow us to label things more clearly (such as "mean Temperature" instead of "tMean", which is more appropriate for our audience).
• Animations restart after stopping them -> Change so they continue from where they were paused.
• Temperature Anomaly Script causes non-critical bugs as a result of not drawing the entire range.
• Canada Weather Map accesses data by using recursive loops and if-statements to check whether the data matches a specified key (getValueByYear() & getValueByMonth()). This is likely not the most efficient way to implement what we need, perhaps D3 has specific solutions that are more efficient.
• As our TA rightly pointed out (thanks for the feedback!), the Canadian weather map and the line charts shown on the Climate Change Impact Summary page would make for a great brush application. However, we unfortunately didn't have time to implement this.

Conclusions

This project was very interesting and a great way to learn about D3. Prior to this course we had not really considered how complicated visualizations are created, but it is indeed an interesting challenge, as it can't just be estimative work.

In terms of the subject matter, we have learned a lot about Climate Change and its specific impacts on Canada. We find these trends to be the most interesting:

• Northern territories experience much more extreme warming than southern provinces.
• Temperatures are slowly increasing all over Canada.
• Precipitation change varies, however absolute precipitation changes show a clear trend of increased change.

References

Code Resources Used

• General D3 Help: https://www.d3-graph-gallery.com/index.html
• We used this page for basic examples of almost all of our charts, and built on top of them.
• Global Temperature Anomaly: http://bl.ocks.org/psthomas/raw/269d0bd87f41135c95564cc032110c2b/
• This chart is based heavily on the existing D3 visualization at this link. More Details can be found in the description below the chart.
• Canada JSON map: https://raw.githubusercontent.com/mdgnkm/SIG-Map/master/canada.json
• D3 v3 & v4 (v3 is only used for the Global Temperature Anomaly chart)

Coding Help

Canada Weather Chart

• Understanding projection types: https://bl.ocks.org/d3indepth/f7ece0ab9a3df06a8cecd2c0e33e54ef
• D3 Nest: http://learnjsdata.com/group_data.html
• Hover Map: https://www.d3-graph-gallery.com/graph/choropleth_hover_effect.html

General

• D3 Reference: https://github.com/d3/d3/blob/master/API.md
• We used this page a lot to understand things such as ColorScales, formatting, scales, etc.
• Adding Gridlines: https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218
• Adding a Mouse Cursor: https://www.d3-graph-gallery.com/graph/line_cursor.html
• Using d3.v3 and d3.v4 on the same page without interference between the scripts: https://stackoverflow.com/questions/44173693/using-different-d3-versions-on-same-html-page
• Adding radial Lines: http://stackoverflow.com/questions/18487780/how-to-make-a-radial-line-segment-using-d3v3-js
• Formatting Axis Labels: https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e
• D3 Color Scales: https://github.com/d3/d3-scale-chromatic

Data Transformation Help

• Merging multiple .CSV files: https://www.rondebruin.nl/win/s3/win021.htm
• Matching columns in Excel, where one dataset includes only part of the other: https://stackoverflow.com/questions/44724491/excel-how-do-i-compare-two-columns-of-different-length-and-extract-the-differ
• Transforming Data in Excel:
• https://support.office.com/en-us/article/index-function-a5dcf0dd-996d-40a4-a822-b56b061328bd
• https://support.office.com/en-us/article/match-function-e8dffd45-c762-47d6-bf89-533f4a37673a
• https://support.office.com/en-us/article/max-function-e0012414-9ac8-4b34-9a47-73e662c08098