jos
9 years ago
7 changed files with 119017 additions and 14 deletions
Split 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)); | |||
| }); | |||