Skip to content

Commit 96af3bc

Browse files
cmgerbercmgerber
committed
update layout of index.html and adding graphs
1 parent ecdd734 commit 96af3bc

File tree

3 files changed

+168
-5
lines changed

3 files changed

+168
-5
lines changed

‎css/style.css

+33
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ textarea {}
3636
::selection {}
3737
::-moz-selection {}
3838

39+
/* header */
40+
#header {
41+
color: rgb(255,153,0);
42+
text-align: left;
43+
font-weight: 700;
44+
font-style: italic;
45+
}
46+
47+
/* collapsable tree */
3948
.node {
4049
cursor: pointer;
4150
}
@@ -56,6 +65,30 @@ textarea {}
5665
stroke-width: 1.5px;
5766
}
5867

68+
/* view finder */
69+
70+
svg {
71+
font: 10px sans-serif;
72+
}
73+
74+
.area {
75+
fill: steelblue;
76+
clip-path: url(#clip);
77+
}
78+
79+
.axis path,
80+
.axis line {
81+
fill: none;
82+
stroke: #000;
83+
shape-rendering: crispEdges;
84+
}
85+
86+
.brush .extent {
87+
stroke: #fff;
88+
fill-opacity: .125;
89+
shape-rendering: crispEdges;
90+
}
91+
5992

6093
/* container */
6194

‎index.html

+17-2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,28 @@
77
<link rel="stylesheet" type="text/css" href="css/style.css" />
88
</head>
99
<body>
10-
<div id='container'></div>
10+
<div id="wrapper">
11+
12+
<div id ="header">
13+
<h2 id="main-title">PLOS Cloud Explorer</h2>
14+
</div>
15+
16+
<div id='tree'></div>
17+
18+
<div id="dashboard">
19+
dashboard
20+
<div id="chartContainer">
21+
</div>
22+
</div>
23+
24+
</div>
25+
<!-- <div id='container'></div>
1126
1227
<div id="dashboard">
1328
dashboard
1429
<div id="chartContainer">
1530
</div>
16-
</div>
31+
</div> -->
1732

1833
</body>
1934
<script src="/js/script.js"></script>

‎js/script.js

+118-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,66 @@
1-
$(document).ready(function() {
1+
// $(document).ready(function() {
2+
3+
// setting css for elements
4+
var windowHeight = window.innerHeight - 8;
5+
var windowWidth = window.innerWidth - 8;
6+
7+
var borderWidth = 1;
8+
9+
var headerHeight = 0.07 * windowHeight;
10+
if (headerHeight > 50) { headerHeight = 50; }
11+
12+
var headerFontSize = 0.05 * windowHeight;
13+
if (headerFontSize > 36) { headerFontSize = 36; }
14+
15+
var headerFontSpacing = windowWidth * 0.0025;
16+
if (headerFontSpacing > 3) { headerFontSpacing = 3; }
17+
18+
var topMargin = 0.02 * windowHeight;
19+
if (topMargin > 10) { topMargin = 10; }
20+
21+
var divPadding = 0.01 * windowHeight;
22+
if (divPadding > 8) { divPadding = 8; }
23+
24+
25+
var rightWidth = 0.3 * windowWidth - (2 * divPadding);
26+
if (rightWidth > 400 - (2 * divPadding)) { rightWidth = 400 - (2 * divPadding); }
27+
28+
var centerWidth = windowWidth - rightWidth - (4 * divPadding) - (4 * borderWidth);
29+
30+
var mainHeight = windowHeight - headerHeight - topMargin;
31+
var dashboardHeight = mainHeight - (2 * divPadding) - (2 * borderWidth);
32+
var optionsHeight = (mainHeight * 0.4) - (2 * divPadding) - (2 * borderWidth);
33+
var navigatorHeight = mainHeight - optionsHeight - topMargin - (4 * divPadding) - (4 * borderWidth);
34+
35+
d3.select("#wrapper")
36+
.style("height", windowHeight + "px")
37+
.style("width", windowWidth + "px")
38+
.style("margin", "4px");
39+
d3.select("#header")
40+
.style("font-size", headerFontSize + "px")
41+
.style("letter-spacing", headerFontSpacing + "px")
42+
.style("width", "96%")
43+
.style("height", headerHeight + "px")
44+
.style("vertical-align","middle")
45+
.style("background-color", "rgb(68,68,68)")
46+
.style("padding-left", "1%")
47+
.style("padding-right", "3%");
48+
d3.select("#tree")
49+
.style("float", "left")
50+
.style("margin-top", topMargin + "px")
51+
.style("width", centerWidth + "px")
52+
.style("height", mainHeight + "px");
53+
d3.select("#dashboard")
54+
.style("float", "left")
55+
.style("width", rightWidth + "px")
56+
.style("height", dashboardHeight + "px")
57+
.style("padding", divPadding + "px")
58+
.style("margin-top", topMargin + "px")
59+
.style("border", borderWidth + "px solid")
60+
.style("border-color", "rgb(229,150,54)")
61+
.style("background-color", "#fff");
62+
63+
//collapsing tree
264

365
var margin = {top: 20, right: 120, bottom: 20, left: 120},
466
width = 960 - margin.right - margin.left,
@@ -14,12 +76,59 @@ $(document).ready(function() {
1476
var diagonal = d3.svg.diagonal()
1577
.projection(function(d) { return [d.y, d.x]; });
1678

17-
var svg = d3.select("body").append("svg")
79+
var svg = d3.select("#tree").append("svg")
1880
.attr("width", width + margin.right + margin.left)
1981
.attr("height", height + margin.top + margin.bottom)
2082
.append("g")
2183
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
2284

85+
//View Finder vars
86+
//view finder based on: http://bl.ocks.org/mbostock/1667367
87+
88+
var margin = {top: 0, right: 0, bottom: 0, left: 0},
89+
margin2 = {top: 0, right: 0, bottom: 20, left: 0},
90+
width = ((document.getElementById("options").offsetWidth) * 0.8) - margin.left - margin.right, //200 - margin.left - margin.right,
91+
height = ((document.getElementById("options").offsetWidth) * 0.25) - margin.top - margin.bottom, //100 - margin.top - margin.bottom,
92+
height2 = ((document.getElementById("options").offsetWidth) * 0.25) - margin2.top - margin2.bottom; //100 - margin2.top - margin2.bottom;
93+
94+
var parseDate = d3.time.format("%Y").parse;
95+
96+
var x = d3.time.scale().range([0, width]),
97+
x2 = d3.time.scale().range([0, width]),
98+
y = d3.scale.linear().range([height, 0]),
99+
y2 = d3.scale.linear().range([height2, 0]);
100+
101+
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
102+
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
103+
yAxis = d3.svg.axis().scale(y).orient("left");
104+
105+
var brush = d3.svg.brush()
106+
.x(x2)
107+
.on("brush", brushed);
108+
109+
var area2 = d3.svg.area()
110+
.interpolate("monotone")
111+
.x(function(d) { return x2(d.years); })
112+
.y0(height2)
113+
.y1(function(d) { return y2(d.studies); });
114+
115+
var svg = d3.select("#options").append("svg")
116+
.attr("width", width + margin.left + margin.right)
117+
.attr("height", height + margin.top + margin.bottom);
118+
119+
svg.append("defs").append("clipPath")
120+
.attr("id", "clip")
121+
.append("rect")
122+
.attr("width", width)
123+
.attr("height", height);
124+
125+
var context = svg.append("g")
126+
.attr("class", "context")
127+
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
128+
129+
130+
//load data for collapsing tree
131+
23132
d3.json("/data/plos.json", function(error, flare) {
24133
console.log(flare);
25134
root = flare;
@@ -138,4 +247,10 @@ $(document).ready(function() {
138247
}
139248
update(d);
140249
}
141-
});
250+
251+
// View Finder
252+
253+
254+
255+
256+
// });

0 commit comments

Comments
 (0)