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> |
