883km.github.io/index.html at main · 883km/883km.github.io · GitHub

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
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Home - CS416 Project 2 by Sicheng Meng</title>
	<script src='https://d3js.org/d3.v7.min.js'></script>
	<script src="chart_index.js"></script>
	<link rel="stylesheet" href="./proj2.css">

	<script type="text/javascript">
		/* =============================
		This script generates sample text for the body content.
		You can remove this script and any reference to it.
		 ============================= */
		var bodyText = ["Remember, you are unique, just like everybody else.", "Too much agreement kills a good chat.", "Get your facts first, then you can distort them as you please.", "I intend to live forever. So far, so good.", "</p><p>A clear conscience is usually a sign of a bad memory.", "What's another word for Thesaurus?", "<h3>Heading</h3><p>Experience is something you don't get until just after you need it."]
		function generateText(sentenceCount) {
			for (var i = 0; i < sentenceCount; i++)
				document.write(bodyText[Math.floor(Math.random() * 7)] + " ")
		}
	</script>

</head>

<body>

	<header id="header">
		<div class="innertube">
			<p>CS416 Narrative Visualization Project by Sicheng Meng</p>
		</div>
	</header>

	<main>
		<div class="innertube">

			<h1>Explore World's Energy Consumption and Problems</h1>
			<img src="image.png" alt="Energy Use Per Person, 2022">

			<div id="chart0">
			</div>

			</svg>

		</div>

	</main>

	<nav id="left">
		<div class="innertube">
			<h1>Intro</h1>
			<ul class="bulletpoint">
				<li>The world lacks safe, low-carbon, cheap large-scale energy alternatives to fossil fuels.</li>
				<li>Until we scale up those alternatives the world will continue to face two energy problems: hundreds of millions of people lack access to sufficient energy; and the dominance of fossil fuels in our energy system drives climate change, and other health impacts such as air pollution.</li>
				<li>To make sure that everyone in the world has access to clean and safe energy, we need to understand energy consumption and its impacts around the world today and how this has changed over time.</li>
			</ul>
		</div>
	</nav>

	<footer id="footer">
		<div class="innertube">

			<div class="buttonnext-container">
				<button class="next-button" onclick="window.location.href='slide1.html'">Next Slide</button>
			</div>

		</div>
	</footer>

</body>

</html>