Skip to content

Commit

Permalink
Merge pull request #10 from yubowenok/dev
Browse files Browse the repository at this point in the history 
style improvements; flowsense integration (disabled)
  • Loading branch information
@yubowenok
yubowenok authored Aug 21, 2017
2 parents a76635a + f8ee2b6 commit b3c357a
Show file tree
Hide file tree
Showing 268 changed files with 8,802 additions and 3,286 deletions.
5 changes: 5 additions & 0 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,8 @@ before_script:
script:
- gulp all

cache:
directories:
- bower_components
- node_modules

19 changes: 6 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@
VisFlow is a tool that enables creation of visual analytics system for tabular data based on flow diagram editing.
This tool works as a user end application and makes transparent the underlying work of data processing, filtering and rendering.

For detailed introduction, refer to the system documentation.
For detailed introduction, refer to the [system documentation](https://visflow.org/doc.html).

### Installation
VisFlow requires MySQL.
Data and diagram paths can be set in _server/config.php_.
Set data and diagram paths in _{visflow_directory}/server/config.php_.
The data, diagram and nlp paths are relative to the base path.
```php
<?php

$base_path = '/data/visflow/';
$data_path = 'data/';
$diagram_path = 'diagrams/';

$nlp_path = 'nlp/';
?>
```
Note that the web server needs permission to write to the data and diagram paths.
Make sure the data directory has proper access rights and are accessible to the web server.

The following initializes the DB and the demo data and diagrams.
```bash
Expand All @@ -29,12 +31,3 @@ mysql -u root -p < init-db.sql
# create data and diagrams folders and copy demo data and diagrams in place
./init.sh
```

It might be necessary that the web server needs permission to write to the data and diagram paths.
```bash
# pervasive permission
chmod -R 777 /data/visflow
# alternatively
chown -R www-data:www-data /data/visflow
```
Separate access control may be desired over _/data/visflow_.
10 changes: 7 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
],
"dependencies": {
"bootstrap": "~3.3.5",
"bootstrap-switch": "~3.3.2",
"bootstrap-switch-jquery": "~3.3.5",
"crypto-js": "~3.1.5",
"d3": "~3.5.5",
"d3": "~4.5.1",
"datatables": "DataTables#~1.10.10",
"datatables.net-select-bs": "~1.1.0",
"jquery": "~2.1.4",
Expand All @@ -32,6 +32,10 @@
"select2": "~4.0.0",
"underscore": "~1.8.2",
"js-cookie": "~2.1.0",
"jquery-ui-touch-punch": "*"
"jquery-ui-touch-punch": "*",
"leaflet": "~1.0.3",
"annyang": "^2.6.0",
"jquery-shadow-animation": "^1.11.0",
"heatmap.js-amd": "^2.0.5"
}
}
120 changes: 105 additions & 15 deletions doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,22 @@
<meta charset="utf-8">
<title>Visflow Documentation</title>
<meta name="description" content="VisFlow is a web-based visualization framework for tabular data with a subset flow model.">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="./logo.png">

<!-- jquery -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css"/>

<link rel="stylesheet" href="dist/doc.css"/>
<link rel="stylesheet" href="dist/css/doc.css"/>
<link rel="stylesheet" href="dist/css/visflow_deps.css"/>
<script type="text/javascript" src="dist/doc.js"></script>
</head>
<body class="visflow">
<nav class="navbar navbar-inverse navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">VisFlow Documentation</a>
<a class="navbar-brand" href="#"><img id="logo" src="./logo.png">VisFlow Documentation</a>
</div>
<div class="navbar-right">
<a class="btn btn-primary" href=".">
Expand Down Expand Up @@ -66,7 +65,7 @@
<a href="#data">Data</a>
<ul class="nav nav-lv2">
<li><a href="#d-tabular-data">Tabular Data</a></li>
<li><a href="#d-data-crossing">Data Crossing</a></li>
<li><a href="#d-data-transpose">Data Transpose</a></li>
<li><a href="#d-upload-data">Upload Data</a></li>
</ul>
</li>
Expand Down Expand Up @@ -128,17 +127,23 @@
</li>
</ul>
</li>
<!--
<li>
<a href="#flowsense">FlowSense</a>
</li>
-->
<li>
<a href="#shortcuts">Shortcuts</a>
<ul class="nav nav-lv2">
<li><a href="#sc-diagram">Diagram</a></li>
<li><a href="#sc-editing">Editing</a></li>
<li><a href="#sc-visualization">Visualization</a></li>
<!-- <li><a href="#sc-flowsense">FlowSense</a></li> -->
</ul>
</li>
</ul>
</div>
<div id="main" class="col-xs-offset-2 col-xs-10">
<div class="col-xs-offset-2 col-xs-10">
<div class="section">
<h2 id="getting-started">Getting Started</h2>
<hr>
Expand Down Expand Up @@ -376,16 +381,16 @@ <h3>Tabular Data</h3>
</p>
<img width="360" src="dist/doc/tabular.png">

