-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (88 loc) · 3.16 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
<!DOCTYPE html>
<html>
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@independetviz">
<meta name="twitter:creator" content="@nathaniharris">
<meta name="twitter:title" content="Beer Visualization">
<meta name="twitter:description" content="A Interactive Data Visualization of Beer">
<meta name="twitter:image" content="http://farm9.staticflickr.com/8814/28633242951_d9024686f6_b.jpg">
<meta charset="UTF-8">
<title>Visualizing Beer</title>
<meta name="Nathan" content="Visualizing Beer">
<meta name="description" content="a data visualization of craft beer">
<meta name="keywords" content="beer,data visualization, data, craft beer">
<meta property="og:image" content="https://pbs.twimg.com/media/Co0HegRUkAAUxFG.jpg:large">
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
#legend{
width: 155px;
height: 350px;
float: right;
}
#chart{
float: left;
width: 800px;
height: 550px;
}
#wrapper{
width: 1000px;
height: 550px;
}
#legendTitle{
float:right;
}
#legendSub1{
text-align:center;
}
#chartTitle{
margin-left:50px;
}
#share-container{
float: bottom;
}
.twitter-share-button .fb-share-button{
display:block;
}
.twitter-share-button{
float:left;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="author"> by <a href="https://www.twitter.com/nathaniharris"><u> Nathan Harris</u></a> </div>
<div id = "wrapper">
<div id= "chartTitle" style= "font-size: 16px" style= "font-family: Sans-Serif">Beer Visualization by IBUs and Alcohol by Volume</div>
<div id= "legendTitle">
<div id ="legendSub1" style= "font-size: 12px"> Beer Styles</div>
<div id = "legendSub2" style = "font-size: 10px"> click to select beers by style </div>
</div>
<div id= "chart"></div>
<div id="legend"></div>
</div>
<div id = "share-container">
<div class="fb-share-button" data-href="https://nharrisanalyst.github.io/beerviz/" data-layout="button_count" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnharrisanalyst.github.io%2Fbeerviz%2F&src=sdkpreparse">Share</a></div> <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<script src="beervis.js"></script>
</body>
</html>