Percentage to Color
Hi everyone!
I'm working on a data visualization and I found myself stuck. I want to visualize the total number of vaccines received by the Colombian government and, I want to colorize the visualization by the percentage of vaccines received i.e, if the Pfizer vaccine represents 35% of the total amount of vaccines received, 35% of the elements within the visualization should have the Pfizer assigned color( #e85f5fff) and so on.
My question is: How can I add the percentage to the color node? Or is there any other workaround to make this happen?
Thanks very much in advance for the time
_10.25.23_a. m..png)
Captura_de_Pantalla_2021-09-03_a_la(s)_10.25.23_a. m..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 03 Sep, 2021 08:04 PM
Hi Juan,
Nice project!
In this case you are coloring 4000 little needles, so you need 4000 colors to match. The trick is to produce a list of 4000 colors divided proportionally into five subsets.
The basic trick is to multiply your amounts by 4000 instead of 100. That way, instead of getting five numbers that sum to 100, you get five numbers that sum to 4000. You can then repeat each color by the appropriate amount to get the list of colors you need.
Your numbers don't add up to 100% - they add up to about 106% instead. For some reason, you are hardcoding five numbers slightly different than the totals in your CSV and using the CSV only to produce a sum you use as a denominator. This doesn't make sense to me, but I assume you know what you are doing.
To compensate for this, instead of multiplying everything by 4000, I multiplied it by 3753 (4000 times the ratio of your CSV sum divided by the sum of your hardcoded numbers). This makes the total number of colors add up to 4000. Actually, due to rounding, they add up to 4001, so I just increased the number of needles in your scatter node to 4001.
In order to make this work out it is very important that the order of colors in your make_strings1 node exactly matches the order of totals derived from your five hard-coded numbers. For some reason you had SIX colors instead of five, so I just removed the last one. I suspect your color list is not in the order you want, so you will need to reorder your color list and make sure there are only five colors.
To produce the correct numbers of each color I made a very simple subnetwork: assign_colors. This simply takes in a list of five colors and a list of five amounts and repeats each color by the corresponding amount. I had to do this as a subnetwork so that it would take each color and amount one at a time. You can peer inside it to see how simple it is.
To make the proportions clear I added a sort by Y node to your list of needles (see screenshot for result). If you would rather have the colors random (but still in the correct proportions) you can simply remove that sort. I would suggest adding a color key so people understand what the colors mean.
For some reason you assigned the same fill color to your .3 stroke around the needles. I left it as you had it, but I think it might look better if you simply removed the input into the stroke port and stroked in black (or stroke color of your choice).
Revised NodeBox file attached. You may have to reset your CSV and SVG files when you unzip the folder on your own system (as I had do).
Hope this is what you were looking for. Let me know if it was and if there's anything else I can do to help!
John
2 Posted by juan.rozo23 on 04 Sep, 2021 04:38 PM
John, thank you very much for helping me out with this one!
You are right, there was something off with the hard numbers. I decided to do it that way because I couldn't find a way to select the independent values per row with a specific node. it came to my attention that you placed a null node after the sort node, I have already seen such use of the null node before but I have never understood that usage...
I'll comeback soon to share the final visualization. Thanks again!
Juan
3 Posted by juan.rozo23 on 06 Sep, 2021 03:09 PM
John, I have finished the visualization. I followed your advice, changed the stroke color and added a color key to make the visualization clearer.
Best regards,
Juan
Support Staff 4 Posted by john on 06 Sep, 2021 07:06 PM
Juan,
Very nice! Clear and effective. NodeBox is a great tool for visualization.
Thanks for sharing this. I look forward to seeing more of your work.
John