<a id="d-data-crossing" class="anchor"></a>
<h3>Data Crossing</h3>
<a id="d-data-transpose" class="anchor"></a>
<h3>Data Transpose</h3>
<p>
To facilitate series data analyses, VisFlow supports a special type of operation on its input table called <i>Data Crossing</i>,
To facilitate series data analyses, VisFlow supports a special type of operation on its input table called <i>Data Transpose</i>,
which takes a set of primary key attributes and a set of dimensions, and transforms the input table into rows of series points.
Dimension names are written in an attribute column, and the original table values are stored in a third column.
Table (b) above shows data crossing of table (a) using "Country" as the primary key, and the years as the dimensions.
Table (b) above shows data transpose of table (a) using "Country" as the primary key, and the years as the dimensions.
</p>
<p>
After data crossing, table (b) can be applied in LineChart<icon class="line-chart"></icon> series visualization.
After data transpose, table (b) can be applied in LineChart<icon class="line-chart"></icon> series visualization.
</p>

<a id="d-upload-data" class="anchor"></a>
Expand Down Expand Up @@ -496,8 +501,8 @@ <h3>Data Source</h3>
If multiple tables are loaded, they are combined and considered to be a single larger table throughout the system.
</p>
<p>
A data source can be set to perform <i>data crossing</i> operation for its input table and output the transformed table instead.
Data crossing is useful for plotting series data.
A data source can be set to perform <i>data transpose</i> operation for its input table and output the transformed table instead.
Data transpose is useful for plotting series data.
</p>

<a id="nt-visualization" class="anchor"></a>
Expand Down Expand Up @@ -880,6 +885,65 @@ <h3>Property Binder</h3>
</table>
</div>

<!--
<div class="section">
<a id="flowsense" class="anchor"></a>
<h2>FlowSense</h2>
<hr>
<p>
FlowSense is VisFlow's integrated semantic parser that processes natural language input.
It helps the user construct and expand VisFlow diagrams faster.
To use FlowSense, right click on a node, port or the canvas and select "FlowSense".
Then in the FlowSense dialog, type-in the natural language command and press <key>Enter</key>.
</p>
<p>
Here is a list of commands you may try.
Replace dimensions, values, and node labels (marked by brackets) by entities in your data and diagram.
The following commands work on the demo car data (without brackets).
</p>
<ul>
<li>open [car] dataset</li>
<li>show a scatterplot of [mpg] and [cylinders]</li>
<li>show [cars] with [mpg] greater than [15]</li>
<li>create a parallel coordinates plot with [mpg], [horsepower] and [cylinders]</li>
<li>visualize the [mpg] distribution</li>
<li>search for cars with [mpg] between [10] and [15]</li>
<li>show cars with a [name] that contains [buick]</li>
<li>set blue color</li>
<li>change opacity to 0.5</li>
<li>color encode mpg</li>
<li>encode [mpg] by red green color scale</li>
<li>map [mpg] to size from 1 to 3</li>
<li>highlight selection in a scatterplot</li>
<li>show [mpg] of the selected [cars] in a histogram</li>
<li>find the [cars] with maximum [mpg]</li>
<li>get ten [cars] with maximum [mpg]</li>
<li>sample 10 percent of the [cars] group by [origin]</li>
<li>link [cars] with the same [origin] from [chart-1] (chart-1 refers to node label)</li>
<li>link and highlight [cars] with the same [origin] from [chart-1] in a scatterplot</li>
<li>merge [chart-1] with [chart-2]</li>
<li>find the different [cars] from [chart-1]</li>
<li>find the common [cars] between [chart-1] and [chart-2]</li>
</ul>
<p>
You may use speech for FlowSense input (chrome browser only).
First turn on the microphone in the menu bar.
You need to allow the page to access your microphone if asked.
When microphone is on, you may speak to FlowSense without activating the FlowSense dialog.
Alternatively, when the FlowSense dialog is on, your speech will be recorded and
input into the FlowSense dialog automatically.
</p>
<p>
You may activate FlowSense by shortcut. See the <a href="#sc-flowsense">Shortcuts</a> section.
</p>
</div>
-->

<div class="section">
<a id="shortcuts" class="anchor"></a>
<h2>Shortcuts</h2>
Expand Down Expand Up @@ -985,6 +1049,32 @@ <h3>Visualization</h3>
</tr>
</tbody>
</table>

<!--
<a id="sc-flowsense" class="anchor"></a>
<h3>FlowSense</h3>
<table class="table table-bordered table-striped">
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<thead>
<tr>
<th>Key</th><th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><key>Shift</key> + <key>S</key></td>
<td>Launch FlowSense</td>
</tr>
<tr>
<td><key>Shift</key> + <key>T</key></td>
<td>Enable/disable FlowSense microphone</td>
</tr>
</tbody>
</table>
-->
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit b3c357a

Please sign in to comment.