Flow Documentation

Submit a support ticket

Please click here to submit a support ticket.

We really appreciate hearing from you and your suggestions to help us make the experience better and Flow more usable for you everyday!

Glossary of terms

Flow - a data story presentation that has been constructed using the Flow Editor.

Data Value (or "Dot") - Data values within Flows are represented by "Dots" that appear at the appropriate locations within the 3-D space.  The size of the Dot may provide a visual indication of the magnitude of the data value represented by the Dot.  The color of the Dot may also provide useful information about the data value.

CSV File - A comma-delimited data file that is used to populate data into a Swarm. The rules regarding the content of Flow CSV files are described here.

Swarm - A Swarm is our made-up name for our visualizations, and think of it as a way to arrange data points into 3D space.  A swarm can be used in any number of Steps.  Each Dot in the Swarm represents one value of the data field of interest.  

Chart - There are various ways to arrange the data in space, and the big-picture algorithm to be used is selected in the Chart pulldown. The Scatterplot is the most common and provides a basis for many of the visuals that may not look anything like a scatterplot once it is complete.

Step - A Flow presentation is comprised of one or more Steps.  A Step is equivalent to a slide within a PowerPoint presentation.  A Flow can contain any number of Steps.

Timeline - The Timeline is across the bottom of the Flow Editor screen that shows objects (Swarms, Connections, Area Charts, Labels, Texts, Images, Buttons) that are visible on each Step within a Flow. Double-click items to show or hide them on a particular step.

mceclip7.png

The example above shows the Timeline for a Flow consisting of 11 Steps, 1 Swarm, 2 Connections, 3 sets of Labels, 1 Area Chart, 1 Map and 1 Text object.  Colored cells indicate on which Steps the various objects are visible.

Connections - Connections are used to specify how data values are interconnected by straight lines.  Connections are typically used to join matching categories of data or draw down to an axis.  A Connection is always a component of a Swarm.

mceclip3.png mceclip4.png

The above examples show simple and complex swarms in which data values are connected by Connections.

Labels - Labels are text that appears next to Swarm dots and is always a Component of a Swarm.  Labels can show any of the attributes associated with a dot, and may be shown conditionally, such as to display the values at the end of a line or the maximum value of a category.

Area chart - Area charts in Flow create a filled-in plane between a data series and an axis. An area chart is always a Component of a Swarm.

Legend - A Legend is a Swarm Component showing categories visible in the swarm, usually colorized, and often interactive.

Filters - A Filter consists of logic for selecting a subset of rows from a Swarm.  Filter elements can be grouped to form a composite filter that consists of multiple "and" or "or" conditions for selecting rows from the Swarm.

Perspectives - A group of settings for a Swarm that is unique for a single step. Naming and managing of Perspectives is performed automatically. To manage the Perspectives manually, select the Advanced checkbox on, and a drop-down will appear in the Swarm settings panel.

Other Items - Information regarding Axis Settings, Story Creator, Methods of Presenting Flows, Interactions, Text and Images, etc. is (or will be) available in other articles in our Help Center.

 


Dot Sizes

Here's a quick walkthrough of Dot Size settings within Swarms. 

An important setting that will help distinguish your data is Size. By default, the size is set to a fixed value which can be made larger or smaller by using the arrows to the right of the number, or by simply typing in the desired value. Another way to size dots is by scale, which is based on any numerical column in your data. 

By default, Flow will analyze the minimum and maximum values within your dataset and scale that to the dot sizes you specify to work within that range. You can uncheck the Auto-Range and set the ranges based on your preference.

While the default dot is a circle, you can choose from other shapes as well. You may need to adjust the size of the dots to make up for the smaller area in the other shapes.

Remember that in AR and VR, the dots actually have a size in the real world, so if you are going to want your audience to be comfortable in those settings, check out your Flow to see that the dots are big enough to see, and not so huge they fill up the room.

Transform Data

The Data Transformer is helpful for editing and manipulating your csv files and Google Sheets. Upon importing the default raw data, we can create a snapshot of data. Feel free to rename this snapshot to whatever is most applicable to your dataset. It's helpful to autosize columns to see the entirety of the values within the rows. Here are some basic functions:

Now that we have the basic functions down, we can update the snapshot and create the map by selecting the correct snapshot under source. First, we create the map using latitude and longitude by selecting the appropriate chart type and snapshot under Chart. 

