Radial Line Chart
Hi there! I've been trying to make data visualization for a set of annual weather data, specifically build a radial line chart.
I tried to start from a radial bar chart first and connect the end points, but probably did some dumb mistakes there that I can't tell yet... (Please see the attachment screenshot)
Anyone has any suggestions or ideas how this can be realized? Thank you very much:)
Screen_Shot_2018-04-27_at_17.27.50.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 Apr, 2018 04:57 AM
Hi Sue,
I can tell you something generally about how to convert bars into lines.
A NodeBox bar (rectangle) consists of 4 point corresponding to its 4 corners. If you feed the rectangle for each bar into a points node you will see those 4 points (drawn in a predictable order). You can use a slice (start between 0 and 3, size = 1) to retrieve each point.
Based on the order, you can find the point pairs for the top and bottom of the bar, find the midpoint of each pair, and connect those midpoints. I created a subnetwork, find_line, that does this. Just feed it any number of rectangles located anywhere at any angle and it will return a line running down the middle of each bar.
See attached NodeBox network and screenshot. I create a set of 20 gray bars of random height arranged around a circle then feed the 20 bars into find_line to create 20 lines. I color the lines red and combine them with the bars.
You can control-click on find_line and choose Edit Children to see how the find_line subnetwork works. Find_line assumes horizontal bars where width corresponds to the magnitude of the bar. For vertical bars you will have to modify find_line. Instead of choosing points 0 and 3 for one end of the bar and points 1 and 2 for the other, you would choose 0 and 1 for one end and 2 and 3 for the other.
Please copy/paste find_line into your network and let me know if that does the trick. And feel free to ask more questions about this or any other NodeBox conundrum.
Thanks and welcome to NodeBox!
John
2 Posted by Sue on 28 Apr, 2018 08:52 PM
Hi John, thank you for the reply and the clear explanation, I really appreciate it. The find_line works perfectly in my network and it's great to learn about picking out the item in a certain order from a list. Now I tried to connect all the points on the outer side of the lines and make a closed shape from these dots, thought it should be easy to realize from here but it doesn't seem to work again. I did it directly in the find_line children, can you kindly let me know if I made any mistakes in this process? Thanks again:)
Support Staff 3 Posted by john on 28 Apr, 2018 10:14 PM
Hi Sue,
Glad I could be of help.
The mistake you made was placing your connect node *inside* the subnetwork.
Subnetworks are the most powerful - and most confusing - feature of NodeBox. Each subnetwork is a function; it takes up to seven inputs and spits out a single output. The nodes inside a subnetwork know nothing about what goes on in the outer world; they just do their thing, one set of inputs at a time.
In this case, the find_line subnetwork takes in one rectangle at a time and spits out one line at a time. Connect cannot work here because there is only one line being produced each time - so there is nothing to connect.
So all you have to do is move your connect node outside. You now face a new problem, though. Find_line produces lines, but you only want the outer end points of those lines.
To get those outer end points, first feed the output of find_line to a point node. If you have 20 lines this will produce 40 points: inner, outer, inner, outer, etc. You only want the outer points. Fortunately there is node that can do this for you: take_every. If you set the take_every node to 2 it will take every other node from that list.
One minor problem remains. Since this list happens to start with the inner node, take_every will give you all the inner nodes, not all the outer nodes. To solve this, just shift the list by 1 before using take_every.
I am attaching a revised version of my demo network and a screenshot. All I do is feed another output line from find_line to the following four nodes in succession: point, shift, take_every, and connect. Voila! The outermost points of your radial lines are now connected. (You can either close them to form a loop or not using the checkbox in the connect node.)
Hope that clears things up. Keep playing and keep asking questions!
John
4 Posted by Sue on 02 May, 2018 01:32 PM
Thanks so much again for your reply John, make perfect sense. I've been trying to duplicate the process, after shifting 1 point and then take every 2, it selected most of the outer point but somehow still got some inner points too. The data set I use has 8784 rows is it possible it's too much to calculate?
Support Staff 5 Posted by john on 02 May, 2018 08:07 PM
Sue,
No, the size of the list shouldn't matter. I routinely deal with much longer lists than that.
Usually in situations like this the problem is with the underlying data. You are deriving these lines from a set rectangles, yes? Is it possible that some of those rectangles are drawn in a different order than others?
As I mentioned above, find_line assumes "horizontal bars" where width corresponds to the magnitude of the bar. For vertical bars you will have to modify find_line. Instead of choosing points 0 and 3 for one end of the bar and points 1 and 2 for the other, you would choose 0 and 1 for one end and 2 and 3 for the other.
Is it possible that some of your bars are "vertical bars" for some reason?
The way to investigate this is to use a slice node to find and isolate a particular bar that is misbehaving. Add a slice node just below find_line and render that. You should see the first 10 lines (since 10 is the default size). Drag on the size value increasing it until you find a missing or sideways line. Then change slice to start at that line with a size of 1. Apply that same slice to the list of rectangles. That should isolate and display your first wacky rectangle.
In Viewer mode turn on the Point Numbers checkbox above the viewing area. Zoom in to see the four point numbers at the corners of the rectangle (0 to 3). You should see 0 and 3 at the base of the rectangle and 1 and 2 at the "top". If you see instead a 0 and 1 at the base and a 2 and 3 at the top, you have yourself a vertical bar.
If that's the problem you will need to modify find_line to detect these vertical bars and adjust accordingly. It may be, for example, that whatever code created the bars draws them sideways whenever the height of the bar is less than the base.
Or maybe there is some other problem. You can use this same slice detective work to look for anomalies and figure out what's causing them.
Either way please let me know. If you are totally stumped and are willing to share your data I might be able to have a look at it myself.
Good luck!
John
6 Posted by Sue on 04 May, 2018 10:12 AM
Hi John, I think I figured out what the problem is. I used your method and found those rectangles which the corners are in the wrong order, they are negative numbers! Should have thought that before XD. I insert one more column of data based on the original one and add in a value to make the smallest number positive, and now the visualization seem to display as expected. Not sure if it's the best way to solve this problem but I can live with it for now. If you have other better suggestions please do let me know. Thanks again!
Support Staff 7 Posted by john on 07 May, 2018 05:30 AM
Hi Sue,
That is certainly one way to solve the problem. If you just want to visualize fluctuations in temperature or other such measurements, it's not really necessary to call out values which happen to be negative.
If it is important for viewers to understand when a measurement crosses the line from positive to negative you can definitely make it so negative lines point inside the circle while positive lines point outward. You just have to detect negative numbers (using a compare node) and then use a switch node to use a different version of find_line for those numbers.
But it looks like you now basically accomplished what you set out to do. I encourage you to keep playing with NodeBox and share your work here whenever you can.
Happy NodeBoxing!
John
8 Posted by Sue on 11 May, 2018 09:56 AM
Good to know about that John, for this visualisation it's not essential to indicate the negative value, though I'll try both versions to get familiar with detect negative numbers. Thank you so much again for your help, it's such a great start for me to continue exploring Nodebox:)