Initial commit (5438dca5) · Commits · born / ri-visualization

README.md

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		# How to run the visualization suite:

		## Pre-requisites:
		1. Active internet connection as some of the dependencies are loaded via CDNs
		2. If you use _Firefox_, just open the file index.html in it
		3. If you use a different browser, you need to set up a simple web server; with python for example, you just need to run "python -m SimpleHTTPServer" (python v2) or "python -m http.server" (python v3) in this directory
		* Per default, this should serve the app on port 8000 of localhost (access via 0.0.0.0:8000 or localhost:8000 in your browser)

		## Notes on visualizations:
		1. Currently, the .json files in the directory _data_ are manually fetched; so if new files are added to that directory, the app code must be changed to handle the new files
		2. Since the graph is a multi-edge directed graph, the visualization tool uses a setting called _smooth edges_ to differentiate between multiple edges between the same two nodes
		* With large networks, however, this takes a longer time to render the graph (see next sub-section)

		## Example: Network of _Friedrich III._ (925 nodes, 4468 edges in graph_v02.json)

		### macOS, Firefox:
		* with smooth edges set to _true_ it takes 3:09 min. until rendered
		* with smooth edges set to _false_ it takes 0:52 min. until rendered

		### macOS, Safari:
		* with smooth edges set to _true_ it takes 1:06 min. until rendered
		* with smooth edges set to _false_ it takes 0:09 min. until rendered

		However, currently we default to smooth edges _true_, so there are two ways to handle larger networks:
		1. Collapse multiple edges into one in those networks (and show details only when an edge is clicked on)
		2. Refine the graph so that it contains fewer edges

client/.DS_Store

0 → 100644

+12 KiB

File added.

No diff preview for this file type.

View file

client/css/.DS_Store

0 → 100644

+6 KiB

File added.

No diff preview for this file type.

View file

client/css/col.css

0 → 100644

+41 −0

Original line number	Diff line number	Diff line

		/* SECTIONS ============================================================================= */

		.section {
		clear: both;
		padding: 0px;
		margin: 0px;
		/background-color: #9A958F; /
		background-color: #e6e6e6;
		}

		/* GROUPING ============================================================================= */


		.group:before,
		.group:after {
		content:"";
		display:table;
		}
		.group:after {
		clear:both;
		}
		.group {
		zoom:1; /* For IE 6/7 (trigger hasLayout) */
		}

		/* GRID COLUMN SETUP ==================================================================== */

		.col {
		display: block;
		float: left;
		margin: 10px 0px 0px 0px;
		/margin: 1% 0 1% 1.6%;/
		}

		.col2 {
		display: block;
		float: left;
		margin: 0px 0px 0px 0px;
		/margin: 1% 0 1% 1.6%;/
		}

client/css/general.css

0 → 100644

+561 −0

