Mercurial > hg > NetworkVis
comparison d3s_examples/python-neo4jrestclient/static/platin/loader.html @ 8:18ef6948d689
new d3s examples
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Thu, 01 Oct 2015 17:17:27 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
7:45dad9e38c82 | 8:18ef6948d689 |
---|---|
1 <!DOCTYPE html> | |
2 <html height="100%"> | |
3 | |
4 <head> | |
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
6 <title>PLATIN</title> | |
7 | |
8 <style type="text/css"> | |
9 .legend > table, .legend > div { | |
10 width: 200px !important; | |
11 height: 100px !important; | |
12 display: block; | |
13 overflow-y: scroll; | |
14 position: absolute; | |
15 right: 0px; | |
16 bottom: 0px; | |
17 font-size: 12px; | |
18 } | |
19 </style> | |
20 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
21 <link href="css/platin.css" rel="stylesheet" type="text/css"> | |
22 <script src="platin.js"></script> | |
23 | |
24 </head> | |
25 | |
26 <body height="100%"> | |
27 | |
28 <noscript> | |
29 <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> | |
30 Your web browser must have JavaScript enabled in order for this application to display correctly. | |
31 </div> | |
32 </noscript> | |
33 | |
34 <table width=100%> | |
35 <tr> | |
36 <td colspan=2 width=100% align="center"> | |
37 <div style="width:100%; position:relative"> | |
38 <div style='width: 100%; float:left;'> | |
39 <a href="http://www.informatik.uni-leipzig.de:8080/geotemco/" target="_"><img width='18%' src='images/geotemco.png'></a> | |
40 <a href="http://www.topoi.org/group/d-6/" target="_"><img width='18%' src='images/topoi.png'></a> | |
41 <a href="http://skruse.github.io/PLATIN/" target="_"><img width='18%' src='images/platin.png'></a> | |
42 <a href="http://www.mpiwg-berlin.mpg.de /de/index.html" target=""><img width='18%' src='images/mpiwg.gif'></a> | |
43 <a href="https://de.dariah.eu/geobrowser" target="_"><img width='18%' src='images/dariah.png'></a> | |
44 </div> | |
45 </div> | |
46 </td> | |
47 </tr> | |
48 <tr > | |
49 <td width=50%> | |
50 <fieldset id="dataloaderContainerDiv" style="position:relative;"> | |
51 <legend>Load Data</legend> | |
52 </fieldset> | |
53 </td> | |
54 <td rowspan=3 width=50% valign=top> | |
55 <fieldset id="storytellingContainerDiv" style="position:relative;"> | |
56 <legend>Data History</legend> | |
57 </fieldset> | |
58 </td> | |
59 </tr> | |
60 <tr> | |
61 <td width=50%> | |
62 <fieldset id="overlayloaderContainerDiv" style="position:relative;"> | |
63 <legend>Load Overlay</legend> | |
64 </fieldset> | |
65 </td> | |
66 </tr> | |
67 <tr> | |
68 <td width=50%> | |
69 <fieldset id="storytelling2ContainerDiv" style="position:relative;"> | |
70 <legend>Storytelling</legend> | |
71 </fieldset> | |
72 </td> | |
73 </tr> | |
74 <tr> | |
75 <td width=50%> | |
76 <div id="mapContainerDiv" style="position:relative;"></div> | |
77 </td> | |
78 <td width=50%> | |
79 <div id="piechartContainerDiv" style="height:580px; position:relative;"></div> | |
80 </td> | |
81 </tr> | |
82 </table> | |
83 <div id="plotContainerDiv" style="position:relative;"></div> | |
84 <div id="tableContainerDiv" style="position:relative;"></div> | |
85 | |
86 <script> | |
87 | |
88 var datasets = []; | |
89 var mapDiv = document.getElementById("mapContainerDiv"); | |
90 var map = new WidgetWrapper(); | |
91 var mapWidget = new MapWidget(map,mapDiv,{ | |
92 mapTitle: "Publication Place" | |
93 }); | |
94 var timeDiv = document.getElementById("plotContainerDiv"); | |
95 var time = new WidgetWrapper(); | |
96 var timeWidget = new FuzzyTimelineWidget(time,timeDiv,{ | |
97 timeTitle: "Publication Date" | |
98 }); | |
99 var tableDiv = document.getElementById("tableContainerDiv"); | |
100 var table = new WidgetWrapper(); | |
101 var tableWidget = new TableWidget(table,tableDiv); | |
102 | |
103 var dataloaderDiv = document.getElementById("dataloaderContainerDiv"); | |
104 var dataloader = new WidgetWrapper(); | |
105 var dataloaderWidget = new DataloaderWidget(dataloader,dataloaderDiv); | |
106 | |
107 var overlayloaderDiv = document.getElementById("overlayloaderContainerDiv"); | |
108 var overlayloader = new WidgetWrapper(); | |
109 var overlayloaderWidget = new OverlayloaderWidget(overlayloader,overlayloaderDiv); | |
110 overlayloaderWidget.attachMapWidget(mapWidget); | |
111 | |
112 var piechartDiv = document.getElementById("piechartContainerDiv"); | |
113 var piechart = new WidgetWrapper(); | |
114 var piechartWidget = new PieChartWidget(piechart,piechartDiv); | |
115 | |
116 var storytellingDiv = document.getElementById("storytellingContainerDiv"); | |
117 var storytelling = new WidgetWrapper(); | |
118 var storytellingWidget = new StorytellingWidget(storytelling,storytellingDiv); | |
119 | |
120 var storytelling2Div = document.getElementById("storytelling2ContainerDiv"); | |
121 var storytelling2 = new WidgetWrapper(); | |
122 var storytellingv2Widget = new Storytellingv2Widget(storytelling2,storytelling2Div); | |
123 | |
124 dataloaderWidget.loadFromURL(); | |
125 | |
126 </script> | |
127 | |
128 </body> | |
129 | |
130 </html> |