8. Layout and Pinning
In this Session… | Before you begin… |
| To follow along, download the starting data and snapshot library: |
Slide | ||
|---|---|---|
1 | How To GraphXR 8. Layout and Pinning | |
2 | Before You Begin… Ideally, you’ll have worked through Module 7. Preferences. If you’re starting here, and you want to follow along, you’ll need to:
| |
3 | We’ve already seen how layouts help us discover and explore graph patterns. With our data loaded, click to open the Layout panel. | |
4 | The Layout panel includes tabs to adjust the default layout appearance, to work with Geometric and hierarchical layouts, and to create Parametric 3D scatterplots. | |
5 | The right-click Layout menu or Quick Layout toolbar icon give one-click access to often-used geometric layout options, but with less control than in the Layout panel’s Geometric tab. We’ll delve into the various layout options in detail in a moment. | |
6 | First, though, we’ll look at pinning to understand how it affects working with layouts. | |
7 | A pin icon appears on the nodes arranged with the geometric grid layout, showing that they are pinned to that xyz location in the project space. | |
8 | We use the Pin / Release toolbar toggle icon (or right-click Actions=>Pin or Release menu items) to pin or release selected nodes. The badge next to the toolbar icon shows the number of currently pinned nodes. | |
9 | Any nodes that are moved manually (using left click + drag)are also pinned. | |
10 | When you select pinned nodes, the icon changes to Release. Simply click to release those nodes to the default force-directed layout. | |
11 | With no data selected, you can click to pin all the data.... | |
12 | … or, when all the data is pinned, release it to the default force-directed layout. | |
13 | Now open the Layout panel and Force tab for a look at the default force-directed layout. It’s a dynamic physics simulation that arranges nodes and edges of your graph for reasonably good 3D visibility. | |
14 | Here you can adjust key force layout parameters. Note that the adjustments made in this panel affect all the data except for any pinned nodes. | |
15 | Adjust the Link Strength slider to control how strongly the edges of the graph pull the nodes together. TIP: If the graph moves out of the view, click Center To or Fly Out toolbar icons. | |
16 | Edge length can also be controlled by the Link Distance slider. | |
17 | The Gravity slider controls how strongly all nodes are attracted to a central point. | |
18 | The Charge slider adjusts how strongly nodes are attracted to each other. Moving the slider tothe left results in greater repulsive force between the nodes. | |
19 | Use the Collision slider to separate nodes that overlap in the view. This is particularly useful in a 2D view, to un-stack nodes projected on top of one another. | |
20 | Move the Z-Compress slider to the right to flatten the node layout so that it is more 2-dimensional. | |
21 | A fully 2D layout can be useful, especially for reports. In the Project panel and Settings tab, click the 2D Mode checkbox. | |
22 | You’ll longer be able to rotate the view of the graph in 3D, and the Z-Compress slider will be hidden. Now re-open Project=>Settings and deselect the 2D Mode checkbox to return to 3D layout. | |
23 | When you pin nodes in the graph space, for example, using left click drag, the remaining unpinned nodes are rearranged. To temporarily disable force layout before moving nodes, click the Enable/Disable Force Layout toolbar icon. | |
24 | This leaves any unpinned nodes where they were. To re-enable force layout on unpinned nodes, click the toggle in the toolbar (or in the Force layout tab). | |
25 | Restore Default Settings resets slider controls to their defaults. The graph data also returns to the default force layout, again, except for any pinned nodes. | |
26 | With the Quick Layout menu available in the toolbar or the right-click Layout menu we can apply many geometric layouts in one click. In the legend, select the Episodes nodes, click the Quick Layout icon, and choose Grid. | |
27 | With Episodes still selected, open the menu again and choose Expand to expand the grid or Contract to contract it by a default scale factor. | |
28 | Nodes can also be arranged in hierarchical rings or trees around a central selection of nodes, and we can do this from the Quick Layout menu. | |
29 | The depth of hierarchical Ring or Tree layouts can be set in the Geometric layout panel, but not in a Quick Layout. So, we’ll select the Episodes nodes and Hide them, and then quickly lay out Character nodes around their respective House nodes. | |
30 | Select the House nodes, and in the Quick Layout menu choose Circle, and then Expand, as many times as you like to expand the circle layout. (This simply makes it easier to see the Ring layout we’ll apply next.) | |
31 | With the House nodes still selected, click Quick Layout and choose Ring from the menu. Character nodes are now arranged in rings around their respective House nodes. NOTE: If you don’t select central nodes, GraphXR chooses for you. | |
32 | With the House nodes still selected, choose Tree in the Quick Layout menu. The Character nodes are arranged in trees to the right of their respective House nodes. | |
33 | Choose Ring again to return to the ring layout. Now click Show Hidden Nodes in the toolbar to restore our hidden Episode nodes. | |
34 | We can experiment with adjusting the layout from here. For example: | |
35 | Now go to the Layout → Geometric tab and click Release to return to the default force layout. | |
36 | The Geometric layout tab provides more layout options, controls to position nodes precisely in the project space, and the ability to order nodes by a property value. | |
37 | As with Quick Layout we can apply a Line, Grid, Circle, Spiral, Cube, or Spring layout to any selection of nodes. But here we can also order the nodes by a property value.. But here we can also order the nodes by a property value. | |
38 | Select our House nodes, click the Order by Property checkbox, select the House Category and houseName property, and click the Ascend (or Descend) checkbox. Now click Line. | |
39 | In the Legend, select Episodes. Order by seasonEpisode property and click Grid. Order the Episodes category by seasonEpisode property and click Grid. | |
40 | In the legend, select Characters nodes. In the Layout panel, order the Characters category by the kills property, and click Circle. | |
41 | Rotate, Scale, and Shift controls let you adjust the orientation, scale, and position of a selection in the 3D space. Select Characters nodes and click Rotate Y to rotate the default 90 degrees. Select House nodes and click Expand (or Contract) to expand or contract the line layout by the default 1.5 times. | |
42 | Select the Episodes category (which is in a grid layout) and click the Shift Y button to shift the nodes up by the default 1.1 times. | |
43 | You can enter positive or negative values for Rotate, Scale, and Shift, to reposition any selection of nodes precisely in the graph space. | |
44 | At any time, you can choose a new layout for a selection of nodes or the entire graph. Select Characters nodes and click Cube to display the nodes in a 3D cube. | |
45 | If no nodes are selected a geometric layout arranges all the nodes. To see this, deselect all nodes and click Spiral, then click Expand several times. | |
46 | A Distribution layout spreads nodes grouped by a property value in the X, Y or Z direction. To illustrate, we’ll first go to the Project=>Category tab, choose Episodes and set seasonNumber as a caption. | |
47 | Back in the Geometric layout tab, select Episodes nodes. Under Distribution, click the Spread Out checkbox and increase the Range to 6. Click Order by Property, choose seasonNumber, and click the Ascend and Number checkboxes. | |
48 | Now click Release to return to the force layout. | |
49 | Quick Layout uses default settings for Ring or Tree layouts. Scroll down in the Geometric tab to see that we can set the Ego depth (i.e. the number of hops from the central node), scale the edge Length, and order nodes by a property value. | |
50 | As we did before, lay out House nodes in a circle, ordered by houseName, then Expand the circle using the Quick Layout menu. Again, this simply makes it easier to see the results. | |
51 | With the House nodes still selected, scroll down to the bottom of the panel. | |
52 | Notice that with Ego depth set at 1, the Episodes nodes remain in force layout. | |
53 | With House nodes still selected, click Tree. Character nodes are arranged in a tree pattern to the right of their respective House nodes. Click Left, Right, Up, or Down checkboxes and Tree again to re-orient the connected nodes. | |
54 | Click Ring again to display our ring layout. You can also change orientation for rings (but it’s easier to see the effect in trees). | |
55 | The rings or trees are laid out on a 2D plane, but other nodes can be positioned anywhere in the 3D project space. For example, select the Episodes nodes and apply a Grid or Cube layout with nodes ordered by the seasonEpisode property. | |
56 | At any time you can click Release to return all nodes to the default force layout. Any pinned nodes are automatically released. | |
57 | Now open the Tree layout tab. Here you can arrange nodes as a hierarchy starting from any selection of nodes. Select House nodes and click Apply. The House nodes form the base of the tree and unselected nodes follow level by level according to their connection to the base nodes. | |
58 | Select Episodes nodes and click Apply. Now the Episodes nodes form the base of the tree. This immediately separates out the many Character nodes that are not yet connected to an episode. | |
59 | Use the Axis slider and click Apply to scale the tree layout. To return to a force layout, click Reset. | |
60 | Next we’ll go to the Parametric layout tab to create a 3D scatterplot. Use the X, Y, and Z dropdown menus to select properties, then click Apply. Our choices are saved, letting us apply that layout again. | |
61 | Use the Axis slider to adjust the size of the 3D layout, and the Show Axes and Show Grid checkboxes to toggle the labeled axes and grid on and off. | |
62 | We’ve selected properties that exist only on Episodes nodes (seasonNumber, millionViewers, and totalLines). Nodes without the properties (e.g. House or Character), or which have a null value are stacked up at the origin point. | |
63 | To see a force layout of the nodes that don’t have the selected properties, click the Enable Force Layout toggle in the layout panel (not in the toolbar). Disable Force Layout returns us to our specified parametric layout. | |
64 | This is a good time to take a snapshot and/or save a GXRF file or data view, and download your snapshot archive. | |
65 | We’ve seen how to use layouts for focused visualization of graph patterns. |
Next Steps…
How To GraphXR: Module 9. Time Series.