Skip to content

Commit bfa76a9

Browse files
author
xuwenyihust
committed
Some updates.
1 parent be4992e commit bfa76a9

File tree

7 files changed

+85
-32
lines changed

7 files changed

+85
-32
lines changed

‎web/static/css/dashboard.css‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
body.application{
22
background: #f2f2f2;
3-
padding: 60px 20px 0;
3+
padding: 0px 0px 0px;
4+
}
5+
6+
body.application p[class^="summary"] {
7+
padding: 0 45px 0;
8+
}
9+
10+
body.application p[class^="sub-summary"] {
11+
padding: 0 45px 5px;
12+
}
13+
14+
body.application div[class^="row"] {
15+
padding: 0 50px 0;
416
}
517

618
body.application > .container-fluid {
@@ -17,22 +29,33 @@ body.application div[class^="col-"] div[class^="col-"] {
1729
padding-right: 15px;
1830
}
1931

20-
body.application hr {
21-
border-color: #d7d7d7;
22-
margin: 10px 0;
32+
p.summary {
33+
font-size: 200%;
34+
color: black;
35+
opacity: .8;
36+
}
37+
p.sub-summary {
38+
font-size: 100%;
39+
color: black;
40+
opacity: .5;
2341
}
2442

25-
.navbar-inverse {
26-
background-color: blue;
27-
border-color: blue;
43+
.navbar-inverse .container-fluid {
44+
background-color: #1E90FF;
45+
border-color: #1E90FF;
46+
padding: 10px 8px 10px;
2847
}
2948

3049
.navbar-inverse .navbar-nav > li > a,
31-
32-
3350
.navbar a.navbar-brand {
34-
color: #fbfbfb;
51+
color: white;
3552
text-decoration: none;
53+
font-size: 180%;
54+
}
55+
56+
.navbar p.navbar-text {
57+
color: white;
58+
text-decoration: none;
3659
}
3760

3861
.bar{
@@ -48,12 +71,13 @@ body.application hr {
4871
}
4972

5073
.axis path,
51-
5274
.axis line {
5375
fill: none;
54-
stroke: #000;
76+
stroke: black;
77+
opacity: 0.3;
5578
shape-rendering: crispEdges;
5679
}
80+
5781

5882
.path_line {
5983
fill: none;
@@ -66,6 +90,14 @@ body.application hr {
6690
stroke-width: 3;
6791
}
6892

93+
.tick text{
94+
font-size: 10px;
95+
}
96+
97+
.tick line{
98+
stroke: blue;
99+
opacity: 0.2;
100+
}
69101

70102
.chart_wrapper {
71103
background: #fff;
@@ -75,9 +107,9 @@ body.application hr {
75107
}
76108

77109
.chart_wrapper .chart_title {
78-
border-bottom: 1px solid #d7d7d7;
110+
border-bottom: 1px solid white;
79111
padding: 7px 10px 4px;
80-
font: 16px;
112+
font-size: 120%;
81113
}
82114

83115
.chart_wrapper .chart_stage {
@@ -87,8 +119,8 @@ body.application hr {
87119
}
88120

89121
.chart_wrapper .text_stage {
90-
font: 20px;
91-
padding: 5px 10px;
122+
font: 18px;
123+
padding: 0px 10px;
92124
position: relative;
93125
}
94126

‎web/static/js/count.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,14 @@ var count_y = d3.scale.linear().range([count_height, 0]);
1313
var count_xAxis = d3.svg.axis()
1414
.scale(count_x)
1515
.orient("bottom")
16+
//.tickSize(-count_height, 0, 0)
17+
.outerTickSize(0);
18+
1619
var count_yAxis = d3.svg.axis()
1720
.scale(count_y)
1821
.orient("left")
22+
.tickSize(-count_width, 0, 0)
23+
.outerTickSize(0)
1924
.ticks(10);
2025

2126
// Define the div for the tooltip
@@ -32,6 +37,7 @@ var count = d3.select("#count").append("svg")
3237
.attr("transform",
3338
"translate(" + count_margin.left + "," + count_margin.top + ")");
3439

40+
3541
// load the data
3642
d3.json("/data/counts", function(error, data) {
3743
data.forEach(function(d) {
@@ -52,6 +58,7 @@ d3.json("/data/counts", function(error, data) {
5258
.attr("dx", "-.8em")
5359
.attr("dy", "-.55em")
5460
.attr("transform", "rotate(-90)" );
61+
5562
count.append("g")
5663
.attr("class", "y axis")
5764
.call(count_yAxis)
@@ -62,8 +69,9 @@ d3.json("/data/counts", function(error, data) {
6269
.style("text-anchor", "end")
6370
.text("Count");
6471

72+
6573
var line = d3.svg.line()
66-
.x(function(d) { return 5+count_x(d.Time); })
74+
.x(function(d) { return 9+count_x(d.Time); })
6775
.y(function(d) { return count_y(d.Count);});
6876

6977

@@ -77,7 +85,7 @@ d3.json("/data/counts", function(error, data) {
7785
.data(data)
7886
.enter().append("circle")
7987
.attr("r", 3)
80-
.attr("cx", function(d) { return 5+count_x(d.Time); })
88+
.attr("cx", function(d) { return 9+count_x(d.Time); })
8189
.attr("cy", function(d) { return count_y(d.Count); })
8290
.style("fill", "blue")
8391

‎web/static/js/keyword.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var xAxis = d3.svg.axis()
1818
var yAxis = d3.svg.axis()
1919
.scale(y)
2020
.orient("left")
21+
//.tickSize(-width, 0, 0)
2122
.ticks(10);
2223
// add the SVG element
2324
var keyword = d3.select("#keyword").append("svg")

‎web/static/js/ratio.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//
33
// Ratio Chart
44
//
5-
var ratio_margin = {top: 20, right: 100, bottom: 70, left: 140},
5+
var ratio_margin = {top: 20, right: 100, bottom: 30, left: 160},
66
ratio_width = 400 - ratio_margin.left - ratio_margin.right,
77
ratio_height = 300 - ratio_margin.top - ratio_margin.bottom;
88

‎web/static/js/total.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ var total = d3.select("#total").append("svg")
66
.attr("height", 120)
77
.append("g")
88
.attr("transform",
9-
"translate(" + 40 + "," + 70 + ")");
9+
"translate(" + 20 + "," + 70 + ")");
1010

1111
var t = 0
1212
// load the data

‎web/static/js/track.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ var track = d3.select("#track").append("svg")
66
.attr("height", 120)
77
.append("g")
88
.attr("transform",
9-
"translate(" + 40 + "," + 70 + ")");
9+
"translate(" + 20 + "," + 70 + ")");
1010
var tr = ''
1111
// load the data
1212
d3.json("data/tracking_word", function(error, data) {

‎web/templates/dashboard.html‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,26 @@
88
<script src="http://d3js.org/d3.v3.min.js"></script>
99
</head>
1010

11+
1112
<body class="application">
1213

13-
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
14-
<div class="container-fluid">
15-
<div class="navbar-header">
14+
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
15+
<div class="container-fluid">
16+
<div class="navbar-header">
1617
<a class="navbar-brand" href="./">Real-Time Twitter Analysis</a>
17-
</div>
18-
</div>
19-
</div>
18+
<p class="navbar-text">Wenyi Xu</p>
19+
</div>
20+
</div>
21+
</div>
22+
23+
24+
25+
<p class="summary">
26+
Dashboard
27+
<p>
28+
<p class="sub-summary">
29+
Track tweets filtered by specific hashtag and do real-time analysis using Spark Streaming.
30+
<p>
2031

2132
<div class="row">
2233

@@ -31,18 +42,19 @@
3142
</div>
3243
</div>
3344

34-
<div class="col-sm-4">
45+
46+
<div class="col-sm-3">
3547
<div class="chart_wrapper">
3648
<div class="chart_title">
37-
Total Number of Tracked Tweets
49+
Num of Tweets
3850
</div>
3951
<div class="chart_stage" id="total">
4052
<script src="static/js/total.js"></script>
4153
</div>
4254
</div>
43-
</div>
55+
</div>
4456

45-
<div class="col-sm-4">
57+
<div class="col-sm-3">
4658
<div class="chart_wrapper">
4759
<div class="chart_title">
4860
Tracked Hashtag
@@ -80,7 +92,7 @@
8092
</div>
8193
</div>
8294

83-
<div class="col-sm-4">
95+
<div class="col-sm-3">
8496
<div class="chart_wrapper">
8597
<div class="chart_title">
8698
Pos/Neg Ratio

0 commit comments

Comments
 (0)