https://wileyjones.com/twitterProject/index.html

1<head>
2    <title>Twitter API Case Study</title>
3    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
4    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
5    <link href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
6
7    

7<script src="https://code.jquery.com/jquery-2.1.3.js"></script>

7
8    

8<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

8
9    

9<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.1/tinycolor.js"></script>

9
10    

10<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

10
11
12    

12<script src="vis.js"></script>

12
13    

13<script>
14        main();
15    </script>

15
16</head>
17
18<body>
19
20  <div class="jumbotron">
21      <div class="container">
22          <h1>Twitter API and Music Service Case Study</h1>
23      </div>
24  </div>
25
26  <div class="container">
27      <div class="row">
28        <h1>Mobile Platform and Music Service Insights</h1>
29              <div class="col-lg-6" id="platform">
30                  <h2 class="well">% of total Tweets coming from different mobile platforms (400K sampled)</h2>
31               </div>
32              <div class="col-lg-6" id="service">
33                  <h2 class="well">% of total Tweets with content specific to a music service (300K sampled)</h2>
34               </div>
35      </div>
36  </div>
37
38  <div class="jumbotron">
39
40      <div class="container"><h1>Service Breakdown by Mobile Platform<h1></div>
41
42
43  </div>
44     
45  <div class="container">
46     <h2 class="well">% of total Tweets from a given platform regarding a specific music service</h2>
47          </div>
48
49
50    <div class="container" id="barz"></div>
51
52</body>
53
54<!-- STYLING ========================================================================================================= -->
55<style>
56
57#platform {
58    text-align: center;
59}
60
61
62#service {
63    text-align: center;
64}
65
66.jumbotron {
67    background: linear-gradient(to bottom right, #2980b9, #8e44ad); /* Standard syntax */
68    color: white;
69
70}
71
72h1 {
73  text-align: center;
74  color: #7f8c8d;
75  font-size: 52px;
76}
77
78h2 {
79    color: #7f8c8d;
80    font-size: 36px;
81    text-align: center;
82}
83
84
85
86.axis path,
87.axis line {
88    fill: none;
89    stroke: black;
90    shape-rendering: crispEdges;
91}
92
93.axis text {
94    font-family: sans-serif;
95    font-size: 11px;
96}
97
98.d3-tip {
99  line-height: 2;
100  font-weight: bold;
101  padding: 12px;
102  background: #2c3e50;
103  color: white;
104  border-radius: 2px;
105  width: 200px;
106}
107
108/* Creates a small triangle extender for the tooltip */
109.d3-tip:after {
110  box-sizing: border-box;
111  display: inline;
112  font-size: 20px;
113  width: 100%;
114  line-height: 2;
115  color: #2c3e50;
116  content: "\25BC";
117  position: absolute;
118  text-align: center;
119}
120
121/* Style northward tooltips differently */
122.d3-tip.n:after {
123  margin: -10px 0 0 0;
124  top: 100%;
125  left: 0;
126}
127.axis path,
128.axis line {
129    fill: none;
130    stroke: #2c3e50;
131    shape-rendering: crispEdges;
132}
133
134.axis text {
135    font-family: sans-serif;
136    font-size: 12px;
137}
138.node {
139  text-color: #ecf0f1;
140  stroke-width: 1.5px;
141}
142
143.link {
144  stroke: #8e44ad;
145  fill: #8e44ad;
146}
147/*
148.node {
149  stroke: #fff;
150  stroke-width: 1.5px;
151}
152
153.link {
154  stroke: red;
155  stroke-opacity: .6;
156}
157*/
158</style>