SO - with that assumption in place, here's the question:

I'd like to set up a radio button menu in Javascript mode that helps the user select subsets of data for an interactive visualization.  Where can I find the 'how to?'  This is both a dynamic mouse click/position and an OOP task.  

The particulars: I have a screen in Javascript mode that has a menu on the left, and a visualization of data on the right.  The data visualization is intended to be interactive, ie driven by what is clicked/selected in the menu on the left.  Imagine for example, that the visualization is a simple regression graph that replots the best-fit line each time you click (and therefore add or subtract) a data point from the left-hand menu.  

I believe I have four kinds of operations to contend with here: 

1) setting up a radio-button Menu that uses a "Menu" array of the data points that could be used in the visualization

2) setting up a mouse location / clicked operator that allows me to click on the Menu  and therefore create a triggering event that either adds a data point to a "Visualization" array from the "Menu" array, or subtracts a data point.  

3) setting up the Visualization array that inherits the data points from the Menu array for those Menu data points that are clicked

4) the visualization that runs off of the Visualization array.  

#1 and #4 are completed.  

#2 and #3 are turning into headaches for this noob.  

I have a general sense of where to go for #3 to follow step-by-step on setting up non-interactive events that create an inheritance of data points between arrays, but I've been unsuccessful at finding a reading/chapter/example on creating the interactive trigger event in #2 that informs the inheritance based on the matching of mouse coordinates and clicks with radio-button menu coordinates.  

Is there any reading or a link that someone can point me to that basically walks, step-by-step, through the construction of an inheritance of data points from a "Menu" array to a "Viz" array that is triggered by clicking on a radio-button menu?  Would greatly appreciate some direction.  I'd rather not set up a forest of if...else statements.  OR, better yet, if there is a library out there that works in Javascript.  Again, ControlP5 doesn't seem to work in Javascript mode.  I need it for Javascript mode.  

Any help? 

Mike

I am loading data from a text file into Processing.  The text file contains data about a set of trees I wish to draw in Processing.  

The file (TreeFile.txt) looks like this:

There are 33 trees in TreeFile.txt: Tree1 through Tree33

The key to the line is:

Tree Name, x coordinate, y coordinate, height, first branch , second branch, third branch, trunk width

As you can see, each line has first a text element, and then 7 subsequent float/integer elements.  

I wish to draw each of the 33 trees using the 7 float/integer elements, and then display the corresponding name (Tree Name) below each tree I have drawn.  

However, I am getting hung up on Strings, Arrays, and Split functions.  I haven't found a way to help split the file into strings and arrays, and then tell Processing to consider the first text element on each line as a text element and the remainder as floats/integers.  So far I have only found code examples that show me how to turn the file into uniformly floats/integers.  Therefore, when it runs, each tree has a label underneath it, but it only reads as (?) and the PrintLn in the console reveals Tree Name element to be a NAN - I assume that means 'Not a Number' or something.  

Can someone help me write the code so that Processing recognizes the first element as a text (Char?) element and the rest as Float elements so I can both draw a tree and label it with its name?  Here's the code (yes I know the number of code lines involving the tree-drawing are somewhat inefficient, but let's address that later):

//begin code

//end code

Some help would be great!! Thank you! 

Mike