Data viz help
Hello, I am attempting to make my first data visualization using Nodebox.
The visualization is about the color of banknotes from different countries. In the attached csv I have included the country, currency, value, the percentage of the three most used colors and their HEX numbers. I want to show the colors as strips whоsе size responds to the percentages. This probably won't be the final visualization but I want to actually see/explore the data first.
As I am a graphic designer with no knowledge of coding this has been pretty difficult. I would appreciate your help.
Also any materials, tutorials, books that could help me get started? Should I attempt to learn some coding so that I have a better understanding of functions?
- Banknotes.csv 54.8 KB
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 04 Mar, 2020 05:39 PM
Hello Kremena,
I will be delighted to help after I get home from work tonight.
Meanwhile, I spotted a few problems in your data file:
row 180: percentage in the first color column
row 345: hex code in the first percentage column
If you can fix those and resend the file that would help.
John
2 Posted by 91.kremena.petr... on 04 Mar, 2020 07:54 PM
Thank you!
Support Staff 3 Posted by john on 05 Mar, 2020 12:17 PM
Hello again Kremena,
Before I could finish the demo of how to group and display your banknotes, I first had to fix some more problems in the data file. In this first note I will explain what I did, and then I will discuss the solution in a second note.
Three colors were missing the pound sign, so I added them back in:
14 rows had percentages which did not total to 100%. I spotted these by noticing color bars which were narrower or wider than normal. In each case one percentage was accidentally duplicated, so I could deduce what the correct percentage should be.
I made the following corrections:
11 of your currency names used non-ascii characters which confused NodeBox. The fix for this is to open the CSV in a text editor and save it with encoding UTF-8. Because Excel had mangled the names I had to look them up and re-enter them.
I fixed the non-ascii characters on the following currencies:
The final change I made had to do with your Country and Currency columns. You only entered values for these in the first row of a group, leaving those values blank in subsequent rows. In order to group banknotes by currency, it is necessary to repeat those values on each row.
I wrote a quick NodeBox subnetwork to do this, and then saved the file so you never need to do it again. I left the subnetwork off to one side in the code in case you are curious, but now that the file is fixed you don't need it for your project.
I renamed the updated data file Banknotes_3. I will include it in the attachment of my next note...
Support Staff 4 Posted by john on 05 Mar, 2020 01:07 PM
Part 2 - The Solution!
I created a very simple visualization to get you started. You can use this to inspect all the banknotes.
I represented each banknote by a rectangular bar with 3 colored segments. I then stacked the denominations for each currency vertically and drew a little box around each stack. I then simply arranged the stacks in a long row; you can scroll horizontally to inspect each one.
As you can see in the attached screenshot, the network to do this is deceptively simple. I just import the file, lookup a list of the currency names, and feed each name into a "stack_of_bills" node to make each stack.
Stack_of_bills is a subnetwork. This is a somewhat advanced technique in NodeBox, but it was necessary for this project. If you look inside it (which you can do by control-clicking on the node and selecting "Edit Children") you will see how it works.
It first filters the data to give you only the rows for a given currency. For each row it creates a banknote rectangle using another subnetwork called banknote. The rest of the node just stack the banknotes, add a currency title, and draw a box around the whole thing (using a subnetwork from my node library called backdrop).
To understand how the banknote node works, you have to peer inside it. Banknote looks up the three percentages and colors and feeds each pair into a segment node (yet ANOTHER subnetwork). It then simply takes the 3 segments and stacks them together horizontally to form a bar. It then adds a denomination label to the left of the bar. Banknote has width and height controls so you can easily vary the size of the banknotes if you wish.
The final subnetwork (actually a sub-sub-sub-network), segment, simply calculates the width and height of each segment based on the percentage passed to it, creates a rectangle, and colors it using the supplied color.
I realize all this may be a bit overwhelming. For most Nodebox projects it's not necessary to create 3 levels of nested subnetworks, but in this case we needed multiple levels to do all the grouping.
Feel free to play with the attached network and make whatever changes you want. This is obviously just a "pre-visualization"; you will certainly want to arrange the stacks of banknotes in something other than an absurdly wide row (perhaps a circle). You may want to vary the size of the banknotes (very easy - just change the width and height values in the banknote node) or use a different font and sizing for the labels. Or you may want to use something other than a bar to represent each banknote.
You asked about resources and advice on learning to code. NodeBox does have some tutorials (under Documentation) and you can also explore some simple examples using "Open Examples" under the File menu. I would also strongly recommend perusing the Nodebox 3 and Show your Work forums. There are hundreds of examples there which you can download and play with.
The essence of coding is breaking a problem into discrete steps, breaking those steps into sub-steps, and so on. In NodeBox each basic step is function, represented as a node. Each node "fires" when it receives inputs. By hooking the output of one node to the input of another you can chain together sequences. As you saw in this case you can also nest nodes inside each other - which corresponds to placing sub-steps inside a parent step.
The key is to learn how to decompose a problem into functions with specific inputs and a single output. This takes a little getting used to if you've never done it before, but once you get the hang of it you can start quickly snapping nodes together, testing as you go to make sure each node does what you think it does.
There are books on the topic of basic coding, but really the best way to learn how to code is to simply play. It helps if you have a specific goal in mind, like your banknotes visualization. NodeBox makes it easy to try out different ideas and get immediate feedback as you go.
I hope you will stick with it. Please feel free to ask for help if you get stuck. Good luck with your bank notes project!
John
Support Staff 5 Posted by john on 06 Mar, 2020 09:13 PM
Hi Kremena,
Are you still there?
I made a slight change to my solution (revised zip file attached).
Instead of arranging the currency stacks in a long row, I arranged them in tidy columns so you could scan them more easily. To do this I created a node called "knoll".
(Knolling is the art of arranging things in an orderly way. See https://creativemarket.com/blog/what-is-knolling-the-overhead-photo... )
The knoll node is rather tricky so I won't try to explain it. You don't really need it for your visualization, but you are free to use it if you want.
Please let me know if you are satisfied with my pre-visualization and if you have any questions.
Enjoy!
John
6 Posted by 91.kremena.petr... on 09 Mar, 2020 03:15 PM
Sorry for the late reply. This is what I wanted to do, now I'll experiment with the file. Thank you again.