Merge branch 'develop'

version 1.1.0

.gitignore

@@ -2,7 +2,11 @@
 *.mat
 *.DS_Store
 node_modules/
-dist/
 app/components/
-DATA/
-app/img/
+app/DATA/*
+app/DATA/brainImages/*
+public/DATA/*
+public/DATA/brainImages/*
+*.log
+
+*.zip

README.md

@@ -1,3 +1,46 @@
 SpectraVis
 ==========
-Requires folder DATA/ with json files
+
+An interactive network visualization tool for exploring [functional brain connectivity](http://www.scholarpedia.org/article/Brain_connectivity) using [d3.js](http://d3js.org/).
+
+![](./SpectraVis-Demo.gif)
+
+SpectraVis allows you to:
++ examine how network dynamics change over time and frequency
++ compare local (statistical dependencies between a single pair of nodes) and global (statistical dependencies between all nodes) dynamics.
++ compare different types of functional connectivity measures (correlation, coherence).
++ compare between different subjects.
++ examine only within- or between-brain area connections
++ switch between multiple network views for better understanding of the network structure
+
+See [this](http://ericdeno.com/research/SpectraVis/) for an example of SpectraVis in action.
+
+## Installation
+To install SpectraVis, download the latest release:
++  [https://github.com/edeno/SpectraVis/releases](https://github.com/edeno/SpectraVis/releases)
+
+Or use Node.js and its package manager (npm):
+
+1. Open a terminal (Mac) or a Windows Command Prompt (`Start > All Programs > Accessories > Windows Command Prompt `)
+2. Download or clone the repository: `git clone https://github.com/edeno/SpectraVis.git`
+3. Install Node.js using one of the [installers](https://nodejs.org/).
+4. Enter in the terminal or command prompt: `npm install spectravis`
+
+This will install the relevant development dependencies. Running `gulp` in the terminal will automatically launch a webserver on [http://localhost:8000/](http://localhost:8000/) where you can view the visualization.
+
+## Usage
+`spectravis.init(params)` starts the visualization in `index.html`.
+
+See the [wiki](https://github.com/edeno/SpectraVis/wiki) for more information on how to view the visualization on your local machine, the expected structure of the data, and converting data from Matlab to JSON.
+
+## Modifying and Contributing
+Fork, then clone the repo:
+````
+git clone [email protected]/your-username/SpectraVis.git
+````
+Use `npm install` to get the development dependencies. Place your Data in `app/DATA/`.
+
+Push to your fork and submit a pull request to the `develop` branch.
+
+## License
+[GPL-v2](http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)

app/css/spectra.css

@@ -1,4 +1,3 @@
-
 .axis path, .axis line {
   fill: none;
   stroke: #000;
@@ -19,36 +18,29 @@
   stroke-width 0.5px;
 }
 text.nodeLabel {
-	font-family: sans-serif;
-	font-size: 11px;
+  font-family: sans-serif;
+  font-size: 11px;
   text-anchor: middle;
   line-height: 100%;
   dominant-baseline: central;
   cursor: pointer;
 }
-button.dropdown-toggle{
+button.dropdown-toggle {
   width: 100%;
 }
 output {
   padding-top: 0px;
   text-align: center;
 }
-.top-buffer {
-  margin-top: 50px;
-}
 .bottom-buffer {
   margin-bottom: 10px;
 }
-#help-button {
-  background: white;
-  outline:none;
-}
-#TitlePanel h1 {
-  display: inline-block;
+#export-link-help > button {
+  border-style: none;
 }
 #sidebar {
   background: rgba(221, 221, 221, 0.4);
-  padding: 30px;
+  padding: 15px 30px;
   border-radius: 25px;
 }
 button#PlayButtonPanel {
@@ -75,29 +67,18 @@ g#spect2Slice > g#x.axis, g#spect2Slice > g.zeroLine {
   right: 0;
   bottom: 0;
   margin: auto;
-}
-#close {
-  position: absolute;
-  top: 5px;
-  right: 15px;
-  cursor: pointer;
-  font-size: 22px;
-  font-weight: bold;
-}
-#close:hover {
-  color:#ddd;
+  z-index: 200;
 }
 #overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 10;
+  z-index: 200;
   background: rgba(0, 0, 0, 0.5);
 }
 #helpToolTip {
-  margin: 70px auto;
   padding: 4px 20px;
   font-size: 14px;
   background: #f5f5f5;
@@ -107,15 +88,30 @@ g#spect2Slice > g#x.axis, g#spect2Slice > g.zeroLine {
   visibility: visible;
   outline: medium none;
   position: fixed;
-  z-index: 11;
+  z-index: 200;
   top: 50%;
   left: 50%;
-  margin-top: -22em;  /* negative half the size of height */
-  margin-left: -22em; /* negative half the size of width */
+  transform: translate(-50%, -75%);
   border: 1px solid #e3e3e3;
   border-radius: 4px;
 }
-#toolTip-content {
-  max-height: 30%;
-  overflow: auto;
+#permalink {
+  position: absolute;
+  z-index: 200;
+  background: #EEE;
+  border: 1px solid #888;
+  width: 520px;
+  margin: 25px 10px;
+  font-size: 8pt;
+  display: none;
+  padding: 10px;
+}
+#permalink > label {
+  margin-top: 5px;
+}
+.copy-link {
+  width: 100%;
+  padding: 7px 9px;
+  overflow: hidden;
+  resize: none;
 }