-
Notifications
You must be signed in to change notification settings - Fork 1
/
historytimeline.html
73 lines (71 loc) · 2.79 KB
/
historytimeline.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
<!DOCTYPE html>
<!-- this is historytimeline.html begun July 26, 2014 -->
<html>
<head>
<meta charset="utf-8">
<title>History Timeline</title>
<style>
body {
background-color: #D4CBC2;
font-family: Palatino, serif;
}
.tlContainer {
padding: 20px 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>History Timeline Examples</h1>
<div id="overviewAContainer" class="tlContainer"></div>
<div id="overviewBContainer" class="tlContainer"></div>
<div id="overviewCContainer" class="tlContainer"></div>
<div id="ideasBasicContainer" class="tlContainer"></div>
<script src="js/d3.v3.4.11.min.js"></script>
<script src="js/historytimeline.js"></script>
<!-- these are really JSON files which must be loaded on the fly -->
<script src="tl/HBoverview1TL.json"></script>
<script src="tl/HBideasBasic1TL.json"></script>
<script>
d3.tl.overviewA = new d3.tl.Timeline();
d3.tl.overviewA.loadTimeline(d3.tl.overviewTL);
d3.tl.harvardStyle = {
"footerHTML": "<span class=\"drawnBy\">This is the canonical version of the Overview Timeline. To see the exact dates of an era and descriptions of its precipitating and ending events, hover over it.</span>"
};
d3.tl.overviewA.loadTimeline(d3.tl.harvardStyle);
d3.tl.overviewA.setup("overviewAContainer");
d3.tl.overviewA.draw();
// =================
d3.tl.overviewB = new d3.tl.Timeline();
d3.tl.overviewB.loadTimeline(d3.tl.overviewTL);
d3.tl.targetEraDemo = {
"borderColor": "#0404B4", // Emory blue;
"footerHTML": "<span>This timeline demonstrates the \"targetEra\" feature which highlights an era by reducing the opacity of the others and the ability to override default properties (such as <i>borderColor</i>).</span>"
};
d3.tl.overviewB.loadTimeline(d3.tl.targetEraDemo);
d3.tl.overviewB.setup("overviewBContainer");
d3.tl.overviewB.draw("Persian Period");
// =================
d3.tl.overviewC = new d3.tl.Timeline();
d3.tl.overviewC.loadTimeline(d3.tl.overviewTL);
d3.tl.harvardStyle = {
"scale": 0.5,
"footerHTML": "<span>This timeline demonstrates the \"scale\" property (scale = 0.5).</span>"
};
d3.tl.overviewC.loadTimeline(d3.tl.harvardStyle);
d3.tl.overviewC.setup("overviewCContainer");
d3.tl.overviewC.draw();
// =================
d3.tl.ideasBasic = new d3.tl.Timeline();
d3.tl.ideasBasic.loadTimeline(d3.tl.ideasBasicTL);
d3.tl.princetonStyle = {
"borderColor": "#FF5800",
"footerHTML": "<span class=\"drawnBy\">This timeline needs additional features before it can be viewed correctly.</span>"
};
d3.tl.ideasBasic.loadTimeline(d3.tl.princetonStyle);
d3.tl.ideasBasic.setup("ideasBasicContainer");
d3.tl.ideasBasic.draw();
// console.log(d3.tl.overviewA);
</script>
</body>
</html>