-
Notifications
You must be signed in to change notification settings - Fork 1
/
understandingClimateChange.php
110 lines (87 loc) · 6.27 KB
/
understandingClimateChange.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php
require "config.php";
require "src/Partial.php";
require "src/objects/Project.php";
$project = Project::buildProjectFromSlug('understandingClimateChange');
Partial::build('header', ["project" => $project]);
Partial::build('projectPageLanding',
["project" => $project,
"description" => "A website that uses D3.js to visually analyze climate change data. Data visualizations include line charts and stacked area charts of global climate change data, as well as a detailed choropleth map and other visualizations of Canadian weather data.",
"primaryLink" => "http://understandingclimatechange.rmichels.com/ccImpacts.html",
"primaryLinkText" => "View Project"]);
Partial::build('projectPageMeta', ["project" => $project]);
?>
<div id="projContent"> <!--___________ Proj Content ____________-->
<!----- Content / Text ----->
<section class="sectionText">
<?php if ($GLOBALS['english'] == false) echo "Dieser Bereich der Website wurde noch nicht vollständig auf Deutsch übersetzt." ?>
<h2>The Task</h2>
<p>As an exercise of interactive data visualization techniques, we planned to comprehensively visualize climate change data. Our goal was to condense complex datasets into simple charts that communicate the mechanics, origins, and local impact of climate change in Canada. To entice users, we would develop simple interactions such as pop-up tooltips, as well as complex interactions such as brushing, changing representations, and animation.</p>
</section>
<!----- Content / Media ----->
<section class="sectionMedia">
<div class="mediaColumn">
<figure onclick="viewImage(this)">
<img src="assets/img/understandingClimateChange/lqip/chart1.jpg">
</figure>
<figure onclick="viewImage(this)">
<img src="assets/img/understandingClimateChange/lqip/chart2.jpg">
</figure>
<figure onclick="viewImage(this)">
<img src="assets/img/understandingClimateChange/lqip/chart3.jpg">
</figure>
</div>
</section>
<!----- Content / Text ----->
<section class="sectionText">
<h2>The Result</h2>
<h3>Understanding Climate Change</h3>
<p>Features four color-coded line charts of global CO2 emissions and atmospheric concentration, as well as a stacked area chart of CO2 emissions by region.</p>
<h3>Understanding Climate Change Impact</h3>
<p>With the choropleth map of Canada and its provinces and territories, users can explore Canadian weather data, including temperature and precipitation, by year, month and province. There is also a spider chart of the global temperature anomaly over time. Both charts can be dynamically queried and animated.</p>
<h3>Climate Change Impact Summary</h3>
<p>The climate change summary charts aim to show a correlation, or lack thereof, of CO2 emissions and weather anomalies. There are four line plots of mean Canadian weather temperature, precipitation, and their anomalies, grouped with a line plot of global CO2 emissions. </p>
</section>
<!----- Content / Media ----->
<section class="sectionMedia">
<div class="mediaColumn">
<figure onclick="viewImage(this)" id="chart4">
<img src="assets/img/understandingClimateChange/lqip/chart4.jpg">
</figure>
<figure onclick="viewImage(this)">
<img src="assets/img/understandingClimateChange/lqip/chart5.jpg">
</figure>
</div>
</section>
<!----- Content / Text ----->
<section class="sectionText">
<h2>Process</h2>
<p>We developed the project in a team of two, over the course of two months, and it was our first experience with D3.js. Early on, we defined two central questions that we would attempt to answer with the project:</p>
<ol>
<li>What are the contributing factors to climate change?</li>
<li>Since climate impacts weather, are there indications of Canadian weather behaving abnormally?</li>
</ol>
<p>After defining these questions, we set out to find relevant data. Most data needed to be cleaned for outliers and bad data. The most complex dataset was that of Canadian weather data, as we needed to manually merge multiple large datasets, clean and sort the data, and calculate monthly and annual averages.</p>
<p>The final phase of project development involved developing the D3.js driven visualizations and assembling the final website, which also doubles as a project report. Most charts, including the line charts and stacked area chart, were fairly straightforward to implement. By far the most complex chart was the choropleth map of Canadian weather data. While the visual mapping of data to geography and color was challenging, the outcome was worth it. The resulting map provides an enticing and interactive way to quickly browse through a large dataset of Canadian weather data, and make local as well as federal-level observations.</p>
</section>
<!----- Content / Media ----->
<section class="sectionMedia">
<div class="mediaColumn">
<figure onclick="viewImage(this)">
<img src="assets/img/understandingClimateChange/lqip/chart6.jpg">
</figure>
</div>
</section>
<!----- Content / Text ----->
<section class="sectionText">
<h2>The Code</h2>
<p>The project is developed with HTML, CSS and JS, where we employ the data-driven visualization library <a href="https://d3js.org/" target="_blank">D3.js</a>. Implementing all the visualizations was very challenging, as D3 was new to us. Particularly the use of the chain syntax was cumbersome in the beginning. The general workflow consists of loading data, selecting DOM elements and inserting SVG elements with certain attributes mapped to the data. In the excerpt below, the <a href="#chart4">Canadian Weather Data Chart</a> is rendered in <code>drawMap()</code>, with the color of each province mapped to temperature or percipitation data depending on the user's inputs. The excerpt also includes mouse hover interactions for the individual provinces starting at line 58, where the province is visually highlighted and data in the legend is updated by calling <code>updateDataData()</code>, which isn't show in the example.</p>
</section>
<!----- Content / Media ----->
<section class="sectionMedia">
<script src="https://gist.github.com/robert-michels/fea50c19b3bcdff1b1ee446cad3a8028.js"></script>
</section>
</div>
<?php
Partial::build('footer');
?>