To get back to your edited data snapshot, click the Edit button in your Data Source menu. Remember to select the appropriate snapshot in the Data Transformer to make further edits.

 

Filters

Filters are a great tool to use when you've got a lot of data cluttered on the screen and you'd like to drill into more specific data. Open the filters expandable section. To get started, create a filter and decide which column you'd like to see a sub-selection of.

If it's a numerical column, you can use the following logic:

If it's a categorical column, you can use the following logic:

If it's just one value within a column, it can be either categorical or numerical, and you can use the following logic:

If you'll be applying more than one filter, the Logic can be set to either 'and' or 'or'. When and is selected, both filters will be applied and there is a compounding effect where your dots have to meet both requirements in order to be shown. When or is selected, filters will be applied separately, and if dots meet any of the filter requirements, they are shown.

The "Hide filtered data" checkbox should be toggled on when you'd like to see the view of your filtered dots take up the entire axis dimension, effectively temporarily altering the range, or domain, of the axis. The axes expand out to your filtered data's maximum and minimum bounds. It allows you to really zoom in on the data and get a clear, detailed view of each of the individual pieces.

Text and Images

Text and Images are pretty similar, so let’s learn about them at the same time.

In the Text panel, enter your desired text, choose from a variety of fonts, as well as change the Size and Color. Text can be manipulated in the popup text panel or on the sidebar. 

You can decide whether and how you would like to Wrap Text, which can be done by the number of characters or total width. You can also set the alignment and whether or not the object faces the camera. When that is toggled on, the text always looks at you no matter which way you move around within the space, which can be very nice sometimes, especially in augmented and virtual reality.

You can alter the slant of the text in degrees.

In the Image panel, choose the file from your computer. You can change the size and toggle on/off whether it should always rotate to face the camera.

For both Text and Images, 3D arrows appear when selecting a text/image object, and are really great for positioning in the space. The green arrow goes in the vertical direction, the red arrow goes in the horizontal direction, and the blue arrow goes in the depth direction. There's also this middle point where you can click and then just drag it wherever you'd like. If you ever get lost where your text/image is now super far away and you can't find it, you can go down to Position in the text/image panel and hit the small minus buttons (to the right of the position numbers), and it'll recenter it for you.

By default the positioning of Image and Text objects is defined per step, so the text will always show up right where you want it. But often you want it to stay in the same position throughout the presentation, so click the “Lock position across steps” based on your preference.

 

Network Graphs

A network graph shows data points, or nodes, associated together by links, or edges, to see relationships between data in directed graphs or hierarchies. 

Flow uses a force-directed graph algorithm to create Network Graphs. This is based on the D3 implementation of force-3d. The implementation in Flow can be pretty straightforward or more sophisticated in nature. For many cases, the default settings are adequate to show quite beautiful graphs. If you'd like to read more about the original D3 algorithms, this is a good explanation.

Dataset preparation

Dataset preparation can be complicated and may require programming skills at this time. The dataset that will show a network graph must contain an "id" column which must be unique for every row in the dataset, and a "connections by id" column which lists the ids of every row to be connected to.

image.png

In the above example, the Network Graph has 10 nodes, and nodes A, B, and C have connections to nodes 1 through 6 as indicated by the connections column. The connections column requires a list of ids, separated by the "|" pipe character (SHIFT-backslash on most keyboards).

MtNimage.png

For more on How to get from Flat Data to a Network Graph, see https://docs.flow.gl/books/flow-documentation/page/how-to-get-from-flat-data-to-a-network-graph 

Forces

NOTE: if you are adjusting parameters and not seeing any difference, it is likely because other forces are overwhelming the parameter you are updating. Experiment with other parameters as well.

The graph is created by "forces" that iteratively push and pull on each other, so the nodes algorithmically create patterns based on the links present.

The default force is a "link force" which has an attraction force (strength) between connected nodes. If we just apply a link force, the connected nodes will be attracted toward each other, but there will be no forces repelling non-connected nodes.

image.png

To remedy this, we can add either Attract-Repulse or Anti-collision forces.

image.png

In addition to strength, link distance is the suggested distance between nodes, an important parameter that will dictate how closely clustered our graph will end up, although it could be overcome by Attract-Repulse forces.