-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
113 lines (108 loc) · 17.9 KB
/
index.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
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<head>
<title>2016 US Elections Results</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="uStates.js"></script> <!-- creates uStates. -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="liquidFillGauge.js" language="JavaScript"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<header>
</header>
<body>
<h1>#Election US</h1>
<div class="col-md-6 col-xs-12 panel panel-default">
<div class="panel-heading text-center"><h2>2016 US Elections Results Map</h2></div>
<div id="tooltip"></div><!-- div to hold tooltip. -->
<div id="map" class="panel-body" style="text-align: center;"></div>
<svg width="960" height="600" id="statesvg" style="text-align: center;"></svg> <!-- svg to hold the map. -->
<div style="text-align: center;"><img src="images/US-flag.jpeg" alt="US flag" style="width:304px;height:228px;"></div>
</div>
</div>
<div class="col-md-6 col-xs-12 panel panel-default"><div class="panel-heading text-center"><h2>Electors / candidates</h2></div>
<div>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzAuNTU2bW0iIGhlaWdodD0iNjUuOTk3bW0iIHZpZXdCb3g9IjAgMCAyMDAgMTg3LjA3OSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmY2JjMjt9LmJ7ZmlsbDojMTViZmQ5O30uY3tmaWxsOnVybCgjYSk7fS5ke2ZpbGw6dXJsKCNiKTt9LmV7ZmlsbDp1cmwoI2MpO30uZntmaWxsOnVybCgjZCk7fS5ne2ZpbGw6dXJsKCNlKTt9Lmh7ZmlsbDp1cmwoI2YpO30uaXtmaWxsOnVybCgjZyk7fS5qe2ZpbGw6dXJsKCNoKTt9Lmt7ZmlsbDp1cmwoI2kpO30ubHtmaWxsOnVybCgjaik7fS5te2ZpbGw6dXJsKCNrKTt9Lm57ZmlsbDp1cmwoI2wpO30ub3tmaWxsOnVybCgjbSk7fS5we2ZpbGw6dXJsKCNuKTt9LnF7ZmlsbDp1cmwoI28pO308L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9Ii00MDM1LjcwMyIgeTE9IjY0Ljk3NSIgeDI9Ii00MTI5Ljg2MiIgeTI9IjY0Ljk3NSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMSwgMCwgMCwgMSwgLTM5MzguMzE5LCAwKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmNjE1NSIvPjxzdG9wIG9mZnNldD0iMC4xMDEiIHN0b3AtY29sb3I9IiNmZjc5NmUiLz48c3RvcCBvZmZzZXQ9IjAuMjUzIiBzdG9wLWNvbG9yPSIjZmY5NzhjIi8+PHN0b3Agb2Zmc2V0PSIwLjQxNCIgc3RvcC1jb2xvcj0iI2ZmYWVhNCIvPjxzdG9wIG9mZnNldD0iMC41ODMiIHN0b3AtY29sb3I9IiNmZmJlYjUiLz48c3RvcCBvZmZzZXQ9IjAuNzY5IiBzdG9wLWNvbG9yPSIjZmZjOGJmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZjYmMyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSItNDExOC4zNTIiIHkxPSI3Ni42NjEiIHgyPSItNDExOC4zNTIiIHkyPSIxMDUuNzQ3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIC0xLCA0Mjk4LjM4NCwgMTgyLjQwOSkiIHhsaW5rOmhyZWY9IiNhIi8+PGxpbmVhckdyYWRpZW50IGlkPSJjIiB4MT0iLTQwNTIuNjE2IiB5MT0iMTUxLjU1NCIgeDI9Ii00MDk3Ljc4NSIgeTI9IjEwNi4zODUiIHhsaW5rOmhyZWY9IiNhIi8+PGxpbmVhckdyYWRpZW50IGlkPSJkIiB4MT0iLTQwMDMuMTQ1IiB5MT0iMTIzLjc1NCIgeDI9Ii00MDk2LjMwNCIgeTI9IjMwLjU5NSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMSwgMCwgMCwgMSwgLTM5MzguMzE5LCAwKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMC4xMjUiIHN0b3AtY29sb3I9IiNmYmY3ZWIiLz48c3RvcCBvZmZzZXQ9IjAuMzEyIiBzdG9wLWNvbG9yPSIjZjdlZGQzIi8+PHN0b3Agb2Zmc2V0PSIwLjUxMSIgc3RvcC1jb2xvcj0iI2YzZTZjMiIvPjxzdG9wIG9mZnNldD0iMC43MjkiIHN0b3AtY29sb3I9IiNmMmUyYjgiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMWUxYjUiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZSIgeDE9Ii00MTIzLjExNCIgeTE9Ijc2LjY2MSIgeDI9Ii00MTIzLjExNCIgeTI9IjEwMi45IiB4bGluazpocmVmPSIjYSIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZiIgeDE9Ii00MDgwLjU4MiIgeTE9IjExNS40MDkiIHgyPSItNDExMi40NyIgeTI9IjgzLjUyMSIgeGxpbms6aHJlZj0iI2EiLz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSItNDA1MC44ODciIHkxPSIxNzEuMzQ4IiB4Mj0iLTQwNTAuODg3IiB5Mj0iNzIuODk5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtMzkzOC4zMTksIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJncmF5Ii8+PHN0b3Agb2Zmc2V0PSIwLjExNCIgc3RvcC1jb2xvcj0iIzlkOTk4ZCIvPjxzdG9wIG9mZnNldD0iMC4yNjQiIHN0b3AtY29sb3I9IiNiYmIzOWMiLz48c3RvcCBvZmZzZXQ9IjAuNDIyIiBzdG9wLWNvbG9yPSIjZDNjN2E3Ii8+PHN0b3Agb2Zmc2V0PSIwLjU5IiBzdG9wLWNvbG9yPSIjZTRkNmFmIi8+PHN0b3Agb2Zmc2V0PSIwLjc3MiIgc3RvcC1jb2xvcj0iI2VlZGViNCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2YxZTFiNSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJoIiB4MT0iLTQxMTEuMTI0IiB5MT0iNTQuODIxIiB4Mj0iLTQwNjUuNzA4IiB5Mj0iNTQuODIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtMzkzOC4zMTksIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIwLjIxMyIgc3RvcC1jb2xvcj0iI2ZiZjZlOCIvPjxzdG9wIG9mZnNldD0iMC41MjMiIHN0b3AtY29sb3I9IiNmNWVhY2MiLz48c3RvcCBvZmZzZXQ9IjAuNzk2IiBzdG9wLWNvbG9yPSIjZjJlM2JiIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjFlMWI1Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImkiIHgxPSI0MDYyLjQ0MyIgeTE9IjE5LjY2MyIgeDI9IjQwMjMuMTE3IiB5Mj0iMTkuNjYzIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKC0zODk1LjcyOCkiIHhsaW5rOmhyZWY9IiNnIi8+PGxpbmVhckdyYWRpZW50IGlkPSJqIiB4MT0iLTQwMTIuODI1IiB5MT0iMTcxLjM0OCIgeDI9Ii00MDEyLjgyNSIgeTI9IjcyLjg5OSIgeGxpbms6aHJlZj0iI2ciLz48bGluZWFyR3JhZGllbnQgaWQ9ImsiIHgxPSItNDAwNi40MjYiIHkxPSI4Mi43OTMiIHgyPSItNDA2NS43MDgiIHkyPSI4Mi43OTMiIHhsaW5rOmhyZWY9IiNnIi8+PGxpbmVhckdyYWRpZW50IGlkPSJsIiB4MT0iLTQwMTcuMjY3IiB5MT0iMTAyLjg5OCIgeDI9Ii00MDY1LjcwOCIgeTI9IjEwMi44OTgiIHhsaW5rOmhyZWY9IiNkIi8+PGxpbmVhckdyYWRpZW50IGlkPSJtIiB4MT0iLTM2OC4xMjkiIHkxPSI0MjYwLjM0OCIgeDI9Ii0zNTkuODg0IiB5Mj0iNDI2MC4zNDgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCwgMSwgMSwgMCwgLTQwNjcuNTc2LCA0ODkuNjM5KSIgeGxpbms6aHJlZj0iI2EiLz48bGluZWFyR3JhZGllbnQgaWQ9Im4iIHgxPSItNDA1Mi45NyIgeTE9IjEwOS42NDMiIHgyPSItNDA1Mi45NyIgeTI9IjE3MS4zNDgiIHhsaW5rOmhyZWY9IiNnIi8+PGxpbmVhckdyYWRpZW50IGlkPSJvIiB4MT0iLTQxMTcuMjQiIHkxPSIxMTEuNjYyIiB4Mj0iLTQxMjcuMzk1IiB5Mj0iMTAxLjUwNyIgeGxpbms6aHJlZj0iI2EiLz48L2RlZnM+PHRpdGxlPkNsaW50b248L3RpdGxlPjxyZWN0IGNsYXNzPSJhIiB4PSI5Ny43OTYiIHk9Ijg2LjE5NiIgd2lkdGg9IjgxLjE1MiIgaGVpZ2h0PSI4MS4xNTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00OS4xMTMgMTM0Ljk3NSkgcm90YXRlKC00NSkiLz48cG9seWdvbiBjbGFzcz0iYiIgcG9pbnRzPSI3OC40ODggMTA4LjU5MSAwIDE4Ny4wNzkgMTU2Ljk3OCAxODcuMDc5IDc4LjQ4OCAxMDguNTkxIi8+PGNpcmNsZSBjbGFzcz0iYSIgY3g9IjE3MS42NSIgY3k9IjE0NC43MDciIHI9IjEyLjg5OSIvPjxwb2x5Z29uIGNsYXNzPSJjIiBwb2ludHM9IjEyMC45MjMgMjQuMjAzIDk3LjM4MyA2NC45NzUgMTIwLjkyMyAxMDUuNzQ3IDE2OC4wMDMgMTA1Ljc0NyAxOTEuNTQyIDY0Ljk3NSAxNjguMDAzIDI0LjIwMyAxMjAuOTIzIDI0LjIwMyIvPjxyZWN0IGNsYXNzPSJkIiB4PSIxNzUuMjciIHk9Ijc2LjY2MSIgd2lkdGg9IjkuNTI1IiBoZWlnaHQ9IjI5LjA4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzYwLjA2NSAxODIuNDA5KSByb3RhdGUoLTE4MCkiLz48cG9seWdvbiBjbGFzcz0iZSIgcG9pbnRzPSIxMjAuMzQ4IDEwMC4zMzMgMTAzLjgxNSAxMjguOTY5IDEyMC4zNDggMTU3LjYwNSAxNTMuNDE0IDE1Ny42MDUgMTY5Ljk0NyAxMjguOTY5IDE1My40MTQgMTAwLjMzMyAxMjAuMzQ4IDEwMC4zMzMiLz48cGF0aCBjbGFzcz0iZiIgZD0iTTEyNy4zODksMFYxNTQuMzVhNzcuMTc1LDc3LjE3NSwwLDAsMSwwLTE1NC4zNVoiLz48cG9seWdvbiBjbGFzcz0iZyIgcG9pbnRzPSIxOTkuOTQ0IDEwMi45IDE4NC43OTUgNzYuNjYxIDE2OS42NDYgMTAyLjkgMTk5Ljk0NCAxMDIuOSIvPjxjaXJjbGUgY2xhc3M9ImEiIGN4PSIxOTQuOTA3IiBjeT0iMTA0LjE4NyIgcj0iNS4wOTMiLz48ZWxsaXBzZSBjbGFzcz0iaCIgY3g9IjE1OC4yMDciIGN5PSI5OS40NjUiIHJ4PSIyMi4zMzMiIHJ5PSIyMi43NjIiLz48cmVjdCBjbGFzcz0iaSIgeD0iOTcuNzQ4IiB5PSI3Mi44OTkiIHdpZHRoPSIyOS42NDEiIGhlaWdodD0iOTguNDQ5Ii8+PHBhdGggY2xhc3M9ImoiIGQ9Ik0xMjcuMzg5LDEwOS42NDNBMTU0LjU3NSwxNTQuNTc1LDAsMCwwLDE3Mi44LDBIMTI3LjM4OVoiLz48cGF0aCBjbGFzcz0iayIgZD0iTTE2Ni43MTUsMEgxMjcuMzg5VjM5LjMyNkEzOS4zMjcsMzkuMzI3LDAsMCwwLDE2Ni43MTUsMFoiLz48cGF0aCBjbGFzcz0ibCIgZD0iTTk5LjExOCw3Mi45djk4LjQ0OWE0OS4yMjQsNDkuMjI0LDAsMCwxLDAtOTguNDQ5WiIvPjxwYXRoIGNsYXNzPSJtIiBkPSJNMTI3LjM4OSwyMy41MTFWMTQyLjA3NWE1OS4yODIsNTkuMjgyLDAsMCwxLDAtMTE4LjU2NFoiLz48cGF0aCBjbGFzcz0ibiIgZD0iTTEyNy4zODksNTQuNDU2djk2Ljg4MmE0OC40NDEsNDguNDQxLDAsMCwxLDAtOTYuODgyWiIvPjxwYXRoIGNsYXNzPSJvIiBkPSJNMTg2Ljk0MiwxMjMuOTI0YTguMjQ1LDguMjQ1LDAsMCwxLDExLjY2LDBsLTUuODMsNS44M1oiLz48cGF0aCBjbGFzcz0icCIgZD0iTTEyNy4zODksMTA5LjY0M2E4Ny4xMzgsODcuMTM4LDAsMCwwLTI1LjQ3NSw2MS43aDI1LjQ3NVoiLz48Y2lyY2xlIGNsYXNzPSJxIiBjeD0iMTgzLjk5OCIgY3k9IjEwNi41ODUiIHI9IjcuMTgxIi8+PC9zdmc+" height="20%" width="15%" style="position:absolute;">
<svg id="fillgauge1" width="100%" height="25%";"></svg>
</div>
<div>
<img class="reverseimage" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzAuNTU2bW0iIGhlaWdodD0iNjUuOTk3bW0iIHZpZXdCb3g9IjAgMCAyMDAgMTg3LjA3OSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmZTNhMTt9LmJ7ZmlsbDojZmZjYzhjO30uY3tmaWxsOnVybCgjYSk7fS5ke2ZpbGw6dXJsKCNiKTt9LmV7ZmlsbDp1cmwoI2MpO30uZntmaWxsOnVybCgjZCk7fS5ne2ZpbGw6dXJsKCNlKTt9Lmh7ZmlsbDp1cmwoI2YpO30uaXtmaWxsOnVybCgjZyk7fS5qe2ZpbGw6I2ZmZjt9Lmt7ZmlsbDp1cmwoI2gpO30ubHtmaWxsOnVybCgjaSk7fS5te2ZpbGw6dXJsKCNqKTt9Lm57ZmlsbDp1cmwoI2spO30ub3tmaWxsOnVybCgjbCk7fS5we2ZpbGw6dXJsKCNtKTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSItNDI0OS4zMjUiIHkxPSI2NS42NDMiIHgyPSItNDEzMi4wMDMiIHkyPSI2NS42NDMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIC00MTAzLjgzNywgMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmYzgxNGQiLz48c3RvcCBvZmZzZXQ9IjAuMDYxIiBzdG9wLWNvbG9yPSIjZmM4ZjU5Ii8+PHN0b3Agb2Zmc2V0PSIwLjIyIiBzdG9wLWNvbG9yPSIjZmRhZDczIi8+PHN0b3Agb2Zmc2V0PSIwLjM4NyIgc3RvcC1jb2xvcj0iI2ZlYzU4NyIvPjxzdG9wIG9mZnNldD0iMC41NjUiIHN0b3AtY29sb3I9IiNmZmQ2OTYiLz48c3RvcCBvZmZzZXQ9IjAuNzU5IiBzdG9wLWNvbG9yPSIjZmZlMDllIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZlM2ExIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSItNDIwOC40ODEiIHkxPSIxODcuMDc5IiB4Mj0iLTQyMDguNDgxIiB5Mj0iOTQuNDMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgLTEsIDQzMTMuMTI1LCAyODEuNTA5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2YyNDQyNSIvPjxzdG9wIG9mZnNldD0iMC4wNDQiIHN0b3AtY29sb3I9IiNmMzUyMzAiLz48c3RvcCBvZmZzZXQ9IjAuMTc4IiBzdG9wLWNvbG9yPSIjZjc3NzRjIi8+PHN0b3Agb2Zmc2V0PSIwLjMxOSIgc3RvcC1jb2xvcj0iI2ZhOTY2MyIvPjxzdG9wIG9mZnNldD0iMC40NjUiIHN0b3AtY29sb3I9IiNmY2FlNzUiLz48c3RvcCBvZmZzZXQ9IjAuNjIiIHN0b3AtY29sb3I9IiNmZWJmODIiLz48c3RvcCBvZmZzZXQ9IjAuNzg5IiBzdG9wLWNvbG9yPSIjZmZjOThhIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZjYzhjIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImMiIHgxPSItNDEyNS4wMDciIHkxPSI4Mi44NDEiIHgyPSItNDEyNS4wMDciIHkyPSIxMDIuNjU0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtNDEwMy44MzcsIDApIiB4bGluazpocmVmPSIjYiIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgeDE9Ii00MTk3LjQxOCIgeTE9IjE1OC4yOTYiIHgyPSItNDEzOS44NTIiIHkyPSIxMDAuNzMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTEsIDAsIDAsIDEsIC00MTAzLjgzNywgMCkiIHhsaW5rOmhyZWY9IiNiIi8+PGxpbmVhckdyYWRpZW50IGlkPSJlIiB4MT0iLTQxODguODgiIHkxPSIxMjEuNzYzIiB4Mj0iLTQxMzguNTU2IiB5Mj0iNzEuNDM5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtNDEwMy44MzcsIDApIiB4bGluazpocmVmPSIjYiIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZiIgeDE9Ii00MTI5Ljc3IiB5MT0iODIuODQxIiB4Mj0iLTQxMjkuNzciIHkyPSIxMDIuNjU0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIC0xLCA0MTU1LjcwMywgMTg1LjQ5NSkiIHhsaW5rOmhyZWY9IiNiIi8+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTQxNzcuMjMzIiB5MT0iNzEuNzU0IiB4Mj0iLTQxMjUuMDA3IiB5Mj0iNzEuNzU0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIC0xLCA0MTk4LjQwNCwgMTQzLjUwOCkiIHhsaW5rOmhyZWY9IiNiIi8+PGxpbmVhckdyYWRpZW50IGlkPSJoIiB4MT0iLTQxOTkuMzAyIiB5MT0iMTA3LjA3OSIgeDI9Ii00MjQ5LjMyNSIgeTI9IjEwNy4wNzkiIHhsaW5rOmhyZWY9IiNhIi8+PGxpbmVhckdyYWRpZW50IGlkPSJpIiB4MT0iLTQxNzkuNjI5IiB5MT0iNDUuMzA1IiB4Mj0iLTQyMjAuMzI2IiB5Mj0iODYuMDAyIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtNDEwMy44MzcsIDApIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZlM2ExIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImoiIHgxPSItNDE0MC41NjYiIHkxPSIyNC40MTQiIHgyPSItNDIxMy4wNzIiIHkyPSI5Ni45MiIgeGxpbms6aHJlZj0iI2EiLz48bGluZWFyR3JhZGllbnQgaWQ9ImsiIHgxPSItNDEzOC41MTgiIHkxPSIxMTEuOTIzIiB4Mj0iLTQxMjYuMTkzIiB5Mj0iOTkuNTk4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAxLCAtNDEwMy44MzcsIDApIiB4bGluazpocmVmPSIjYiIvPjxsaW5lYXJHcmFkaWVudCBpZD0ibCIgeDE9Ii00MTEwLjEzNSIgeTE9IjY2LjkwNCIgeDI9Ii00MTcwLjc2MSIgeTI9IjYuMjc4IiB4bGluazpocmVmPSIjaSIvPjxsaW5lYXJHcmFkaWVudCBpZD0ibSIgeDE9Ii0zNjcuNDc1IiB5MT0iNDI0NC45MjIiIHgyPSItMzU1LjUzIiB5Mj0iNDI0NC45MjIiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCwgMSwgMSwgMCwgLTQyMzMuMDkzLCA0ODkuNjM5KSIgeGxpbms6aHJlZj0iI2IiLz48L2RlZnM+PHRpdGxlPlRydW1wPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMTA3LjUwOCIgY3k9IjEyNi44NjMiIHI9IjYwLjIxNiIvPjxyZWN0IGNsYXNzPSJiIiB4PSIxNC40MDYiIHk9Ijk0LjQzIiB3aWR0aD0iNTAuMzkzIiBoZWlnaHQ9IjExLjMzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3OS4yMDQgMjAwLjE5KSByb3RhdGUoLTE4MCkiLz48Y2lyY2xlIGNsYXNzPSJjIiBjeD0iODYuODI3IiBjeT0iNjUuNjQzIiByPSI1OC42NjEiLz48cmVjdCBjbGFzcz0iZCIgeD0iNjQuNzk4IiB5PSI5NC40MyIgd2lkdGg9Ijc5LjY5MSIgaGVpZ2h0PSI5Mi42NDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwOS4yODggMjgxLjUwOSkgcm90YXRlKC0xODApIi8+PHJlY3QgY2xhc3M9ImIiIHg9IjIxLjIzMyIgeT0iNDUuMTk3IiB3aWR0aD0iNTMuMTEzIiBoZWlnaHQ9IjUzLjExMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM2Ljc0MSA1NC44MDkpIHJvdGF0ZSgtNDUpIi8+PHBvbHlnb24gY2xhc3M9ImUiIHBvaW50cz0iMzIuNjEgMTAyLjY1NCAyMS4xNzEgODIuODQxIDkuNzMyIDEwMi42NTQgMzIuNjEgMTAyLjY1NCIvPjxwYXRoIGNsYXNzPSJmIiBkPSJNNjQuOCw3MS45NDdhODEuNDExLDgxLjQxMSwwLDAsMSwwLDExNS4xMzJMNy4yMzMsMTI5LjUxM1oiLz48Y2lyY2xlIGNsYXNzPSJnIiBjeD0iNTkuODgxIiBjeT0iOTYuNjAxIiByPSIzNS41ODQiLz48cmVjdCBjbGFzcz0iaCIgeD0iMjEuMTcxIiB5PSI4Mi44NDEiIHdpZHRoPSI5LjUyNSIgaGVpZ2h0PSIxOS44MTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUxLjg2NyAxODUuNDk1KSByb3RhdGUoLTE4MCkiLz48cmVjdCBjbGFzcz0iaSIgeD0iMjEuMTcxIiB5PSI2MC42NjciIHdpZHRoPSI1Mi4yMjYiIGhlaWdodD0iMjIuMTc0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NC41NjcgMTQzLjUwOCkgcm90YXRlKC0xODApIi8+PHBhdGggZD0iTTE0NC45OTEsMTMyLjA5QTU0Ljk4OSw1NC45ODksMCwwLDAsOTAsMTg3LjA3OUgxOTkuOTc5QTU0Ljk4OSw1NC45ODksMCwwLDAsMTQ0Ljk5MSwxMzIuMDlaIi8+PHBvbHlnb24gY2xhc3M9ImoiIHBvaW50cz0iMTQ1LjQ4OCAxMzIuMDkgMTMyLjYzOCAxMTkuMjQgNjQuNzk5IDE4Ny4wNzggOTAuNSAxODcuMDc4IDE0NS40ODggMTMyLjA5Ii8+PHBhdGggY2xhc3M9ImsiIGQ9Ik05NS40NjYsODIuMDY3aDUwLjAyM1YxMzIuMDlBNTAuMDIzLDUwLjAyMywwLDAsMSw5NS40NjYsODIuMDY3WiIvPjxyZWN0IGNsYXNzPSJhIiB4PSI5NS40NjYiIHk9IjYwLjY2NyIgd2lkdGg9IjUwLjAyMyIgaGVpZ2h0PSIzMy43NjMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MC45NTQgMTU1LjA5OCkgcm90YXRlKC0xODApIi8+PGNpcmNsZSBjbGFzcz0ibCIgY3g9Ijk2LjE0MSIgY3k9IjY1LjY1MyIgcj0iMjguNzc3Ii8+PHBhdGggY2xhc3M9Im0iIGQ9Ik0uNDc3LDYwLjY2N2ExMDIuNTM4LDEwMi41MzgsMCwwLDEsMTQ1LjAxMiwwWiIvPjxjaXJjbGUgY2xhc3M9Im4iIGN4PSIyOC41MTkiIGN5PSIxMDUuNzYiIHI9IjguNzE1Ii8+PHBhdGggY2xhc3M9Im8iIGQ9Ik02MC42NDcsMEE2MC42MjYsNjAuNjI2LDAsMCwxLC4wMjEsNjAuNjI2WiIvPjxwYXRoIGNsYXNzPSJwIiBkPSJNMy4zODIsMTI1LjY2MmExMS45NDUsMTEuOTQ1LDAsMCwxLDE2Ljg5MiwwbC04LjQ0Niw4LjQ0NloiLz48Y2lyY2xlIGNsYXNzPSJiIiBjeD0iMTQuNDA2IiBjeT0iMTA1LjM1MyIgcj0iNS4zOTgiLz48L3N2Zz4=" height="20%" width="15%" style="position:absolute;">
<svg id="fillgauge2" width="100%" height="25%" ;"></svg>
</div>
<div>
<script language="JavaScript">
var config1 = liquidFillGaugeDefaultSettings();
var config2 = liquidFillGaugeDefaultSettings();config2.circleColor = "#FF0000";
config2.textColor = "#CC0000";config2.waveTextColor = "#FF9999";
config2.waveColor = "#FF4D4D";var gauge1 = loadLiquidFillGauge("fillgauge1","Hillary Clinton", 0, 0, config1);
var gauge2 = loadLiquidFillGauge("fillgauge2","Donald Trump", 0, 0, config2);update_trackdata();
setInterval("update_trackdata()",
2000);function update_trackdata() {$.getJSON("jsonOne.json", function(data) {
console.log(data)
var clinton = regular_vote(data[0]["vote"] )
var trump = regular_vote(data[1]["vote"] )
var value1 = parseFloat(( clinton/ 270) * 100);
var value2 = parseFloat(( trump / 270) * 100);
gauge1.update(Math.round(value1), data[0]["vote"]);
gauge2.update(Math.round(value2), data[1]["vote"]);
});}function regular_vote(value){if( value > 270){return 270;}else{return value;}}
</script>
</div>
<script>
function segColor(c){ return {
"Trump" : "#FF0000",
"Clinton":"#3399FF",
"Autre": "#808080",
"Blanc": "#000000"}[c]; }
function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
return "<h4>"+n+"</h4><table>"+
"<tr><td>Clinton</td><td>"+(d.Clinton)+"</td></tr>"+
"<tr><td>Trump</td><td>"+(d.Trump)+"</td></tr>"+
"<tr><td>Autre</td><td>"+(d.Autre)+"</td></tr>"+
"<tr><td>Blanc</td><td>"+(d.Blanc)+"</td></tr>"+
"</table>";
}
var sampleData ={}; /* Sample random data. */
var myVar = setInterval(updateData,2000)
function updateData() {
d3.json("donneesVotes2.json", function(error, data) {
d3.select("#statesvg").remove()
console.log(data)
d3.select("#map")
.append("svg")
.attr("id","statesvg")
.attr("width",960)
.attr("height",350)
.style("text-align","center")
.style("display","block")
.style("margin","auto")
uStates.draw("#statesvg", data, tooltipHtml);
});};
/* draw states on id #statesvg */
d3.select(self.frameElement).style("height", "100%");
</script>
<div class="panel-heading text-center"><h2>Winner Estimator</h2></div>
<div class="chart-gauge" style="position:relative;margin-top: 0px;margin-bottom: 0px;">
<!--div id="estimator" class="panel-body" style="position:relative;"-->
<img src= "http://3.bp.blogspot.com/-XD7Otqkqwdc/Ti2ZZ3T2uPI/AAAAAAAAAFw/geaHCUCLB00/s1600/donkey-democrat-logo%255B1%255D.jpg" height="15%", width="15%" style="position:relative;margin:20% 0% 0% 0%;" class="img-responsive reverseimage">
<img class="reverseimage" src= "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Republicanlogo.svg/200px-Republicanlogo.svg.png" height="15%", width="15%" style="position:relative;margin:-17% 0% 0% 85%;" class="img-responsive">
<!--/div-->
</div>
<script type="text/javascript" src="main.js"></script>
<script language="JavaScript">
setInterval("update_trackdata2()", 2000); function update_trackdata2() {
$.getJSON("jsonTwo.json", function(data) {
console.log(data[0])
var trump = data[1]["percent"]
//0var clinton = data[0]["percent"]
console.log(trump);
needle.moveTo(trump);});}
</script>
</div>
</div>
</body>
</html>