Original line number	Diff line number	Diff line
		body {
		width: 100%;
		height: 100%;

		font-family: 'Raleway', sans-serif;
		line-height: 1.5em;
		background-color: #f8f8f8;
		}
		.wow {
		visibility: hidden;
		}

		main {
		width: 100%;
		height: 100%;
		}

		.mainbody {
		/background-color: #f8f8f8;/
		background-color: #eef2f6;
		display: table;
		width: 100%;
		height: 100%;
		}

		h1.small {
		/font-family: Merienda One, cursive;/
		font-weight: 900;
		font-size: 60px;
		font-variant: small-caps;
		text-shadow: 4px 4px 4px #aaa;
		}

		.top {
		width: 100%;
		position: absolute;
		top: 30px;
		/padding-right: 100px;/
		}

		.top-left {
		padding-left: 30px;
		}

		.top-right {
		padding-right: 30px;
		}

		.no-list-style ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
		-webkit-padding-start: 0;
		-moz-padding-start: 0;
		}

		.no-list-style ul li {
		padding: 0;
		border: 1px;
		border-color: black;
		}

		.entry-button {
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		background-color: #990500;
		color: white;
		transition: all 0.5s;
		cursor: pointer;
		}

		.entry-button:hover {
		/background-color: #990500;/
		background-color: #FF9C01;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
		}

		.entry-button span {
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 0.5s;
		color: #fff;
		}

		.entry-button span:after {
		content: '\00bb';
		position: absolute;
		opacity: 0;
		top: 0;
		right: -20px;
		transition: 0.5s;
		}

		.entry-button:hover span {
		padding-right: 20px;
		}

		.entry-button:hover span:after {
		opacity: 1;
		right: 0;
		}

		.accordion-toggle {
		display: block;
		}

		a.accordion-toggle:hover {
		text-decoration: none;
		}

		.activity-section .panel-default {
		width: 75%;
		margin-left: 12.5%;
		}

		.footer-small {
		padding-top: 15px;
		font-size: 12px;
		}

		header {
		background-color: #2b3e50 !important;
		position: fixed;
		width: 100%;
		height: 61px;
		overflow: hidden;
		z-index: 100;
		-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
		}

		#apptitle {
		color: #fff;
		font-size: 27px;
		margin-left: 1%;
		font-variant: small-caps;
		}

		.drawer-heading {
		height: 61px;
		border: none;
		}

		.drawer-title {
		text-align: center;
		padding-top: 15px;
		}

		.drawer-nav {
		text-align: center;
		}

		.drawer-nav li a {
		color: black;
		}

		.drawer-nav li a:hover {
		color: #23527c;
		background-color: #e6e6e6;
		}

		.drawer-nav li a:focus {
		background-color: #e6e6e6;
		}

		.drawer-nav li span {
		font-size: 12px;
		word-break: keep-all;
		}

		#header .h1 {
		margin: 0;
		padding-top: 15px;
		}

		.cont {
		padding-top: 5px;
		padding-bottom: 5px;
		width: 85%;
		margin: auto;
		}

		.modal-dialog {
		width: 660px;
		padding-top: 6%;
		}

		.modal-title {
		margin: 0px !important;
		}

		#nav {
		padding-bottom: 10010px;
		margin-bottom: -10000px;
		float: left;
		width: 230px;
		margin-left: -100%;
		background: #eee;
		}

		.navbar {
		width: 75%;
		float: left;
		}

		.navbar-complement {
		width: 25%;
		float: right;
		}

		footer {
		position: fixed;
		bottom: 0;
		padding-top: 10px;
		text-align: center;
		font-size: 11px;
		width: 100%;
		z-index: 100;

		-webkit-box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		-moz-box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		box-shadow: 0px -3px 5px rgba(100, 100, 100, 0.49);
		}

		.footer-style {
		/background-color: #e6e6e6;/
		background-color: #2b3e50;
		}

		#wrapper {
		overflow: hidden;
		}

		#content {
		margin-left: 230px; /* Same as 'nav' width */
		}

		.innertube {
		margin: 15px; /* Padding for content */
		margin-top: 0;
		}

		p {
		color: black;
		}

		tr th a{
		color: black;
		text-decoration: none;
		}

		tr th a:hover{
		color: black;
		text-decoration: none;
		}

		nav ul {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		}

		nav ul li {
		list-style: none;
		flex-grow: 1;
		text-align: center;
		float: left;
		margin: 0;
		padding: 0;
		border: 1px;
		border-color: black;
		}

		nav ul li p {
		display: block;
		color: black;
		text-align: center;
		padding: 2px 12px;
		text-decoration: none;
		}

		nav ul li a {
		display: block;
		color: black;
		text-align: center;
		padding: 10px 12px;
		text-decoration: none;
		}

		nav ul li button {
		display: block;
		color: black;
		text-align: center;
		padding: 10px 12px;
		text-decoration: none;
		}

		nav ul li a:hover {
		color: #23527c;
		background-color: #e6e6e6;
		border-radius: 5px;
		text-decoration: none;
		}

		nav ul li a:focus {
		text-decoration: none;
		}

		.close {
		font-size: 26px;
		}

		.notcenter {
		text-align: unset;
		}

		.nopadding {
		display: unset;
		padding: 0;
		}

		a.nopadding.btn:hover {
		background: #E0E0E0;
		}

		.apple {
		background: #fff;
		border: 1px solid #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 1px 2px 4px rgba(0,0,0,.4);
		margin: 20px auto;
		}

		.apple h4, .apple li, .apple form fieldset {
		margin: 15px;
		}

		.apple p {
		margin: 15px;
		text-align: justify;
		}

		.apple form fieldset h4 {
		margin: 0px;
		}

		.white-apple {
		background: white;
		width: 95%;
		height: 200px;
		max-height: 200px;
		overflow: auto;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		}

		table {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		}

		td {
		border-top: 1px solid #DDD;
		font-size: 12px;
		vertical-align: middle !important;
		}

		.table>thead>tr>th {
		border-bottom: 1px solid black;
		}

		.table>thead>tr>th a {
		cursor: pointer;
		}

		.table>thead>tr>th a .glyphicon {
		font-size: 12px;
		}

		.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
		z-index: 0 !important;
		}

		.open > .dropdown-menu {
		z-index: 101;
		}

		.input-group .form-control {
		z-index: 0;
		}

		.name-input {
		width: 180px;
		display: inline;
		}

		.number-input {
		width: 80px;
		display: inline;
		}

		.search-bar {
		width: 200px;
		display: inline;
		}

		a.help:hover {
		cursor: default;
		text-decoration: none;
		}

		.backbutton:after {
		content: '\200b';
		}

		.popover {
		text-align: justify;
		text-justify: inter-word;
		}

		.form-table {
		display: table;
		}

		.form-table p {
		display: table-row;
		}

		.form-table p label {
		display: table-cell;
		}

		.form-table p input {
		margin-left: 10px;
		display: table-cell;
		}

		.form-table p select {
		margin-left: 10px;
		display: table-cell;
		}

		.form-table p span {
		margin-left: 10px;
		}

		#newpopover {
		position: relative;
		color: white;
		display: inline-block;
		}

		#newpopover a:hover {
		text-decoration: none;
		}

		#newpopover > i {
		text-align: center;
		font: italic normal 90%;
		line-height: 100%;
		color: black;
		text-shadow: white 0 1px;
		background: #fff;
		background-clip: padding-box;
		box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
		border: 1px solid #e0e0e0;
		border-radius: 3px;
		position: absolute;
		min-width: 50px;
		white-space: nowrap;
		margin-left: -100%;
		padding: 10px 0;
		padding-left: 5px;
		padding-right: 5px;
		bottom: 100%;
		margin-bottom: 10px;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity 0.3s linear;
		-moz-transition: opacity 0.3s linear;
		-ms-transition: opacity 0.3s linear;
		-o-transition: opacity 0.3s linear;
		transition: opacity 0.3s linear;
		}

		#newpopover > i:before, #newpopover > i:after {
		content: "";
		position: absolute;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		top: 100%;
		left: 50%;
		margin-left: -10px;
		}

		#newpopover > i:before {
		border-top: 10px solid #ddd;
		margin-top: 0px;
		}

		#newpopover > i:after {
		border-top: 10px solid #fff;
		margin-top: -2px;
		z-index: 1;
		}

		#newpopover:hover > i {
		visibility: visible;
		opacity: 1;
		}

		canvas {
		background-color: #ffffff;
		-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
		-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
		box-shadow: 3px 3px 3px 0 #e3e3e3;
		border: 1px solid #c3c3c3;
		height: 150px;
		}

		.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

		.pagination {
		margin: 12px 0;
		border: 1px solid #E0E0E0;
		}

		.top-pagination {
		margin-bottom: 10px;
		}

		.top-pagination button {
		color: #337ab7;
		}

		.top-pagination .btn[disabled] {
		color: #777;
		background-color: #fff;
		border-color: #ddd
		}

		p label {
		font-weight: 0 !important;
		}

		.popover-title {
		background-color: #2b3e50;
		color: #fff;
		}