-
Notifications
You must be signed in to change notification settings - Fork 2
/
template.html
161 lines (143 loc) · 6.38 KB
/
template.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sichere und geheime Köpfe</title>
<script src="lib/vis.min.js"></script>
<script src="lib/jquery-2.1.4.min.js"></script>
<link href="lib/vis.min.css" rel="stylesheet" type="text/css" />
<style>
.vis-labelset {width:250px;}
.vis-item {border-width:2px;}
.vis-odd {background-color:#eee;}
.vis-range {background-color:#ccc;}
.menu {position:absolute;top:0;left:20px;margin:10px;z-index:9999;}
.breg .vis-item-content {background-color:rgba(255,255,255,0.8);background-clip:content-box;}
.rg {background-image:linear-gradient(#f00 50%, #0c0 50%);}
.sg {background-image:linear-gradient(#000 50%, #ff0 50%);}
.sr {background-image:linear-gradient(#000 50%, #f00 50%);}
//COLORTEMPLATE
.cdsu {background-color:#000; color:#ddd;}
.spd {background-color:#f00;}
.fdp {background-color:#ff0;}
.gruene {background-color:#0c0;}
.noparty {background-color:#eee;}
.vis-range.selected, .person {border-color:#FF7500;background-color:#FFF785;color:#000;}
.vis-range.person {background-color:#FFCF00;}
</style>
</head>
<body>
<div id="einleitung" style="font-size:13px;">
Den Anstoß für diese Visualisierung gab die <a href="http://logbuch-netzpolitik.de/lnp168-es-war-nicht-alles-schlecht-im-rechtsstaat#t=43:23.003" target="_blank">Folge 168 des Podcasts Logbuch Netzpolitik</a>. Der <a href="https://nelaco.de/lnp/bndbkamtmibfv.png">erste Versuch</a> war schnell erstellt, sehr einfach und nicht fehlerfrei (Fritsche). Außerdem wurde sich etwas "interaktives" gewünscht, hier nun also ein zweiter Versuch. <b>Hinweis:</b> In einigen Fällen habe ich bisher nur Jahreszahlen/Monate gefunden. In diesen Fällen wird immer der erste Tag als Start/End-Datum angenommen.<br />
<b>Mouseover:</b> vollständige Namen/Bezeichnungen<br />
<b>Klick auf einen Namen:</b> alle bisherigen Ämter der Person auf einen Blick (soweit die Daten schon eingetragen sind)<br />
<b>Parteizugehörigkeit:</b> schaltet zwischen einer Darstellung der Parteizugehörigkeit (<span class="cdsu">CDU/CSU</span>, <span class="spd">SPD</span>, <span class="fdp">FDP</span>, <span class="gruene">Grüne</span>, <span class="noparty">parteilos</span>, <span style="background-color:#ccc;">unbekannt</span>) und der Standardansicht hin und her
</div>
<div id="visualization_top" style="margin-top:10px;position:relative;">
<noscript>Ohne Javascript geht hier leider nix :/</noscript>
<div class="menu">
<input type="button" id="partei" value="Parteizugehörigkeit"/>
</div>
</div>
<div id="visualization_bottom" style="margin-bottom:10px;position:relative;">
</div>
<div style="font-size:13px;">
Noch Vorschläge, Ideen oder Beiträge? Gerne per Mail an nelacoättnelacopunktde (<a href="https://nelaco.de/public.asc">PGP</a>) oder <a href="https://github.com/corvusmo/geheime-koepfe" target="_blank">auf Github</a>.
</div>
<script type="text/javascript">
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) { dd='0'+dd }
if(mm<10) { mm='0'+mm }
today = yyyy+'-'+mm+'-'+dd;
var groups = new vis.DataSet([
{id:99,content:'Ereignisse',title:'Was so alles passiert ist',order:99},
{'GROUPTEMPLATE':1}]);
var items = new vis.DataSet([
{id:'A',group:0,content:'Schröder I',className:'breg rg',start:'1998-10-27',end:'2002-10-22'},
{id:'B',group:0,content:'Schröder II',className:'breg rg',start:'2002-10-22',end:'2005-11-22'},
{id:'C',group:0,content:'Merkel I',className:'breg sr',start:'2005-11-22',end:'2009-10-28'},
{id:'D',group:0,content:'Merkel II',className:'breg sg',start:'2009-10-28',end:'2013-12-17'},
{id:'E',group:0,content:'Merkel III',className:'breg sr',start:'2013-12-17',end:today},
{'ITEMTEMPLATE':1}]);
var selectedname = '';
var groups_top = new vis.DataView(groups, {
filter: function (group) {
return (group.id < 9 && group.id != 6);
}
});
var items_top = new vis.DataView(items, {
filter: function (item) {
return (item.group < 9 && item.group != 6);
}
});
var options_top = {
orientation: 'top',
selectable: false,
stack: false,
start: '2000-01-01',
end: '2016-12-31',
};
var groups_bottom = new vis.DataView(groups, {
filter: function (group) {
return (group.id == 99) || (group.id == 6) || (group.id == selectedname && selectedname !='');
}
});
var items_bottom = new vis.DataView(items, {
filter: function (item) {
return (item.group == 99) || (item.group == 6) || (item.group == selectedname && selectedname !='');
}
});
var options_bottom = {
orientation: 'bottom',
selectable: false,
stack: true,
start: '2000-01-01',
end: '2016-12-31',
};
var container_top = document.getElementById('visualization_top');
var container_bottom = document.getElementById('visualization_bottom');
var timeline_top = new vis.Timeline(container_top);
timeline_top.setOptions(options_top);
timeline_top.setGroups(groups_top);
timeline_top.setItems(items_top);
var timeline_bottom = new vis.Timeline(container_bottom);
timeline_bottom.setOptions(options_bottom);
timeline_bottom.setGroups(groups_bottom);
timeline_bottom.setItems(items_bottom);
timeline_top.on('rangechange', function (properties) {
if (properties.byUser) {
timeline_bottom.setWindow(properties.start, properties.end, {animation:false});
}
});
timeline_bottom.on('rangechange', function (properties) {
if (properties.byUser) {
timeline_top.setWindow(properties.start, properties.end, {animation:false});
}
});
document.getElementById('partei').onclick = function() {
$(".ThomasdeMaizire, .WolfgangSchuble, .PeterAltmaier, .RonaldPofalla, .KlausDieterFritsche, .GnterHei, .HansPeterFriedrich, .EckartWerthebach, .BrunoKahl").toggleClass("cdsu");
$(".FrankWalterSteinmeier, .ErnstUhrlau, .OttoSchily, .GttrikWewer, .ClausHenningSchapper, .BrigitteZypries").toggleClass("spd");
$(".GuidoWesterwelle, .GerhardSchindler").toggleClass("fdp");
$(".JoschkaFischer").toggleClass("gruene");
$(".AugustHanning").toggleClass("noparty");
};
$(".vis-foreground").on('click', ".vis-item", function() {
if ( $(this).hasClass( 'selected') ) {
$(".vis-range").removeClass("selected");
selectedname = '';
}
else {
$(".vis-range").removeClass("selected");
selectedname = this.className.replace(/( |vis-item|vis-range|vis-readonly|cdsu|spd|gruene|fdp|noparty)/g,'');
$("."+selectedname).addClass("selected");
}
//and now try to update the DataView
groups_bottom.refresh();
items_bottom.refresh();
});
</script>
</body>
</html>