-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstates.html
106 lines (101 loc) · 3.23 KB
/
states.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
These are some scaling and rendering options that help
out bootstrap (and also make your life a little easier)
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
An adequate title for an adequate html doc
-->
<title>USA Donors</title>
<!--
Import bootstrap default css.
We are just quick and dirtying the prettiness of the interface
so this is adequate.
-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--
Import the cover page styling css
-->
<link rel="stylesheet" href="cover.css">
</head>
<style>
.counties {
fill: none;
}
.states {
fill: none;
stroke: #fff;
pointer-events: all;
}
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 60px;
padding: 2px;
font-size: 10px;
background: #DC143C;
border: 1px;
border-radius: 8px;
pointer-events: none;
}
</style>
<body>
<!--
Style the page based on bootstrap single page demo
Because that is exactly what this is.
Plus, it is pretty
-->
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<!--
The header of the page
-->
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">US Donors</h3>
<ul class="nav masthead-nav">
<li class="active"><a href="counties.html">KY Counties</a></li>
<li class="active"><a href="#">USA</a></li>
<li class="active"><a href="countries.html">Global</a></li>
</ul>
</div>
</div>
<!--
The meat of the page
-->
<div class="inner cover">
<h1 class="cover-heading">United States</h1>
<p class="lead">Donor data for the United States</p>
<div id="graph">
</div>
</div>
<!--
The page footer
-->
</div>
</div>
</div>
<!--
Using direct link for quick use. You should host this yourself though.
Try to put scripts at the end of your body tag to improve page load
speeds from a UX perspective. It makes the page feel more responsive.
Do remember that this requires extra planning though.
Importing the jquery library for some helper functions if we need them.
Importing bootstrap for some quick styling.
Importing d3 for the demo :D
-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="d3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="states.js"></script>
</body>
</html>