![Page 1: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/1.jpg)
Incremental Grid-Like Layout Using Soft and Hard Constraints
or...Grids for Dunnart
Steve Kieffer, Tim Dwyer, Kim Marriott, Michael WybrowMonash University
Graph Drawing 2013, Bordeaux, 23-25 Sep
Wednesday, 25 September 13
![Page 2: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/2.jpg)
Grids for Dunnart?
Wednesday, 25 September 13
![Page 3: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/3.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13
![Page 4: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/4.jpg)
Why use a grid?
•People like grid layouts?
•Grids promote:
•Alignment
•Nonoverlap
•Distribution
Wednesday, 25 September 13
![Page 5: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/5.jpg)
Nodes are either aligned
or not aligned
never almost aligned
Alignment
Wednesday, 25 September 13
![Page 6: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/6.jpg)
Nonoverlap
If grid is coarse enough, promotes nonoverlap of nodes.
Wednesday, 25 September 13
![Page 7: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/7.jpg)
Distribution
Nodes are distributed
or not
and there is a“global quasi-distribution”
L 2L
Wednesday, 25 September 13
![Page 8: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/8.jpg)
Objection: Dunnart already provides for alignment,nonoverlap, and distribution, using constraints.
Reply: We want a more flexible apparatus, whichis more like “snap-to-grid” when used interactively.
Wednesday, 25 September 13
![Page 9: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/9.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13
![Page 10: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/10.jpg)
How are grids used in VGEs?
• “snap-to-grid” tool
• “snap lines” tool
• align, and distribute, but not globally
Wednesday, 25 September 13
![Page 11: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/11.jpg)
Most obvious approach:add a “snap force”
Wednesday, 25 September 13
![Page 12: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/12.jpg)
snap force:
Wednesday, 25 September 13
![Page 13: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/13.jpg)
Problem: snap force and basic stress compete
So you can untangle OR land on grid, but not both.
Wednesday, 25 September 13
![Page 14: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/14.jpg)
Solution?
Selectively deactivate grid-snap forcein response to user dragging.
Can make it local?
Wednesday, 25 September 13
![Page 15: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/15.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13
![Page 16: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/16.jpg)
Stress MinimizationPick an ideal distance L between neighbouring nodes.
Wednesday, 25 September 13
![Page 17: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/17.jpg)
≈2L
≈3L≈L
Stress MinimizationPick an ideal distance L between neighbouring nodes.Then nodes separated by n links should be placedat a distance of about nL.
Wednesday, 25 September 13
![Page 18: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/18.jpg)
≈2L
≈3L≈L
Stress MinimizationPick an ideal distance L between neighbouring nodes.Then nodes separated by n links should be placedat a distance of about nL.
Deviation is measuredby the stress function:
Wednesday, 25 September 13
![Page 19: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/19.jpg)
Stress MinimizationSo when stress is minimized, neighbours are nearby
(under ideal conditions).
High stress Low stress
Wednesday, 25 September 13
![Page 20: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/20.jpg)
Putting it together
Low stress (neighbours nearby)Grid placement
Preferred placement pattern
⇒Wednesday, 25 September 13
![Page 21: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/21.jpg)
One Consequence:
Preferred placementpattern
⇒Axis-aligned edges(where possible)
Note: this abandons global quasi-distribution.
Wednesday, 25 September 13
![Page 22: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/22.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13
![Page 23: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/23.jpg)
Adaptive Constrained Alignment (ACA)
Idea: - make edges H- and V-aligned - don’t create node-edge overlaps - preserve FD shape if possible - make long H- and V- chains instead of bends
Wednesday, 25 September 13
![Page 24: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/24.jpg)
Adaptive Constrained Alignment (ACA)
Greedy algorithm: Choose “best” edge, and axis-align it. Stop when any further alignment would create an overlap.where “best” = closest to axis-aligned already (preserve FD shape) - but - postpone alignments that create bends until no others remain
Wednesday, 25 September 13
![Page 25: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/25.jpg)
Adaptive Constrained Alignment (ACA)
Problem: As alignment constraints are added, node-edge overlaps can be created and enforced if orthogonal ordering of nodes changes.
Wednesday, 25 September 13
![Page 26: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/26.jpg)
Adaptive Constrained Alignment (ACA)
Solution: Apply a separation constraint along with each alignment constraint, in order to preserve orthogonal ordering.
Wednesday, 25 September 13
![Page 27: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/27.jpg)
Problem
Constraints make graph too rigid.
Wednesday, 25 September 13
![Page 28: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/28.jpg)
Idea: Want to use Lagrange multipliers (LM) to automatically remove ACA’s constraints when the
“tension” on them becomes great enough.
Problem: How to compute the right thresholdfor the LMs?
Is it a function of the number of nodes?
The number of edges?
The number of constraints currently in force?
Not just the number of these things, but their configuration?
Wednesday, 25 September 13
![Page 29: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/29.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13
![Page 30: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/30.jpg)
Node Snap (NS)
Idea: Allow the user to align edges interactively, by making neighbouring nodes snap into alignment with one another.
Node snap force:
Wednesday, 25 September 13
![Page 31: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/31.jpg)
Idea: Make potential energy wells positioned relativeto nodes; let them move when nodes move?
Problem: Can we recover global quasi-distribution?
Wednesday, 25 September 13
![Page 32: Incremental Grid-Like Layout Using Soft and Hard ...skieffer.info/talks/gd13slides.pdfIncremental Grid-Like Layout Using Soft and Hard Constraints or... Grids for Dunnart Steve Kieffer,](https://reader030.vdocuments.us/reader030/viewer/2022020214/5b1a996e7f8b9a37258dcd8c/html5/thumbnails/32.jpg)
Grids StressMinimization
Can Dunnart have grids?
+ =
Why? How?
grid-snapforce
withconstraints
withforces
axis-aligned edges
⇓
Problems Problems ProblemsWednesday, 25 September 13