Visualization Problem

artbymlo's Avatar

artbymlo

30 Jul, 2018 02:19 PM

Hi,

I have a data list of about two thousand rows. Each row consists of 16 relevant values.
After playing for a while with the nodes, I succeeded to create the right visualization of one row as a subnetwork (as a 4x4 square) which is coloured according to the data (see attached SVG images).

However, I struggle to implement to apply this subnetwork to a grid for my full list of 2000 rows.

What I tried: I created a 'translate' node at the end of my subnetwork and published the position port (1st try) or the position port (2nd try). When I connected them to a grid, I received a out of memory warning, that I am trying to create an infinite list.

My question is how do I connect the rows value to the grid and how do I connect the subnetwork to the grid? Could you please point me towards the solution?

Thank you,
Martin

  1. Support Staff 1 Posted by john on 30 Jul, 2018 10:21 PM

    john's Avatar

    Artbymlo,

    It's a little hard to say without being able to see your NodeBox file, but I gather what you are trying to do is make a subnetwork which takes in one row at a time from your file and, for each row, spits out a 4x4 group of colored squares. That is, the network should produce a list of 2048 groups which you can then arrange using a grid node. Is this right?

    When you get memory errors is usually means that instead of taking one row at a time, your network is taking in the whole file each time, producing not 2048 groups, but that amount squared - about 4 million groups.

    The secret trick to fix this is to select your network, click MetaData from the menu atop the parameter pane, select the port in the left half of the dialog corresponding to the input from your CSV node, and change Range from "List" to "Value". This tells Nodebox to take the rows one at a time instead of all at once each time the subnetwork fires.

    One other thing I would do for general tidiness is add a group node to the bottom of the nodes in your subnetwork so that each set of 16 mini-squares is grouped into a single larger square. That way your subnetwork should spit out 2048 groups.

    Once you have that done, just tie the output of your subnetwork to a translate node and feed a grid node of, say, 64 rows by 32 columns. (NOTE: the translate node is OUTSIDE your subnetwork, not inside it.) You will need to increase the width and height of the grid until the 2048 square groups are spaced evenly.

    Give this a try. If you are still having trouble, please respond to this thread and attach your NodeBox file (zipped).

    Good luck!

    John

  2. 2 Posted by artbymlo on 31 Jul, 2018 01:54 AM

    artbymlo's Avatar

    Hi John,

    Thank you very much for the fast reply and guidance. Yes, you understood exactly what I am trying to achieve, however, I encountered either a translate=null error or other class related error messages. I uploaded the file.

    Thank you again.
    Martin

  3. 3 Posted by artbymlo on 31 Jul, 2018 01:56 AM

    artbymlo's Avatar

    Attachment ->

  4. Support Staff 4 Posted by john on 31 Jul, 2018 05:14 AM

    john's Avatar

    Martin,

    See screenshot and demo file attached.

    Since you didn't include your CSV file I made one with random colors which I hope is close enough. It has the same 16 columns as your Cloud Project file does (V1H, V2H, etc.). You should be able to just point the CSV node to your actual file to see it visualized.

    There were several problems with your NodeBox file.

    Your CSV node was inside your subnetwork. I moved it outside. NodeBox treats the CSV file as a list of 2000 or so rows. You want it outside the subnetwork so you can feed it one row at a time. The subnetwork turns each row into a 4x4 colored square group.

    There was also something funky about the subnetwork node itself. For one thing, there were two nodes on top of each other. But there was something else odd about it that was causing those error messages. I finally made a brand new subnetwork and copied in the nodes from the old one and that solved the problem.

    Since each 4x4 square is 400 x 400 pixels, I had to size the grid very large (20,000 by 25000) so that the squares would not overlap. Not a problem within NodeBox, but if you want to export this as a PNG you may want to make the squares smaller so the overall image comes out at a more reasonable size. You can do this either by changing all the rect nodes inside your subnetwork (to, say, 5 x 5 instead of 100 x 100) and adjust the align nodes accordingly, or else just add a scale node at the bottom (below the translate) to shrink the whole thing down at once.

    Let me know if this solves your problem!

    John

  5. 5 Posted by artbymlo on 31 Jul, 2018 08:44 PM

    artbymlo's Avatar

    Hi John,

    Thank you very much, that explains my struggles. Your file is fantastic. Not only does it work like a charm but it also enabled me to increase the complexity of the visualization tremendously!

    Thank you very much!
    Martin

  6. Support Staff 6 Posted by john on 03 Aug, 2018 09:28 AM

    john's Avatar

    You are most welcome, Martin. Good luck with your future NodeBox adventures. I hope we will see more of you on the forum.

    John

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2018-07-30_at_10.04.31_AM.png 117 KB
  • 2017-07-30_Seed_Word_Background_Export.svg 1.97 MB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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

Recent Discussions

21 Apr, 2025 10:47 AM
21 Apr, 2025 10:41 AM
21 Apr, 2025 05:56 AM
20 Apr, 2025 10:11 AM
19 Apr, 2025 07:17 PM

 

18 Apr, 2025 12:04 AM
14 Apr, 2025 10:18 PM
13 Apr, 2025 11:09 PM
10 Apr, 2025 11:30 PM
10 Apr, 2025 10:16 PM
10 Apr, 2025 10:02 PM