Guides & Tutorials

Bill's Pre-Training Exercise

Purpose

The purpose of this training assignment is to acquaint brand-new Flow Editor users with some of the most commonly performed actions within the Flow Editor.

Our goal is to begin the process of generating some "muscle memory" regarding using the user interface within the Flow Editor. We especially want you to obtain some initial exposure to the "Data Objects Timeline" within the Flow Editor.

The small Flow that you generate will be useful for additional experimentation in using the Flow Editor. This assignment is designed to take a modest number of minutes and to make sure that all course attendees can log in and perform typical Flow Editor operations prior to Training Session #1.

Note: Due to the release of Flow enhancements, the screenshots in this document may differ slightly from the screens you see when performing this assignment.

Some Useful Terminology

A Flow consists of one or more Steps.

Each Step can contain various types of data objects, including:

  • "Swarms" of data values and related fields of information
  • "Charts" that display data values visualized in various ways
  • "Text" objects
  • "Images"
  • "Dots" that represent the locations of data values in multi-dimensional space. Each dot corresponds to a row in a CSV file
  • "Connections" that connect dots to other dots or to maps or to other spatial objects
  • "Labels" that display useful information adjacent to appropriate dots
  • "Buttons" that launch "Actions" and a few other types of objects

Steps in the Assignment

