/
data_from_csv.html
99 lines (84 loc) · 2.77 KB
/
data_from_csv.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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Topotime using CSV Data</title>
<meta charset="utf-8" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38248179-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<style>
.duringline, .duringends {
stroke: darkgray;
stroke-width: 2px;
stroke-dasharray: 5 5;
}
.shortPeriod {
fill: orange;
}
.periodls, .periodee {
rx: 5;
fill: red;
stroke: black;
}
text.period {
pointer-events: none;
}
rect.period {
fill: green;
}
rect.period.estimated {
fill: yellow;
}
rect.periodduring {
rx: 10;
fill: purple;
}
rect.periodduring.estimated {
fill: darkred;
}
</style>
<body onload="timelineViz()">
<div>
<p style="width:600px;">This is an example of the timeline layout using topotime with data pulled from a CSV file.</p>
</div>
<div id="controls">
<button onclick="adjustOut()">Stretch</button>
<button onclick="adjustIn()">Compress</button>
</div>
<div id="vizcontainer">
</div>
<div>
<div style="height:20px;width:100%;">
<div style="position:absolute;left:10px;" id="leftAxisLabel"></div>
<div style="position:absolute;left:47.5%;" id="middleAxisLabel"></div>
<div style="position:absolute;right:10px;" id="rightAxisLabel"></div>
</div>
<pre>
SAMPLE DATA:
"id","label","s","ls","ee","e","duration","cstep","cduration","css_class","widgets","profession","highlights","during"
313,"One thing",1923-05-05,,,1955-12-23,,,,"lifespan",245,"blue","raw, pique",
820,"Another",1928-01-15,1928-05-25,,1960-06-01,,,,"lifespan",11,"blue","lily, berm",
821,"A third thing",">820",,,,"20y",,,"movement",645,"blue",,
822,"Something Else","<313",,,">820",,"5y","3m","outburst",123,"parrot","opal",
823,"A variation",1920-11-11,,1971-01-01,1971-12-31,,,,"lifespan",4,"parrot","kudzu, raw",
10019,"Some other variation","<820.ls",,,1965-04-12,,,,"lifespan",15,"blue","lulu, passport",
10030,"Yet another thing",">10019",,,,"100y","15y","11m","outburst",0,"parrot","violin, umpire",""
10031,"One very last thing",1923-05-05,,,1955-12-23,"20y",,,"outburst",0,"parrot","violin, umpire",1
</pre>
</div>
<footer>
<script src="js/d3.v3.min.js" type="text/javascript">
</script> <script src="js/timeline.js" type="text/javascript">
</script> <script src="js/example_csv.js" type="text/javascript">
</script> <script src="js/topo_projection.js" type="text/javascript">
</script>
</footer>
</body>
</html>