Home → NodeBox 3 →

Curved Line Graphs in Nodebox 3

• Edit

wavetree7

19 Aug, 2025 07:21 AM

Hi everyone,

I’m new to NodeBox 3, and I’d like to create a line graph (with data points connected by a curve).
I have a csv file that I'm importing but I am not sure how to put the correct coordinates for it to look like the desired line graph.
The red sketch in the screenshot is a rough idea of where i want to position my graph with respect to the origin, but when i import my data the lines are straight and also in the wrong direction...
Also, some further doubts for once i figure out the basic line graph:
1. Can the different paths of lines have different colours and/or gradients
2. Can the width of those paths be variable? (thick and thin at various points as required
3. Can I put custom text markers, labels on the lines?
4. Can I customise the Y axis to show text instead of values (eg. stage 1, stage 2 instead of 10%, 20%)

I have attached a sample graph as well to showcase the visual i want to create in nodebox
Screenshots or a simple example workflow would really help me understand this better.
thankyou!

• Desired_graph_shape.png 63.6 KB
• Sample_graph.png 45 KB

1. 1 Posted by wavetree7 on 20 Aug, 2025 04:28 AM

   

   Please help me out with this one..

   • Edit

2. Support Staff 2 Posted by john on 20 Aug, 2025 06:09 AM

   

   Hi Wavetree7,

   Welcome to the Nodebox community!

   The answer to all your questions is YES. Everything you ask should be fairly easy to do.

   It would help if I could see your CSV file, or at least the column headings. Does your CSV file have X and Y values for multiple paths (e.g. headings: path, X, Y)? Or comma-separated points? Or some other way of distinguishing the different paths?

   A few basic pointers.

   • The reason your line is going the wrong way is that, in Nodebox, positive Y values point down and negative Y values point up. Just pass the Y values from your CSV through a negate node and you'll be fine.
   • If you connect two points with a line node, the output will be a straight line. If you have many points close together all the tiny line segments will look like a curve. But once you have each path assembled, there are ways of smoothing them to do curve fitting.
   • The easiest way to make a path is just to read in all the X,Y points to a connect node (with the closed checkbox unchecked). If your CSV has a path column, you can use a filter node to separate out the points for each path.

   Your questions:

   1. Yes, once you connect your points into separate paths, you can use a colorize node to give each path a different color. For open paths (like lines or curves), set the fill color to transparent (alpha = 0) and the stroke color to whatever you want. Be sure the stroke width is greater than 0.
      
   2. Yes, sort of. You can vary the thickness of each path by setting its stroke width. Making paths that vary in thickness as they move from point to point is harder, but possible. Basically you have to construct a closed shape instead of an open path. If you really need to do this I can help you once you have a simple version up and running.
      
   3. Yes, it's easy to add custom markers with the textpath node. You will have to manually place each marker. It is possible to devise a system for automatic marker placement, but this is harder. If your paths are color coded it is also fairly easy to create a legend.
      
   4. Yes, it's also easy to replace a numeric Y axis with regularly spaced labels, again using the textpath node. You can place those labels by generating a list of positions (e.g. 0,10; 0,20; 0,30; etc.) and then feeding that list to the position port of the textpath node, along with a list of labels (made using a make_strings node) to the text port of the textpath node.

   Please read through this and see how far you get. If you are still having trouble, please reply and attach a zipped file containing your CSV and your latest NDBX file. I will be happy to help you get it working.

   I look forward to hearing back from you!

   John

   • Edit

3. 3 Posted by wavetree7 on 20 Aug, 2025 11:55 AM

   

   Hi John,
   Thankyou so much for responding. I've attached the CSV file and NDBX file below, I think i am having a difficult time with even the basic task of making the line path, I would appreciate if you could guide me for the same. I looked up the tutorials on the website but I cannot figure out how to make these line graphs.

   Yes, the csv file has different columns for x, y and paths.
   Time is x
   Progress is y
   Scenario are the different paths
   Its only been few days since i started using nodebox, hence I am not yet quite clear on how to do this...I hope the attached files will be useful for you to guide me through this. It would also be helpful if you could direct me to some tutorial that i can follow to create line graphs..
   Looking forward to your guidance
   Thanks!

   Regards,
   Wave

   • Graph_nodebox.zip 1.45 KB
   • Edit

4. Support Staff 4 Posted by john on 20 Aug, 2025 09:11 PM

   

   Wave,

   Thanks for sending your data and initial network. I made a new network (Nodebox Graph) that graphs your data with colored paths, labels, and axes. Zip file attached.

   Nodebox takes a little getting used to, but once you get the hang of it you will find it's an amazing tool for data visualization. The downside is that you start from scratch with a blank canvas. The upside is that you have total control to turn numbers into shapes, colors, and text.

   Plotting X,Y values from a CSV file in Nodebox is straightforward and can be done quickly. Plotting multiple paths in different colors, adding and placing labels, and constructing accurate X and Y axes takes a little more work and experience. In my demo I included both a quick and dirty X,Y plotter and a fancy network with bells and whistles.

   First, two small issues with your first attempt that explain why you were having some trouble.

   The Time and Progress values in your CSV are numbers. A point, however, is a pair of numbers (x,y). You correctly did a lookup for Time but then simply fed that into a point node. A point node needs both an X and a Y. If you only give it an X, instead of throwing an error it will just use that value for both coordinates (X,X).

   So what you needed to do instead was use a make_point node, then feed Time into the X port and Progress into the Y point. That would have given you a list of points which you could then connect to form a curve.

   A second issue was that your X and Y values need to be magnified to be seen more clearly. Time only runs from 0 to 20 and Progress from 0 to 10. So without magnifying these values, the entire chart would be drawn inside a 20 pixel by 10 pixel rectangle. Nodebox is pure vector, so in theory pixels don't matter, and even without magnification you could zoom way in to see your chart. But in practice you want to increase these values so that you can work with them without zooming way down all the time.

   Fortunately, magnification is easy. Just multiply all your Time and Progress values by an arbitrary magnification factor. For my demo I used 20.

   OK, now we can turn to my demo,

   When you open it, you will see the fancy chart rendered (see screenshot). But first double-click on the connect1 node at the root of the smaller network near the top. This is the quick and dirty plot of just the X,Y values. Study this to get the hang of how Nodebox works.

   All I do here is look up Time and Progress, negate the Progress (Y) values, multiply them by a common factor (20), join the X and Y values into points using make_point, and then connect them. That's it.

   Since this ignores the Scenario values that define different paths, what you get is a single path with the end of each scenario linking back to the beginning of the next. Not quite what you want, but enough to verify that you've got the correct data.

   So how do we divide the scenarios into separate paths? This requires a tricky Nodebox concept called a subnetwork. I select all the nodes in my quick and dirty network on top and control-click to group them into a subnetwork which I named draw_path. I then add a filter to only draw points from one scenario at a time.

   Draw_path will now function like a new node. Feed it the data from the CSV, the name of your scenario, and your magnification factor and it will draw just the path for that scenario. You can control-click on draw_path and choose "Edit Children" to open it up and see how I did the filtering. By making this into a subnetwork I can now draw one path at a time (and color them independently).

   The draw_path node sucks in all the CSV data and will then fire once for each scenario you feed it. So to use it we need one more thing: a list of all the scenarios. I formed this list by doing a lookup and then a distinct node which reduces the 71 rows down to the 6 distinct scenario names. As a bonus I can also use this list for the labels.

   I now feed draw_path into a colorize node to give it different colors. To do this, I need a list of 6 different colors. For this task I used a special node from my Cartan Node Library: color_brewer. Color_brewer generates lists of colors for charts using the Color Brewer system developed by Dr. Cynthia Brewer. Feel free to change the "Chosen palette" value to try out different color palettes.

   I actually think it's better to leave these 6 curves as straight line segments because it clarifies the underlying data. But since you asked, I added a fit_curve node (also from my Cartan Node Library) to smooth out the curves a bit.

   Making the labels is easy: just feed the list we already have into a textpath node. Placing those nodes on the graph, however, is a little trickier.

   To do this I used a two-step approach. First a pulled a point near the end of each path to use as a first cut (regardless of what magnification factor you are using). Then I adjusted each of those end points manually by forming a list of adjustment vectors using 6 point nodes and a combine node. I align each label to end of its path and then use the translate node to make my individual adjustments.

   All that's left now is the X and Y axes. I grouped each of these into subnetworks just to keep things tidy. Since this note is already long, I'll let you peer inside these subnetworks to see how I drew the axes.

   As an added bonus I grouped the final chart, centered it (in case you want to export it as a PNG or PGF or SVG) and also scaled it up by 50% to better fill the default canvas size. I will often do a final scale at the very end of a project to get my charts to exactly the size I want. This is one of the great advantages of a pure vector tool like Nodebox.

   That's it. I know this is a lot to swallow for someone just starting out. But if you study this carefully you should start to see how Nodebox works. Please play with my demo. Render different nodes to see each step of the process. Change different values (e.g the MAGNIFY factor) to see what happens when you change them.

   I realize this in not a fully polished chart. I leave it to you to choose different fonts (I use Verdana because it's included with Nodebox so will work on everyone's systems), replace the Y axis marks with custom progress ranges, maybe add a legend, etc. If you have more data like this, you could also make the network more general purpose so that it would automatically adapt to different datasets.

   Please let me know if this helped or if you have more questions. As you can probably tell, I love Nodebox and really enjoy using it. Thanks for giving me a fun challenge.

   John

   • nodebox_graph_screenshot.png 580 KB
   • Nodebox_Graph.zip 16.4 KB
   • Edit

5. 5 Posted by wavetree7 on 21 Aug, 2025 12:50 AM

   

   Hi John,
   THANKYOU so much! This is a huge help, make_point node is what i couldn't figure out, in point node i couldn't see the X,Y coordindates for the longest time i did not know why, but thankyou.
   Yes, as I am getting to know how to use Nodebox it is fun! and the fact that I have to work from scratch is also a pro because that means we have full control over our visualizations. A blank canvas keeps all possibilities open :D
   I appreciate your help a lot, I'll go through your demo and try making this visualization myself, and will then have more doubts and challenges for you!
   Thanks again, I'm having fun learning nodebox too.
   additionally, I'd like to know are there any courses/ workshops that I can attend online? I'd love to join if there are any..
   Have a nice day!
   Regards,
   Wave

   • Edit

6. 6 Posted by wavetree7 on 22 Aug, 2025 03:43 AM

   

   Hi John,
   I've been following your demo and there are few doubts I have further.
   1. I was easily able to make the quick dirty graph from scratch following your demo, but I'm facing a problem when I make the subnetwork the lines are not visible in the connect node inside the subnetwork and am unable to go further to have the separate paths as well...in the attached screenshots I have kept your file and my file side by side for comparison. In my file, the points are visible when make point node is selected but when i go to connect node its nothing is visible, I have kept the point and point numbers on in the viewer tab just to find where my graph is..
   2. Is it possible to built custom colour palette through color brewer?
   3. Furthermore Is it possible to tweak the graph values inside nodebox itself or does the csv needs to be updated every time i want to move a point on the line to update the graph for having discussion with my team and updating the graph live?

   Looking forward to your response!

   Regards,
   Wave

   • Graph_invisible_01.png 143 KB
   • Graph_invisible_02.png 145 KB
   • Quick_Graph.png 82.6 KB
   • Edit

7. Support Staff 7 Posted by john on 22 Aug, 2025 07:39 AM

   

   Hi Wave,

   It's hard to tell anything from just looking at these screenshots. But I think I know what your problem with the subnetwork is.

   There is one important detail I left out because I was afraid I might overwhelm you. Remember when I said "The draw_path node sucks in all the CSV data and will then fire once for each scenario you feed it"? This behavior of taking one input (the CSV data) all at once, and another input (the scenario) one item at a time doesn't just happen automatically. You have to tell Nodebox how to handle each input.

   After you create your subnetwork and publish your ports, you do this by returning to the main level and selecting the subnetwork. Then click "Metadata" at the top of the screen above the parameter pane to open the Metadata dialog. You should see all your inputs on the left under PORTS. Select each input and notice the Range property on the right.

   The Range property has two possible settings: Value or List. Value means "take items one at a time". List means "take items all at once." The defalult is Value. But for your data input, the one that sucks in all the data from your CSV file, you need to change that to List.

   This Value/List distinction is the single most subtle and confusing aspect of Nodebox and it caused me great confusion when I was first starting out. It allows you to choreograph how inputs to a subnetwork relate to each other and for some tasks this is essential. It's a subtle concept, it's very well hidden in the UI, and it's completely undocumented, so it trips everyone up.

   Sorry about that. Try changing your data port to List and see if that solves your problem.

   Your other two questions:

   COLOR PALETTES

   No, it is not possible to build a custom color palette using color_brewer. One way of doing that in ordinary Nodebox is to make some color nodes, one for each color, then simply join them using a combine node. That gives you a list of colors. You can also feed a range node or make_numbers node into the hue port of a hsb_color node (or multiple number lists if you also want to vary saturation and brightness). Or you can type in a list of hex codes using a make_string node.

   OR you can try accessing the color section of my Cartan Node Library:

   http://support.nodebox.net/discussions/show-your-work/904-cartan-no...

   This library is just a gigantic network of individual nodes (on top) and a demo for each node (below). To use it, just copy a node from my library and paste it into your project. Most of these nodes are actually subnetworks. A few require that you also install a code module. All these nodes are free for use with no restrictions.

   This library Is pretty overwhelming, but it does have a nice section of color nodes, several of which can make beautiful palettes. The palette node lets you enter a few anchor colors and then generate intervening colors to complete a large palette using various color spaces and other settings. The colors node generates a range of random colors. There are dozens more. Documentation for each node is available in the forum.

   I would recommend just combining six color nodes at first before tackling my library, but it's there for you when you're ready,

   TWEAKING DATA

   It is certainly possible to tweak your data inside Nodebox, but it's a bit of a pain and may create a maintenance hassle if you make many tweaks over time. For spot changes I find it is quicker just to update the CSV so that there is a single, easily sharable source of truth. You can leave Excel open in another window, make your change, then just tap Command-R in Nodebox to reload the data.

   To tweak values in a data table you have to update one row at a time. You can use a slice node to select all the rows above your change, a make_table node to construct a new row, another slice node to select all the rows below your change, then a combine node to put it all back together. If you plan to do this a lot you could make a subnetwork to ease the pain, but it's still rather cumbersome. I do have a few more nodes to modify data in my library, but, again, I would recommend just modifying the CSV file.

   There is a freehand node which lets you create curves by just drawing them with your mouse/trackpad, but it would be tricky recovering actual data from those curves. I suppose you could use this to add arbitrary curves to your chart during a meeting just to sketch out an idea.

   If you need to make some higher level tweaks like stretching out the time frame for a particular scenario, you could develop a subnetwork to perform that change with some kind of input value to increase or decrease the overall time frame from the original data. This subnetwork would suck in the original CSV, make the change based on the input, then output a revised data table. You would then feed this revised data into the rest of your flow to plot it. This would allow you and your team to see these changes instantly. If you decide that you want to keep these changes, you could then render your subnetwork with the revised data and use the Export command to create a new CSV file.

   Hope that helps. Let me know.

   John

   • Edit

8. 8 Posted by wavetree7 on 23 Aug, 2025 06:14 AM

   

   Hi John,
   Thanks, i tried doing the changes in metadata but it still won't generate the graph. I'm attaching my file below with the csv, please let me know what step I'm missing..
   Regards,
   Wave

   • Graph_02.zip 8.21 KB
   • Edit

9. Support Staff 9 Posted by john on 23 Aug, 2025 07:13 AM

   

   Hi Wave,

   Thanks for sending the NDBX file and CSV. I found several problems.

   1. Your distinct1 node was not actually attached to your lookup1 node. When you press two nodes together like this you need to be sure they are attached.
      
   2. For your network1 node, you set the Data port range to List, but then you also set the Scene port to List. Scene must be set to Value. With all ports set to List the network node will only fire once; you need it to fire for each new value of Scene.
      
   3. Inside your network1 node there was something wrong with the filter_data1 node. Somehow the range of its value port was set to List. I think the only way this could happen is that you must have gone in and changed it manually using the metadata dialog. It's OK (and often necessary) to change the range on ports in a SUBNETWORK, but you should never change the range on standard Nodebox nodes like filter_data. These nodes are designed to work a certain way and changing something that fundamental will almost always break them. To fix this, I just deleted your altered filter_data node with replaced it with a new one.

   With those 3 fixes the subnetwork is now working properly.

   I noticed that in your new CSV both Time and Progress values are larger and Progress values are negative. As a result the graph is now below the X axis, larger than it was, and much farther away from the origin. You may need to zoom out and pan to the southeast in order to find the paths. Once you group and align it, the chart will be centered again but you may need to scale it down (instead of up) to fit on your canvas.

   Hope that gets you back on track. Errors like this are normal, especially when you are first starting out. Rebuilding the network by hand, node by node, as you are doing is exactly the right way to learn.

   I look forward to your next progress report!

   John

   • Edit

10. 10 Posted by wavetree7 on 26 Aug, 2025 05:09 AM

    

    Hi John,
    Thanks for the clarification, I tried creating a new file altogether following all the steps we discussed until now. I've attached below the new file which has four options
    01. The quick dirty graph version which has no issues and easy to do.
    02. Creating a subnetwork to segregate the lines, but it fails to show me any lines or points in the viewer tab. If you go inside the subnetwork you'll see that in the makepoint node the points of graph are visible but not in the connect node. This has been a problem from the start where when a connect node goes inside the subnetwork it stop displaying the graph
    03.I thought I'll try to make it without creating a subnetwork and still creating all the nodes we need. the lines are visible but still not segregated.
    04. I copied the trial_03 and made subnetwork from its nodes and followed the same required logic, i can now see the graph but it seems to have taken a completely different shape altogether as well as is still not segregated.

    All subnetworks in their ports of data have the range as list, yet i cannot seem to create a segregated line graph.
    I am not sure what I'm missing out on...

    Additionally, thanks for the align tip, much needed! I am not sure if i want to scale it down to fit in the view as I need it to be on a large A1 sheet later.

    Looking forward to your help again..!
    Regards,
    Wave

    • Graph_03.zip 8.56 KB
    • Edit

11. Support Staff 11 Posted by john on 26 Aug, 2025 09:06 AM

    

    Hi Wave,

    I commend you for sticking with this. It's the best way to learn. As long as you are willing to stick with it, I will be happy to keep helping you. But I think you're almost there.

    Option 2. So close! You forgot to set the range of the Data port to List. Then, inside your drawpath subnetwork, you failed to uncheck the Closed box in the connect1 node. When you connect a list of points you can either connect the last point back to the first point to form a closed shape (the default closed=true) or end the path with the final point to leave it open (closed=false). In this case you want to leave each path open.

    Option 3. Nope. This situation really requires a subnetwork so that you can fire 8 times to form 8 separate paths. When you try filtering by Scene on the main level it does divide the points by Scene, but then puts them all back together again. Nodebox nodes always output a single combined list no matter how many times they fire.

    Option 4. Also very close. You got the ranges correct and formed the 8 paths. Inside drawpath02 you once again left the Closed box checked on connect3. And then one other mistake: When you fed the connect node into the final align node, you fed all 8 paths into that node. So it center-aligned each path, causing them to loose their branching structure. What you want to do is to align them all together as a single group. You do this by inserting a group node between connect and align.

    A few more pointers which you may have already discovered by now. Nodebox is FAR easier to debug than any other language I've ever worked with, because if something goes wrong you can just work your way down the tree, rendering each node as you go. As soon as you hit a node with an unexpected output you have your culprit. If that node is a subnetwork you may need to open it up and start again rendering the tree inside that subnetwork from the top to down, but you can usually find the problem pretty quickly.

    And as you are moving down a tree, rendering as you go, be sure to flip back and forth between Viewer Mode and Data Mode. Sometimes in Viewer mode the screen will look blank, but when you switch to Data mode you can see exactly what items (paths or points or numbers or whatever) are being output. You should also scroll to the bottom of the data list and see HOW MANY items there are (remembering to add 1 since the list starts at 0). If you were expecting 8 paths but only see 7 (or 9 or 9000) you will have spotted your problem.

    As always please report back and either ask another question or exult in your final triumph. Once you get this nailed I assume you will move on to make it even better.

    John

    • Edit

12. 12 Posted by wavetree7 on 29 Aug, 2025 03:56 AM

    

    Hi John!
    It FINALLY worked, I now have a segregated paths line graph. I truly appreciate your patience to resolve all my silly little doubts and help me through it. Nodebox is truly fun, and I cannot wait to explore it further. Thanks again for making the learning process tad bit easier :)
    Onto the next mission now!
    Regards
    Wave

    • Edit