-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathchoropleth_maps.html
119 lines (109 loc) · 9.67 KB
/
choropleth_maps.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
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
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap & Style Links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="Assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Assets/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!-- Page Title -->
<title>Maps</title>
<!-- Create the navigation bar at the top -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="navibar" style='background-color:black !important'>
<strong><a class="navbar-brand" href="index.html">Steam Data <i class='fab fa-steam' style='font-size:24px;color:white'></i> Home</a></strong>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false"></button>
<div class="navbar navbar-collapse">
<ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item dropdown">
<a class="btn btn-secondary dropdown-toggle" id="drop" style='color:lime' type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-steps" fill="lime" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M.5 0a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 .5 0z"/>
<rect width="5" height="2" x="2" y="1" rx=".5"/>
<rect width="8" height="2" x="4" y="5" rx=".5"/>
<path d="M6 9.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1z"/>
</svg>
Lollipop Charts</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="graphs_webpage.html">
<i class="fas fa-globe-americas" style='color:lime'></i>
Worldwide</a>
<a class="dropdown-item" href="graphs_webpage_us.html">
<i class="fas fa-flag-usa" style='color:lime'></i>
US Only</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="navlink" href="compare_chart.html">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-controller" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.119 2.693c.904.19 1.75.495 2.235.98.407.408.779 1.05 1.094 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.815-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773a11.307 11.307 0 0 1-.739-.809c-.126-.147-.25-.291-.368-.422-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.422-.243.283-.494.576-.739.81-.398.378-.877.705-1.513.772a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772.486-.485 1.331-.79 2.235-.98.932-.196 2.03-.292 3.119-.292 1.089 0 2.187.096 3.119.292zm-6.032.979c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.505C4.861 9.97 5.978 9.026 8 9.026s3.139.943 3.965 1.855c.164.182.307.35.44.505.214.25.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z"/>
<path d="M11.5 6.026a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1 1a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1 1a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-7-2.5h1v3h-1v-3z"/>
<path d="M3.5 6.526h3v1h-3v-1zM3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .258.966l-1.932.518a.5.5 0 0 1-.612-.354zm9.976 0a.5.5 0 0 0-.353-.613l-1.932-.518a.5.5 0 1 0-.259.966l1.932.518a.5.5 0 0 0 .612-.354z"/>
</svg>
Ratings Chart</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navlink" href="choropleth_maps.html">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-globe" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4H2.255a7.025 7.025 0 0 1 3.072-2.472 6.7 6.7 0 0 0-.597.933c-.247.464-.462.98-.64 1.539zm-.582 3.5h-2.49c.062-.89.291-1.733.656-2.5H3.82a13.652 13.652 0 0 0-.312 2.5zM4.847 5H7.5v2.5H4.51A12.5 12.5 0 0 1 4.846 5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5H7.5V11H4.847a12.5 12.5 0 0 1-.338-2.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12H7.5v2.923c-.67-.204-1.335-.82-1.887-1.855A7.97 7.97 0 0 1 5.145 12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11H1.674a6.958 6.958 0 0 1-.656-2.5h2.49c.03.877.138 1.718.312 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12h2.355a7.967 7.967 0 0 1-.468 1.068c-.552 1.035-1.218 1.65-1.887 1.855V12zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5h-2.49A13.65 13.65 0 0 0 12.18 5h2.146c.365.767.594 1.61.656 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4H8.5V1.077c.67.204 1.335.82 1.887 1.855.173.324.33.682.468 1.068z"/>
</svg>
Map Views</a>
</li>
</ul>
</div>
<a class="nav-text">Steam Data Analysis Web Visualization Dashboard</a>
</nav>
</head>
<body>
<!-- Humidity Body -->
<div class="container-fluid px-md-0" style="background-color: #EDF2F4;">
<div class="row justify-content-between no-gutters mx-md-0" >
<div class="col-12 col-md-4 position-md-sticky d-flex align-items-center vh-md-100 mx-auto" style="top: 0;">
<!-- Text to side of plot -->
<aside class="flex-grow-1 py-8 py-md-10">
<h1 style="color: #800000;">US Choropleth Map </h1>
<p class="font-size-lg mb-7 " style="color: #145385">
This Choropleth Map of the United States shows a good representation of where the most Steam games are purchased within the US. California, Texas, Pennsylvania and Florida are the top states for Steam game purchases. Calfornia is the top Steam buyer, with almost 100K more games purchased than the next most active state. The majority of the US seems to be in the 100-200K range for number of Steam games sold. </p>
</aside>
</div>
<div class="col-12 col-md-7">
<section class="pt-md-10 my-5 mx-2">
<div id='usmap'></div>
</section>
</div>
</div>
</div>
<div class="container-fluid px-md-0" style="background-color: #EDF2F4;">
<div class="row justify-content-between no-gutters mx-md-0" >
<div class="col-12 col-md-4 position-md-sticky d-flex align-items-center vh-md-100 mx-auto" style="top: 0;">
<!-- Text to side of plot -->
<aside class="flex-grow-1 py-8 py-md-10">
<h1 style="color: #800000;">World Choropleth Map</h1>
<p class="font-size-lg mb-7" style="color: #145385">
This Choropleth Map shows a good representation of where the most Steam games are purchased worldwide. As you can see the United States purchases exponentially more games than the rest of the world. The next biggest Steam gamer countries in the world are China followed by Germany. The majority of countries buy less than 400K games with only a handful buying exponentially more. </p>
<br>
<p class="font-size-lg mb-7" style="color: #145385">
Note: White countries have no data/steam presence</p>
</aside>
</div>
<div class="col-12 col-md-7">
<section class="pt-md-10 my-5 mx-2">
<div id='worldmap'></div>
</section>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="choro_maps.js"></script>
</body>
<!-- Footer -->
<footer>
<br>
<div class="footer">Copyright 2020 © DU Bootcamp Project 2 Group (Madison, Sarah, Kevin, Andrew, Robin) </div>
</footer>
</html>