Link_path
Today's new node: link_path. See UPDATE below.
Link_path generates a horizontally or vertically oriented path, curved or rigid, between two points. It's an alternative to the standard link node.
The Nodebox link node creates a horizontal or vertical shape that connects two shapes. The link shape starts with the width or height of the starting shape and ends with the width or height of the ending shape. It was intended to be used in ranking charts or wherever two shapes of different dimensions need to be shown as being connected.
It works OK, but is a bit clumsy to use and produces a somewhat blocky shape for the connection path. Link_path does essentially the same thing but is simpler (connecting two points instead of two shapes) and produces a cleaner look.
Link_path also lets you choose between a curvy path or a rigid path. The curvy path uses the same graceful algorithm that Nodebox uses to connect nodes in the network pane. The rigid path consists of three vertical and horizontal line segments joined to form a sharp-cornered spline.
Link_path takes four parameters:
- Point A. The starting point.
- Point B. The ending point.
- Orientation. Either horizontal (beginning and ending in a horizontal direction) or vertical.
- Rigid. If checked, produces a rigid link path instead of a curvy one.
The attached demo shows all 24 possible bump_charts for four items (see screenshot).
A bump chart is a way of showing changes in rank over time. In each case the four items (red, blue, green, and purple) start in ranks 1,2,3, and 4 from the top. The link paths show how those ranks can change over time, with some colors rising higher in rank while others fall to a lower position. There are 24 different ways of reordering a list of four items, all shown here.
If you look inside the bump_chart subnetwork, you will find a single link_path node forming all the links. It is set to horizontal curvy mode.
I have also added three vertical link paths connecting some of the bump charts.. The first one is rigid; the other two are curvy. I add arrows on each vertical link.
Link_paths can be used in all manor of charts, including flow charts, family trees, and bump charts. By stringing together multiple bump charts you can show rank changing over multiple points in time. My bump_chart subnetwork is designed to show all possible variations of a small number of items, so is not practical for general purpose bump charts with many items in particular orders. For larger, more complex charts it will be easier to use link_path directly. If anyone needs help to make such a chart just let me know.
Enjoy!
-
link_path_screenshot.png
624 KB
- link_path.ndbx.zip 102 KB
link_path_screenshot.png
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 28 May, 2025 04:21 AM
UPDATE
I made a few small improvements.
The line option is so simple (just a line connecting the two points) that it didn't seem worth having. But on further thought I realized there are situations where you want to try using an ordinary line instead of a fancy link path. This makes that easier.
If you choose the line style, orientation becomes moot, so is ignored.
The color and thickness options save you the trouble of adding a separate colorize node.
Revised demo with updated nodes attached.
2 Posted by abdu on 08 Jun, 2025 01:00 PM
Hey John!
It has been a while since I last played with Nodebox.
Felt the urge, checked the forum and I had to played with this node, so I did.
Thank you for this great node.
a
Support Staff 3 Posted by john on 10 Jun, 2025 01:33 AM
You are most welcome.
And you had fun with it! You used the linkages sort of like truchet tiles. Interesting idea.
John