VisFlow is a framework that allows you to fast launch data analyses in the web. Watch the short intro video to see how it works, and follow the tutorial steps to start your visualization and analysis.
Login with demo mode to take a quick glance at VisFlow!
Loading data into VisFlow is as simple as dragging a DataSource
Create a Plot
Drag a plot (in this case we use a Scatterplot
Interactive selection in a plot can be forwarded to another node for detailed exploration.
We connect the Selection Port
You may press shortcut
VisFlow lets you bind rendering properties to data items so that you can identify interesting subset of the input data.
Connect the selection port of the Scatterplot
VisFlow is a web-based framework that enables creation of interactive visualizations for tabular data based on flow diagram editing. The flow diagrams of VisFlow defines the system behaviors, including querying and analytics logic. VisFlow employs a special type of flow model, called the subset flow model.
Featuring easy plotting, interactive filtering and highlighting, VisFlow facilitates visualization and data analysis in an simple-to-use web environment, without the hassle of query programming and system engineering.
A flow diagram defines how the VisFlow system works. A diagram consists of nodes and directed edges, and is topologically a directed acyclic graph (DAG). The diagrams in VisFlow follow the subset flow model.
A node is a primitive component for specific tasks.
For example, a DataSource
Each node optionally accepts data and produces output data. Data enters and leaves a node via its ports.
A node has ports located on its boundaries. The input ports on the left of a node defines the input the node accepts. The output ports on the right of a node defines what a node produces for its downflow nodes. Ports are connected by edges.
The connectivity of a port is either single
A port that outputs selected data items is a selection port
Edges define how data items are transmitted and processed across the nodes. Each edge connects two ports, and goes from the output port of an upflow node to an input port of a downflow node.
Tabular data rows are considered to be meaningful data items across VisFlow. Items are transmitted between components through data ports in groups. Each transmitted group of data items is therefore a subset of the input tabular dataset.
Constants are a set of constant values, either specified by a user or extracted from the data attributes.
Constants can be used to perform data filtering in filter nodes.
For example, a Range Filter
Data items can be assigned rendering properties within VisFlow. The rendering properties are transmitted along with the data items and can be modified by nodes within the flow. The visualization nodes in VisFlow respect the rendering properties associated with the data items.
Five types of rendering properties are supported in VisFlow:
- Color: The filling color of the rendered shape.
- Border: The color of the rendered shape's border.
- Width: The width of the rendered shape's border.
- Size: The size of the rendered shape.
- Opacity: The opacity of the rendered element.
Subset Flow Model
The flow diagrams in VisFlow follow the subset flow model. The subset flow model defines that all input/output data of the nodes must be a subset of rows of some original input tabular data of the system. Because of the subset relations defined, within VisFlow we are able to uniquely identify a data item and assign rendering property to it, so that it can be rendered in a uniform style across nodes.
The subset flow model restricts data modification within the system. For example, we cannot use a node to add a data column to the table, because by doing so we create new table rows that do not belong to any of the system input tables. This would cause ambiguity in assigning rendering properties and disallow selection highlighting and subset identification. Despite certain loss of data processing power, the subset flow model has the advantages of reducing the flow diagram complexity, and making subset tracking and comparisons easier. Preferably, data can be processed and modified outside the VisFlow system, while visflow is more suitable for quick-start post-processing data visualization and analysis.
The tabular data applied in VisFlow gives information of data items on a set of dimensions (attributes). It matches the entity-relationship database table definition. Table rows are considered to be unique data items in VisFlow. Table (a) below illustrates a sample VisFlow input table, which includes a data snippet from the World Bank Data.
To facilitate series data analyses, VisFlow supports a special type of operation on its input table called Data Transpose, 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 transpose of table (a) using "Country" as the primary key, and the years as the dimensions.
After data transpose, table (b) can be applied in LineChart
To upload custom data to VisFlow, open the upload data dialog by clicking the upload data button on the tool panel, and then choose a local file to upload.
VisFlow currently supports standard CSV data. A tabular dataset to be loaded with D dimensions and N data items (rows) will look as follows:
dimension_name_1,dimension_name_2,...,dimension_name_D item1_value_1,item1_value_2,...,item1_value_D item2_value_1,item2_value_2,...,item2_value_D ... itemN_value_1,itemN_value_2,...,itemN_value_DVisFlow will automatically recognize the value types for each column, and render the column values correspondingly in the plots.
To create a node, in the menu Edit > Add Node to call out the Node Panel.
Alternatively, you may click the node creation panel tab marked with on the left.
An in-place node creation panel can be called using the shortcut
Within the node creation panel, choose a node type and then drag-and-drop a node from the panel to the canvas.
To create an edge, drag from an output port to an input port (or vice versa). You may also drop an edge onto a node and VisFlow will automatically search for the first connectable port.
Node properties can be set in the option panel on the right. By default the option panel pops up when a node is clicked.
Click a node to select it. Drag a node to re-position it. Right-click on nodes, edges or ports to open the context menu.
Within Visualizations, mouse interactions are by default interactive selections.
Click on the canvas to pan and navigate.
Save / Load Diagram
In the menu Diagram > New/Save/Load to create a new diagram, save the current diagram or load a previously saved diagram from the server.
Visualization Mode (VisMode)
VisFlow features Visualization Mode (VisMode), in which only selected nodes (typically visualizations) are shown and the other diagram details are hidden. The following illustrates a VisMode system and its corresponding flow diagram. Nodes can be set to be visible/invisible in VisMode via context menu or the option panel.
To toggle VisMode, press the VisMode button on the tool panel.
VisFlow allows you to share a diagram with other users so as to support collaboration. In the save diagram dialog, simply enters the users you want to share the diagram with in the "share with". The users you listed will be able to view and edit your shared diagram. Your uploaded data associated with the shared diagram will be automatically shared with those users as well.
A data source can be set to perform data transpose operation for its input table and output the transformed table instead. Data transpose is useful for plotting series data.
Visualizations provide plots of data subsets.
Plots are embedded in-situ in the visualization nodes by default.
Interactively selected data items are sent out via the visualization selection port
VisFlow currently supports the following types of visualizations:
Filters examine attribute values of data items and perform attribute filtering. VisFlow has three types of filters.
Value generator produces constants that can be used for filtering.
Set operations allow subset manipulation. VisFlow has three set operations:
Property binder lets you assign rendering properties to the data items.
|Call the node creation panel|
|Toggle the node label of the selected node(s)|
|Minimize/expand the selected node(s)|
|Toggle the visibility of the option panel|
|Toggle the visualization mode of the selected node(s)|
|Add node(s) to the current node selection|
|Delete the selected node(s) / edge|
|Select all items in the visualization|
|De-select all items in the vsiualization|
|Add items to the current item selection|
|(network only) Turn on/off the network navigation|