The steps below are numbered for easy cross reference, and various annotations (for example A1, B1, etc.) are provided in screen shots. Many annotations are provided in Figure 1 a few steps below.

    1. Log into your Flow account at https://a.flow.gl.

    2. Click the Create Flow button. This results in the creation of a new Flow and the automatic focus on Swarm #1 on Step #1 (W1).

    3. Near the upper right of the screen, adjacent to the "Data Source" (D1) in the Swarm 1 definition pane (the right-hand part of the screen), click the "From Library" button.

    4. Then click the "Global Life Expectancy / Select" button. This will cause data regarding global life expectancy to be loaded into Swarm 1.

      1. Figure 1 below contains many annotations identifying various buttons, dropdowns, the "Data Objects Timeline", data objects and various configuration options that are visible on the Flow Editor screen. Please note that the right-hand portion of the screen is showing the configuration options for Swarm 1 on Step 1. At this point you should see approx. 7000 green dots displayed in a random pattern (V1), and the only data object that you will see populated in the "Data Objects Timeline" is a cell for Swarm 1 on Step 1 (W1).

        mceclip0.png
        Figure 1 - Flow Editor screen after creating the Flow and populating Swarm 1 with a Flow Library CSV file. The annotations are reference points for items discussed within this document.

      2. Navigation within the "Step View Pane" portion of the screen (V1)

        Note: Please note that you can adjust the "camera position" from which you are viewing the 3D space by placing your cursor into the Step View Pane, then left-clicking your mouse and dragging up, down, left or right. You can also zoom in and zoom out using the scroll wheel on your mouse. When you obtain the desired view of the Step, by clicking the Set Camera button (S1) in the upper left section of the screen you will ensure that the current view will be shown when you return to viewing the current Step at a later time.

      3. The "Data Objects Timeline" (O1) is a rectangular array of cells where each cell represents a specific Data Object for a specific Step. Examples of Data Objects are Swarms of data values, Maps, Text Objects, Images, Buttons and some other items. Each time a cell within the "Objects Timeline" is clicked, the definition of the specific data object on the specific step is displayed in the pane on the right-hand side of the screen.

      4. Click the "Add Step" button (P1) to the right of the Objects Timeline (O1) , and then click the "Duplicate" button in the associated popup. This will generate Step 2, and Step 2 will contain the exact same data objects as Step 1.

      5. Note that Step 2 is now highlighted in the Objects Timeline. The Objects Timeline is configured to display more than 20 steps before horizontal scrolling is necessary.

      6. In the right-hand panel, about a third of the way down the panel, change the Chart Type (E1) from Random to Scatterplot (A2).

      7. For the Width Axis, set the Column to Year, check the "Axis is timeline?" box, and select the format of the date field as "Year" (B2).

      8. For the Height axis, set the column to "Life Expectancy (Years)" (C2).

      9. Click the check box for the Depth Axis, and then set the depth column to Country (D2). At this point you will see the ScatterPlot start to take shape (E2).

        mceclip1.png
        mceclip2.png
        Figure 2 - Flow Editor screen after adding Step 2, defining the chart type on Step 2 to be a scatterplot, and specifying the width, height and depth axes for the 3D scatterplot.

      10. Then to create a Text Object, to the left of the of the Objects Timeline, click the "+Text" button (N1).

      11. Click at the point of the flashing cursor, use the backspace key to remove the text "New Text 1", and enter a title of your choice for the text object. For example, enter "Flow training demo text 1 for YOURNAME".

      12. Click the x in the upper right-hand corner of the small text entry window, and then use the "drag positioning arrows" to drag the text object to a location above the scatterplot shown in the Step. You can also experiment with the sizing of the text if you wish using various settings that are available in the definition of Text Object #1 (in the right-hand panel).

      13. Usage Note: If the "drag positioning arrows" for the text object are still hanging around, you can click on the cell at the intersection of Swarm 1 and Step 2 to make the drag control for the text object disappear.

        mceclip4.png

      14. Make sure that the small image of a tiger that was previously sent to you via email is saved in a handy spot on your hard drive.

      15. To create an image, click the "+Image" button at the left-hand side of the Objects Timeline (N1).

      16. In the Image 1 definition pane on the right-hand side of the screen, click the "Choose file" button, and then navigate to where you saved the tiger image noted in Step 4.14 above. Open the file, and then use the positioning arrows to place the image anywhere you wish in Step 2 of the Flow. You can experiment with sizing the image if you wish.

      17. Usage Note: If the drag positioning arrows for the image are still hanging around, you can click on the cell at the intersection of Swarm 1 and Step 2 to make the drag control for the image object disappear.

      18. Then click the "Add Step" button (P1) to the right of the Objects Timeline, and then click the "Duplicate" button. At this point you should have three steps in your Flow.

        mceclip3.png
        Figure 3 - Screen after adding a text object (A3), adding an image object (B3), and making Step 3 (C3) a duplicate of Step 2

      19. In Step 3, click the tiny "eye" (visibility control) icon (A4) at the left side of the cell within the Objects Timeline for Swarm 1 on Step 3. Click the "eye" icon multiple times and observe that the particular data object is alternatively made invisible and then visible. This is the way that you can control data objects either being visible or invisible on a particular Step. Do this to toggle the visibility for the Swarm, Text and Image objects that you have placed onto Step 3.

        mceclip5.png
        Figure 4 - Cell showing the tiny "eye" (visibility control) icon (A4) for Swarm 1 on Step 3.

      20. Set the visibility controls for each data object on Step 3 so that the data objects are all visible. Then using your mouse, set your camera position to give the optimal view of Step 3, and then click the Set Camera button (S1). This will assure that the next time you return to Step 3, you will see the exact configuration you have set.

    5. In the far upper right-hand corner of the screen, click the "three dots" button (C1), and then click Save in the list of options. You will see a small green message area appear as the Flow is being saved.

      mceclip6.png

    6. To the left of the "three dots" button (C1), click the Share button (U1c). (Please note that the location of this button has been moved since the screenshot in Figure 1 was generated.) Then click the "Share Privately" button, and enter bill@flow.gl into the email address, and then click the "Edit" button, and then click the Share button within the dialog. This results in your Flow being shared with the user whose email address is bill@flow.gl .

      mceclip7.png
      Figure 5a - Example dialog for sharing a Flow with a colleague

      mceclip8.png
      Figure 5b - Share settings after sharing the Flow with user bmorton2008 (email = bill@flow.gl)

    7. Finally, hover your mouse over the name of the Flow (New Flow 2021-mm-dd) (A1), and click the small "pencil" icon that appears. Backspace to remove the default name "New Flow 2021-mmdd", and then enter whatever name you wish to give to this new flow. For example, "Your Name Pre-Class Assignment v1.0". We recommend that you always give an appropriately descriptive name to your Flow, and that you always include a version number within the name of the Flow.
      1. Then click the "three dots" button (C1), and again click Save.
    8. Click the "Home" button (R1) located above the "Set Camera" button (S1). You will then be returned to your home page, and you should see the newly created Flow in your folder of Flows.

      mceclip9.png
      Figure 6 - Home screen showing the Flow that you have generated via the steps described above

Summation

By doing the steps above, you have executed many of the fundamental operations within the Flow Editor. The functionality of these operations and many additional options will be covered in the upcoming training sessions.

You may wish to use the Flow you have just created for exercising functionality you will learn during the class sessions!

Thanks, and please contact bill@flow.gl if you have any questions.

If you'd like to download the pdf version of this article, click here. To access the tiger image for download, click here.

Updated