-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAirPollution.html
55 lines (46 loc) · 2.15 KB
/
AirPollution.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The header which consist of documentation and title of website -->
<meta charset="utf-8"/>
<title>Air Pollution</title>
<meta name="description" content="Data visualisation"/>
<meta name="Keywords" content="HTML, CSS"/>
<meta name="Author" content="Jonathan lee"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="Assets/Css/AirPollution.css">
</head>
<body>
<h1>CO2 Emission and World Population Comparison (1950-2018)</h1>
<script src="Assets/Javascript/Air.js"></script>
<script src="/Assets/Javascript/nav.js"></script>
<p id = "chart"></p>
<div>
<svg id="my_dataviz"></svg>
</div>
<div id="mySidenavs" class="sidenavs">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Story.html">Story</a>
<a href="WorldPopulation.html">World Population</a>
<a href="AirPollution.html">Air Pollution</a>
<a href="AnimalExtinction.html">Animal Extinction</a>
<a href="Deforestation.html">Deforestation</a>
<a href="GreenHouseEffect.html">Greenhouse</a>
</div>
<div id="main">
<div id="mySidenav" class="sidenav" onclick="openNav()">
<a href="#" id = "about">Menu</a>
</div>
</div>
<script>
// select the svg area
var svg = d3.select("#my_dataviz")
// Handmade legend
svg.append("rect").attr("x",200).attr("y",3).attr("width",30).attr("height",30).style("fill", "red")
svg.append("rect").attr("x",400).attr("y",3).attr("width",30).attr("height",30).style("fill", "blue")
svg.append("text").attr("x", 240).attr("y", 20).text("CO2 Emission").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("text").attr("x", 440).attr("y", 20).text("World Population").style("font-size", "15px").attr("alignment-baseline","middle")
</script>
</body>
</html>