jos
9 years ago
7 changed files with 119017 additions and 14 deletions
Unified View
Diff Options
-
+13 -14featureRequests.html
-
+808 -0showcase/projects/bridge/css/vis.css
-
+82713 -0showcase/projects/bridge/data.json
-
+68 -0showcase/projects/bridge/demo.html
-
+35361 -0showcase/projects/bridge/js/vis.js
-
+53 -0showcase/projects/bridge/parseData.js
-
+1 -0showcase/projects/bridge/timeline.json
+ 13
- 14
featureRequests.html
View File
+ 808
- 0
showcase/projects/bridge/css/vis.css
View File
| @ -0,0 +1,808 @@ | |||||
| .vis .overlay { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| /* Must be displayed above for example selected Timeline items */ | |||||
| z-index: 10; | |||||
| } | |||||
| .vis-active { | |||||
| box-shadow: 0 0 10px #86d5f8; | |||||
| } | |||||
| /* override some bootstrap styles screwing up the timelines css */ | |||||
| .vis [class*="span"] { | |||||
| min-height: 0; | |||||
| width: auto; | |||||
| } | |||||
| .vis.timeline { | |||||
| } | |||||
| .vis.timeline.root { | |||||
| position: relative; | |||||
| border: 1px solid #bfbfbf; | |||||
| overflow: hidden; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .vispanel { | |||||
| position: absolute; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .vispanel.center, | |||||
| .vis.timeline .vispanel.left, | |||||
| .vis.timeline .vispanel.right, | |||||
| .vis.timeline .vispanel.top, | |||||
| .vis.timeline .vispanel.bottom { | |||||
| border: 1px #bfbfbf; | |||||
| } | |||||
| .vis.timeline .vispanel.center, | |||||
| .vis.timeline .vispanel.left, | |||||
| .vis.timeline .vispanel.right { | |||||
| border-top-style: solid; | |||||
| border-bottom-style: solid; | |||||
| overflow: hidden; | |||||
| } | |||||
| .vis.timeline .vispanel.center, | |||||
| .vis.timeline .vispanel.top, | |||||
| .vis.timeline .vispanel.bottom { | |||||
| border-left-style: solid; | |||||
| border-right-style: solid; | |||||
| } | |||||
| .vis.timeline .background { | |||||
| overflow: hidden; | |||||
| } | |||||
| .vis.timeline .vispanel > .content { | |||||
| position: relative; | |||||
| } | |||||
| .vis.timeline .vispanel .shadow { | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| box-shadow: 0 0 10px rgba(0,0,0,0.8); | |||||
| /* TODO: find a nice way to ensure shadows are drawn on top of items | |||||
| z-index: 1; | |||||
| */ | |||||
| } | |||||
| .vis.timeline .vispanel .shadow.top { | |||||
| top: -1px; | |||||
| left: 0; | |||||
| } | |||||
| .vis.timeline .vispanel .shadow.bottom { | |||||
| bottom: -1px; | |||||
| left: 0; | |||||
| } | |||||
| .vis.timeline .labelset { | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .labelset .vlabel { | |||||
| position: relative; | |||||
| left: 0; | |||||
| top: 0; | |||||
| width: 100%; | |||||
| color: #4d4d4d; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .labelset .vlabel { | |||||
| border-bottom: 1px solid #bfbfbf; | |||||
| } | |||||
| .vis.timeline .labelset .vlabel:last-child { | |||||
| border-bottom: none; | |||||
| } | |||||
| .vis.timeline .labelset .vlabel .inner { | |||||
| display: inline-block; | |||||
| padding: 5px; | |||||
| } | |||||
| .vis.timeline .labelset .vlabel .inner.hidden { | |||||
| padding: 0; | |||||
| } | |||||
| .vis.timeline .itemset { | |||||
| position: relative; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .itemset .background, | |||||
| .vis.timeline .itemset .foreground { | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| overflow: visible; | |||||
| } | |||||
| .vis.timeline .axis { | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| height: 0; | |||||
| left: 0; | |||||
| z-index: 1; | |||||
| } | |||||
| .vis.timeline .foreground .group { | |||||
| position: relative; | |||||
| box-sizing: border-box; | |||||
| border-bottom: 1px solid #bfbfbf; | |||||
| } | |||||
| .vis.timeline .foreground .group:last-child { | |||||
| border-bottom: none; | |||||
| } | |||||
| .vis.timeline .item { | |||||
| position: absolute; | |||||
| color: #1A1A1A; | |||||
| border-color: #97B0F8; | |||||
| border-width: 1px; | |||||
| background-color: #D5DDF6; | |||||
| display: inline-block; | |||||
| padding: 5px; | |||||
| } | |||||
| .vis.timeline .item.selected { | |||||
| border-color: #FFC200; | |||||
| background-color: #FFF785; | |||||
| /* z-index must be higher than the z-index of custom time bar and current time bar */ | |||||
| z-index: 2; | |||||
| } | |||||
| .vis.timeline .editable .item.selected { | |||||
| cursor: move; | |||||
| } | |||||
| .vis.timeline .item.point.selected { | |||||
| background-color: #FFF785; | |||||
| } | |||||
| .vis.timeline .item.box { | |||||
| text-align: center; | |||||
| border-style: solid; | |||||
| border-radius: 2px; | |||||
| } | |||||
| .vis.timeline .item.point { | |||||
| background: none; | |||||
| } | |||||
| .vis.timeline .item.dot { | |||||
| position: absolute; | |||||
| padding: 0; | |||||
| border-width: 4px; | |||||
| border-style: solid; | |||||
| border-radius: 4px; | |||||
| } | |||||
| .vis.timeline .item.range { | |||||
| border-style: solid; | |||||
| border-radius: 2px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .vis.timeline .item.background { | |||||
| overflow: hidden; | |||||
| border: none; | |||||
| background-color: rgba(213, 221, 246, 0.4); | |||||
| box-sizing: border-box; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | |||||
| .vis.timeline .item.range .content { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| max-width: 100%; | |||||
| overflow: hidden; | |||||
| } | |||||
| .vis.timeline .item.background .content { | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| overflow: hidden; | |||||
| max-width: 100%; | |||||
| margin: 5px; | |||||
| } | |||||
| .vis.timeline .item.line { | |||||
| padding: 0; | |||||
| position: absolute; | |||||
| width: 0; | |||||
| border-left-width: 1px; | |||||
| border-left-style: solid; | |||||
| } | |||||
| .vis.timeline .item .content { | |||||
| white-space: nowrap; | |||||
| overflow: hidden; | |||||
| } | |||||
| .vis.timeline .item .delete { | |||||
| background: url('img/timeline/delete.png') no-repeat top center; | |||||
| position: absolute; | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| top: 0; | |||||
| right: -24px; | |||||
| cursor: pointer; | |||||
| } | |||||
| .vis.timeline .item.range .drag-left { | |||||
| position: absolute; | |||||
| width: 24px; | |||||
| height: 100%; | |||||
| top: 0; | |||||
| left: -4px; | |||||
| cursor: w-resize; | |||||
| } | |||||
| .vis.timeline .item.range .drag-right { | |||||
| position: absolute; | |||||
| width: 24px; | |||||
| height: 100%; | |||||
| top: 0; | |||||
| right: -4px; | |||||
| cursor: e-resize; | |||||
| } | |||||
| .vis.timeline .timeaxis { | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| } | |||||
| .vis.timeline .timeaxis.foreground { | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| } | |||||
| .vis.timeline .timeaxis.background { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .vis.timeline .timeaxis .text { | |||||
| position: absolute; | |||||
| color: #4d4d4d; | |||||
| padding: 3px; | |||||
| white-space: nowrap; | |||||
| } | |||||
| .vis.timeline .timeaxis .text.measure { | |||||
| position: absolute; | |||||
| padding-left: 0; | |||||
| padding-right: 0; | |||||
| margin-left: 0; | |||||
| margin-right: 0; | |||||
| visibility: hidden; | |||||
| } | |||||
| .vis.timeline .timeaxis .grid.vertical { | |||||
| position: absolute; | |||||
| border-left: 1px solid; | |||||
| } | |||||
| .vis.timeline .timeaxis .grid.minor { | |||||
| border-color: #e5e5e5; | |||||
| } | |||||
| .vis.timeline .timeaxis .grid.major { | |||||
| border-color: #bfbfbf; | |||||
| } | |||||
| .vis.timeline .currenttime { | |||||
| background-color: #FF7F6E; | |||||
| width: 2px; | |||||
| z-index: 1; | |||||
| } | |||||
| .vis.timeline .customtime { | |||||
| background-color: #6E94FF; | |||||
| width: 2px; | |||||
| cursor: move; | |||||
| z-index: 1; | |||||
| } | |||||
| .vis.timeline.root { | |||||
| /* | |||||
| -webkit-transition: height .4s ease-in-out; | |||||
| transition: height .4s ease-in-out; | |||||
| */ | |||||
| } | |||||
| .vis.timeline .vispanel { | |||||
| /* | |||||
| -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; | |||||
| transition: height .4s ease-in-out, top .4s ease-in-out; | |||||
| */ | |||||
| } | |||||
| .vis.timeline .axis { | |||||
| /* | |||||
| -webkit-transition: top .4s ease-in-out; | |||||
| transition: top .4s ease-in-out; | |||||
| */ | |||||
| } | |||||
| /* TODO: get animation working nicely | |||||
| .vis.timeline .item { | |||||
| -webkit-transition: top .4s ease-in-out; | |||||
| transition: top .4s ease-in-out; | |||||
| } | |||||
| .vis.timeline .item.line { | |||||
| -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; | |||||
| transition: height .4s ease-in-out, top .4s ease-in-out; | |||||
| } | |||||
| /**/ | |||||
| .vis.timeline .vispanel.background.horizontal .grid.horizontal { | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| height: 0; | |||||
| border-bottom: 1px solid; | |||||
| } | |||||
| .vis.timeline .vispanel.background.horizontal .grid.minor { | |||||
| border-color: #e5e5e5; | |||||
| } | |||||
| .vis.timeline .vispanel.background.horizontal .grid.major { | |||||
| border-color: #bfbfbf; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.major { | |||||
| width: 100%; | |||||
| position: absolute; | |||||
| color: #4d4d4d; | |||||
| white-space: nowrap; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.major.measure{ | |||||
| padding: 0px 0px 0px 0px; | |||||
| margin: 0px 0px 0px 0px; | |||||
| border: 0px; | |||||
| visibility: hidden; | |||||
| width: auto; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.minor{ | |||||
| position: absolute; | |||||
| width: 100%; | |||||
| color: #bebebe; | |||||
| white-space: nowrap; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.minor.measure{ | |||||
| padding: 0px 0px 0px 0px; | |||||
| margin: 0px 0px 0px 0px; | |||||
| border: 0px; | |||||
| visibility: hidden; | |||||
| width: auto; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.title{ | |||||
| position: absolute; | |||||
| color: #4d4d4d; | |||||
| white-space: nowrap; | |||||
| bottom: 20px; | |||||
| text-align: center; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.title.measure{ | |||||
| padding: 0px 0px 0px 0px; | |||||
| margin: 0px 0px 0px 0px; | |||||
| visibility: hidden; | |||||
| width: auto; | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.title.left { | |||||
| bottom: 0px; | |||||
| -webkit-transform-origin: left top; | |||||
| -moz-transform-origin: left top; | |||||
| -ms-transform-origin: left top; | |||||
| -o-transform-origin: left top; | |||||
| transform-origin: left bottom; | |||||
| -webkit-transform: rotate(-90deg); | |||||
| -moz-transform: rotate(-90deg); | |||||
| -ms-transform: rotate(-90deg); | |||||
| -o-transform: rotate(-90deg); | |||||
| transform: rotate(-90deg); | |||||
| } | |||||
| .vis.timeline .dataaxis .yAxis.title.right { | |||||
| bottom: 0px; | |||||
| -webkit-transform-origin: right bottom; | |||||
| -moz-transform-origin: right bottom; | |||||
| -ms-transform-origin: right bottom; | |||||
| -o-transform-origin: right bottom; | |||||
| transform-origin: right bottom; | |||||
| -webkit-transform: rotate(90deg); | |||||
| -moz-transform: rotate(90deg); | |||||
| -ms-transform: rotate(90deg); | |||||
| -o-transform: rotate(90deg); | |||||
| transform: rotate(90deg); | |||||
| } | |||||
| .vis.timeline .legend { | |||||
| background-color: rgba(247, 252, 255, 0.65); | |||||
| padding: 5px; | |||||
| border-color: #b3b3b3; | |||||
| border-style:solid; | |||||
| border-width: 1px; | |||||
| box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55); | |||||
| } | |||||
| .vis.timeline .legendText { | |||||
| /*font-size: 10px;*/ | |||||
| white-space: nowrap; | |||||
| display: inline-block | |||||
| } | |||||
| .vis.timeline .graphGroup0 { | |||||
| fill:#4f81bd; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #4f81bd; | |||||
| } | |||||
| .vis.timeline .graphGroup1 { | |||||
| fill:#f79646; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #f79646; | |||||
| } | |||||
| .vis.timeline .graphGroup2 { | |||||
| fill: #8c51cf; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #8c51cf; | |||||
| } | |||||
| .vis.timeline .graphGroup3 { | |||||
| fill: #75c841; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #75c841; | |||||
| } | |||||
| .vis.timeline .graphGroup4 { | |||||
| fill: #ff0100; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #ff0100; | |||||
| } | |||||
| .vis.timeline .graphGroup5 { | |||||
| fill: #37d8e6; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #37d8e6; | |||||
| } | |||||
| .vis.timeline .graphGroup6 { | |||||
| fill: #042662; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #042662; | |||||
| } | |||||
| .vis.timeline .graphGroup7 { | |||||
| fill:#00ff26; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #00ff26; | |||||
| } | |||||
| .vis.timeline .graphGroup8 { | |||||
| fill:#ff00ff; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #ff00ff; | |||||
| } | |||||
| .vis.timeline .graphGroup9 { | |||||
| fill: #8f3938; | |||||
| fill-opacity:0; | |||||
| stroke-width:2px; | |||||
| stroke: #8f3938; | |||||
| } | |||||
| .vis.timeline .fill { | |||||
| fill-opacity:0.1; | |||||
| stroke: none; | |||||
| } | |||||
| .vis.timeline .bar { | |||||
| fill-opacity:0.5; | |||||
| stroke-width:1px; | |||||
| } | |||||
| .vis.timeline .point { | |||||
| stroke-width:2px; | |||||
| fill-opacity:1.0; | |||||
| } | |||||
| .vis.timeline .legendBackground { | |||||
| stroke-width:1px; | |||||
| fill-opacity:0.9; | |||||
| fill: #ffffff; | |||||
| stroke: #c2c2c2; | |||||
| } | |||||
| .vis.timeline .outline { | |||||
| stroke-width:1px; | |||||
| fill-opacity:1; | |||||
| fill: #ffffff; | |||||
| stroke: #e5e5e5; | |||||
| } | |||||
| .vis.timeline .iconFill { | |||||
| fill-opacity:0.3; | |||||
| stroke: none; | |||||
| } | |||||
| div.network-manipulationDiv { | |||||
| border-width: 0; | |||||
| border-bottom: 1px; | |||||
| border-style:solid; | |||||
| border-color: #d6d9d8; | |||||
| background: #ffffff; /* Old browsers */ | |||||
| background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */ | |||||
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ | |||||
| background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ | |||||
| background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */ | |||||
| background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */ | |||||
| background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ | |||||
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| width: 100%; | |||||
| height: 30px; | |||||
| } | |||||
| div.network-manipulation-editMode { | |||||
| position:absolute; | |||||
| left: 0; | |||||
| top: 15px; | |||||
| height: 30px; | |||||
| } | |||||
| div.network-manipulation-closeDiv { | |||||
| position:absolute; | |||||
| right: 0; | |||||
| top: 0; | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| background-position: 20px 3px; | |||||
| background-repeat: no-repeat; | |||||
| background-image: url("img/network/cross.png"); | |||||
| cursor: pointer; | |||||
| -webkit-touch-callout: none; | |||||
| -webkit-user-select: none; | |||||
| -khtml-user-select: none; | |||||
| -moz-user-select: none; | |||||
| -ms-user-select: none; | |||||
| user-select: none; | |||||
| } | |||||
| div.network-manipulation-closeDiv:hover { | |||||
| opacity: 0.6; | |||||
| } | |||||
| div.network-manipulationUI { | |||||
| position:relative; | |||||
| top:-7px; | |||||
| font-family: verdana; | |||||
| font-size: 12px; | |||||
| -moz-border-radius: 15px; | |||||
| border-radius: 15px; | |||||
| display:inline-block; | |||||
| background-position: 0px 0px; | |||||
| background-repeat:no-repeat; | |||||
| height:24px; | |||||
| margin: 0px 0px 0px 10px; | |||||
| vertical-align:middle; | |||||
| cursor: pointer; | |||||
| padding: 0px 8px 0px 8px; | |||||
| -webkit-touch-callout: none; | |||||
| -webkit-user-select: none; | |||||
| -khtml-user-select: none; | |||||
| -moz-user-select: none; | |||||
| -ms-user-select: none; | |||||
| user-select: none; | |||||
| } | |||||
| div.network-manipulationUI:hover { | |||||
| box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); | |||||
| } | |||||
| div.network-manipulationUI:active { | |||||
| box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); | |||||
| } | |||||
| div.network-manipulationUI.back { | |||||
| background-image: url("img/network/backIcon.png"); | |||||
| } | |||||
| div.network-manipulationUI.none:hover { | |||||
| box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); | |||||
| cursor: default; | |||||
| } | |||||
| div.network-manipulationUI.none:active { | |||||
| box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); | |||||
| } | |||||
| div.network-manipulationUI.none { | |||||
| padding: 0; | |||||
| } | |||||
| div.network-manipulationUI.notification{ | |||||
| margin: 2px; | |||||
| font-weight: bold; | |||||
| } | |||||
| div.network-manipulationUI.add { | |||||
| background-image: url("img/network/addNodeIcon.png"); | |||||
| } | |||||
| div.network-manipulationUI.edit { | |||||
| background-image: url("img/network/editIcon.png"); | |||||
| } | |||||
| div.network-manipulationUI.edit.editmode { | |||||
| background-color: #fcfcfc; | |||||
| border-style:solid; | |||||
| border-width:1px; | |||||
| border-color: #cccccc; | |||||
| } | |||||
| div.network-manipulationUI.connect { | |||||
| background-image: url("img/network/connectIcon.png"); | |||||
| } | |||||
| div.network-manipulationUI.delete { | |||||
| background-image: url("img/network/deleteIcon.png"); | |||||
| } | |||||
| /* top right bottom left */ | |||||
| div.network-manipulationLabel { | |||||
| margin: 0px 0px 0px 23px; | |||||
| line-height: 25px; | |||||
| } | |||||
| div.network-seperatorLine { | |||||
| display:inline-block; | |||||
| width:1px; | |||||
| height:20px; | |||||
| background-color: #bdbdbd; | |||||
| margin: 5px 7px 0px 15px; | |||||
| } | |||||
| div.network-navigation_wrapper { | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| div.network-navigation { | |||||
| width:34px; | |||||
| height:34px; | |||||
| -moz-border-radius: 17px; | |||||
| border-radius: 17px; | |||||
| position:absolute; | |||||
| display:inline-block; | |||||
| background-position: 2px 2px; | |||||
| background-repeat:no-repeat; | |||||
| cursor: pointer; | |||||
| -webkit-touch-callout: none; | |||||
| -webkit-user-select: none; | |||||
| -khtml-user-select: none; | |||||
| -moz-user-select: none; | |||||
| -ms-user-select: none; | |||||
| user-select: none; | |||||
| } | |||||
| div.network-navigation:hover { | |||||
| box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30); | |||||
| } | |||||
| div.network-navigation:active { | |||||
| box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); | |||||
| } | |||||
| div.network-navigation.up { | |||||
| background-image: url("img/network/upArrow.png"); | |||||
| bottom:50px; | |||||
| left:55px; | |||||
| } | |||||
| div.network-navigation.down { | |||||
| background-image: url("img/network/downArrow.png"); | |||||
| bottom:10px; | |||||
| left:55px; | |||||
| } | |||||
| div.network-navigation.left { | |||||
| background-image: url("img/network/leftArrow.png"); | |||||
| bottom:10px; | |||||
| left:15px; | |||||
| } | |||||
| div.network-navigation.right { | |||||
| background-image: url("img/network/rightArrow.png"); | |||||
| bottom:10px; | |||||
| left:95px; | |||||
| } | |||||
| div.network-navigation.zoomIn { | |||||
| background-image: url("img/network/plus.png"); | |||||
| bottom:10px; | |||||
| right:15px; | |||||
| } | |||||
| div.network-navigation.zoomOut { | |||||
| background-image: url("img/network/minus.png"); | |||||
| bottom:10px; | |||||
| right:55px; | |||||
| } | |||||
| div.network-navigation.zoomExtends { | |||||
| background-image: url("img/network/zoomExtends.png"); | |||||
| bottom:50px; | |||||
| right:15px; | |||||
| } | |||||
| div.network-tooltip { | |||||
| position: absolute; | |||||
| visibility: hidden; | |||||
| padding: 5px; | |||||
| white-space: nowrap; | |||||
| -moz-border-radius: 3px; | |||||
| -webkit-border-radius: 3px; | |||||
| border-radius: 3px; | |||||
| border: 1px solid; | |||||
| box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5); | |||||
| } | |||||
+ 82713
- 0
showcase/projects/bridge/data.json
File diff suppressed because it is too large
View File
+ 68
- 0
showcase/projects/bridge/demo.html
View File
| @ -0,0 +1,68 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <title>Timeline | Basic demo</title> | |||||
| <style type="text/css"> | |||||
| body, html { | |||||
| font-family: sans-serif; | |||||
| } | |||||
| </style> | |||||
| <script src="./js/vis.js"></script> | |||||
| <link href="./css/vis.css" rel="stylesheet" type="text/css" /> | |||||
| </head> | |||||
| <body> | |||||
| <span id="status">Loading data...</span> | |||||
| <div id="visualization"></div> | |||||
| <script type="text/javascript"> | |||||
| function loadJSON(path, success, error) { | |||||
| selectedFile = path; | |||||
| var xhr = new XMLHttpRequest(); | |||||
| xhr.onreadystatechange = function() { | |||||
| if (xhr.readyState === 4) { | |||||
| if (xhr.status === 200) { | |||||
| success(JSON.parse(xhr.responseText), path); | |||||
| } | |||||
| else { | |||||
| if (error === undefined) { | |||||
| console.error("ERROR:", path) | |||||
| } | |||||
| else { | |||||
| error(); | |||||
| } | |||||
| } | |||||
| } | |||||
| }; | |||||
| xhr.open("GET", path, true); | |||||
| xhr.send(); | |||||
| } | |||||
| function draw(data) { | |||||
| document.getElementById("status").innerHTML = ""; | |||||
| // Create a DataSet (allows two way data-binding) | |||||
| var items = new vis.DataSet(data.data); | |||||
| var groups = new vis.DataSet(data.groups); | |||||
| // create visualization | |||||
| var container = document.getElementById('visualization'); | |||||
| var options = { | |||||
| stack:false, | |||||
| groupOrder: 'content' // groupOrder can be a property name or a sorting function | |||||
| }; | |||||
| var timeline = new vis.Timeline(container); | |||||
| timeline.setOptions(options); | |||||
| timeline.setGroups(groups); | |||||
| timeline.setItems(items); | |||||
| } | |||||
| setTimeout(function () {loadJSON("./timeline.json",draw);}, 50); | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||
+ 35361
- 0
showcase/projects/bridge/js/vis.js
File diff suppressed because it is too large
View File
+ 53
- 0
showcase/projects/bridge/parseData.js
View File
| @ -0,0 +1,53 @@ | |||||
| /** | |||||
| * Created by Alex on 2/2/2015. | |||||
| */ | |||||
| fs = require('fs') | |||||
| function writeToFile(data, outputFilename, callback) { | |||||
| fs.writeFile(outputFilename, JSON.stringify(data), function (err) { | |||||
| if (err) { | |||||
| console.log(err); | |||||
| } else { | |||||
| console.log("JSON saved to " + outputFilename); | |||||
| callback(); | |||||
| //getNewAssignment(); | |||||
| } | |||||
| }); | |||||
| } | |||||
| function parse(data, callback) { | |||||
| var objects = Object.keys(data.things); | |||||
| var timelineData = []; | |||||
| var groups = []; | |||||
| var groupsObj = {}; | |||||
| for (var i = 0; i < objects.length; i++) { | |||||
| var thing = data.things[objects[i]]; | |||||
| if (thing.properties.description && thing.properties.date) { | |||||
| timelineData.push({ | |||||
| id:i, | |||||
| content: thing.type, | |||||
| start: new Date(thing.properties.date.value).valueOf(), | |||||
| group: thing.type | |||||
| }); | |||||
| if (groupsObj[thing.type] === undefined) { | |||||
| groupsObj[thing.type] = true; | |||||
| groups.push({id:thing.type, content:thing.type}); | |||||
| } | |||||
| } | |||||
| } | |||||
| console.log("amont of data", timelineData.length, "amount of groups:", groups.length) | |||||
| var dataToWrite = {data: timelineData, groups:groups}; | |||||
| writeToFile(dataToWrite, "timeline.json", function(){}); | |||||
| } | |||||
| fs.readFile('./data.json', 'utf8', function (err, data) { | |||||
| if (err) { | |||||
| return console.log(err); | |||||
| } | |||||
| parse(JSON.parse(data)); | |||||
| }); | |||||