ScatterBrain™ for Javascript



Instructions for using the Javascript version of ScatterBrain, used on this web page, appear below. The name “ScatterBrain” has been used with several versions of this software. The Java version is described at (case sensitive).


Special note:  These instructions were written before the ability to display two interrelated graphs was added.  The described features can be employed in either graph, but as you will see, the results observed in one graph are linked to the corresponding points in the other.


The data on this web page—  --includes several data elements for each of the 3,458 elementary and middle schools associated with 90 of Texas’ largest  school districts. (Districts were included if they contained a total of 14 elementary and middle schools, combined.) In addition to STAAR1 test passage rates and several demographic variables, the per pupil General Fund Operations Expenditures are also included for each school.  The expenditure data are for the school year 2017-2018. STAAR1 refers to the state accountability tests, evaluated on the “approaching grade level” criterion, which is the least demanding.  The STAAR1 and demographic data are from the 2017-2018 school year, also. The percentage passing rates used herein refer to the percentage of the tested students at each school who passed all tests—reading, mathematics, and writing (in certain grade levels).


Special note 2:  Although the data packaged with this web page are interesting in their own right, it is relatively simple to use other data sets with the Javascript software used there.


The essence of a scatter plot type diagram is that it visually depicts a relationship between two variables. Even when a pronounced relationship is apparent, there will still likely be many points that don’t fall “on the line”.  Often these outliers are of special interest.  The code used on this web page permits interactively identifying the points displayed, including such outliers.  This can be done with the aid of the mouse, drawing a rectangle around one or more points, or by name lookup, using a name select list.


Another feature is the ability to highlight all of the elementary and middle schools associated with a selected school district.  In addition, certain calculations can be immediately performed on subsets of points, with the results—totals, simple averages, or weighted averages—shown for multiple subgroups, which can then be  displayed and compared with each other.


When the web page is loaded, the graph on the left will exhibit  the STAAR1 pass rates are on the vertical axis, and the percentage of students who are classified as economically disadvantaged in each school on the horizontal axis. Students are so classified if their family income is low enough that they qualified for the Federal free or reduced-price lunch program during the prior school year.


Some experimental capability to permit the user to edit the graphs displayed at this website, and to save (and retrieve) the edits to local storage, was added.


The reason for restricting the data to the large 90 school districts was to ensure sufficient numbers of elementary and middle schools to enable a statistical comparison of the average levels of spending between the high-poverty and low-poverty groupings of schools within each district. These comparisons can be duplicated using the interactive features of the software used on this web page, which are described in the following instructions for using ScatterBrain for Javascript. 


Larry Toenjes

Instructions for using ScatterBrain (js) at


  1. To identify a single point with the mouse, do the following:

(a)   Using the mouse, place cursor near a point or points of interest;

(b)   Click the left mouse button. (“Click” it, i.e., don’t hold the LMB down and “drag” it.)

(c)    Move the mouse/cursor until the resulting red rectangle encloses a point or points of interest;

(d)   Click the left mouse button again.  One of the points inside the rectangle should begin blinking on and off.

(e)   If there was more than one point enclosed in the rectangle, clicking the LMB once again will advance to the next point found in the rectangle and it will then begin blinking;

(f)     Continue until the last point is blinking. Clicking the LMB once more will cause the last point to stop blinking. The process may be repeated.

(g)   Note that as each school is identified certain data elements are written to the data window beneath the graph.

  1. This web page has been tailored so that individual schools can only be identified with a drop-down selection list after first selecting a school district.  Instead of “selecting” the schools in a district, they can alternatively be highlighted. To highlight all of the schools in a district, proceed as follows:

(a)   First click the LMB with the cursor on the [Reset] and [Clear] buttons.

(b)   If it is only desired to highlight—as opposed to selecting-- the schools in a district, the Highlight/Select button [Hlt/Sel] should not be colored red. If the button is already red, click on it and it will change to white, indicating the Highlight mode.

(c)   Click on the select list box, which will initially be displaying the text “ALL DISTRICTS”.

(d)   From the resulting list of names for the 90 large districts, select the one desired by clicking the mouse (LMB) on its name. The schools in the selected distritd will be highlighted with colored circles.

(e)   The schools in additional districts can be highlighted by repeating steps (c) and (d).

(f)     Note that as each district is selected, aggregated data are written beneath the graph.  In the case of ENR, the aggregate is of course the sum of the enrollments of the elementary and middle schools in the selected district.  For the remainder, the figures are weighted averages for all of the schools, in each district, with enrollments used to weight the values for each school.

  1. If instead of merely highlighting the schools in a district it is desired to discard from the graph all of the schools not in a given district, proceed as follows:

(a)   After clicking on the [Reset] and [Clear] buttons, click on the [Hlt/Sel] button, changing it to color red.

(b)   Select a school district’s name from the district drop-down select list. Only the schools in the selected district will be left in the diagram.

(c)   The remaining schools can be further sub-selected by clicking on either the elementary school button [E] or the middle school button [M]. Clicking on the [All] button removes these sub-selection options


  1. After selecting schools by selecting a particular school district, it is possible to identify an individual point/school using the school select list, just to the right of the one that was used to select districts:

(a)   Place the cursor in the select box window (the first school name in the list appears there) and click the LMB;

(b)   Scroll to the name of the school of interest and click (LMB) on the name.

(c)   The corresponding point in the graph should begin blinking and data pertaining to the selected school displayed in the data window beneath the graph.

(d)   Additional names can be selected and identified by repeating (b).

(e)   Note that elementary schools appear in alphabetical order at the top of the list, followed by the middle schools.


  1. Whenever a point is blinking after using either method 1 or method 4 above, the name can be deposited on the graph to make it easier to relate the points on the graph with the data shown for those already identified.  This is done as follows:


(a)   Whenever a point is blinking use the mouse to position the cursor at the location in the graph where it is desired for the name to be displayed.

(b)   With the cursor positioned, press the Ctrl key.

(c)   With the same point still blinking—not having clicked the left mouse button—the name can be placed near the point in the other graphs, following the instructions in (a) and (b).


  1. Clicking on the [M] button highlights in blue all of the middle schools.  Clicking on the [E] button highlights all of the elementary schools in aqua.  Clicking on the [A] highlights all points. The [A] button should normally remain selected unless it is specifically desired to focus separately on either the elementary or middle schools. If [M] is selected, only middle schools will be recognized in the mouse-drawn rectangles as described previously.  Similarly, for the [E] button.


  1. Clicking on the [Clear] button at any time restores the graph and the data window to the initial condition. Clicking on the [Reset] button re-selects all of the schools in all districts.                                                                                                       
  2. Regression line:  Clicking on the button labeled [Regr] brings up a small panel that permits the following options for each graph, designated Left hand graph or Right hand graph:  None, Linear, or 2Dpoly.  After selecting the desired option, click on [Hide].

9.      Multi-point functions:  Clicking on the [Multi] button turns it red, indicating the program is in the mode that operates on multiple points at once, even on all of them.  With the [Multi] function on (red) draw a box around numerous points. (Remember click once, move the mouse, click again.)  When the LMB is clicked the second time, completing the box, certain calculations will be performed on the row values in each column.  Depending on instructions in a “setup file” that the program reads along with the data, the calculation on each column is one of the following three:  (a) total; (b) simple (arithmetic) average; (c) a weighted average. With school-related data the most common weighted average is one which weights data by the number of students in the school, school district, or charter system. Clicking on the [Notes] button will display information indicating which function is applied to each column in the data table.         

10.  Percentage calculation and display:

(a)   When a rectangle is being formed when in the Multi-mode (see step 9), as the size of the rectangle is being changed, before clicking the second time, the percentage enrollments of all students in all schools contained in the rectangle is calculated.  As you change the size of the rectangle, thereby including more or fewer schools, this percentage is constantly re-calculated.  These percentage figures, appear in the small text box which is initially located at the lower left side of the graphs. This text box can be dragged to a different location (Put the cursor near the top of the box, when cursor changes shape depress the LMB and drag as desired.).This feature is useful if it is desired to compare the characteristics of two different sets of schools with approximately the same numbers of students in each set.  This feature is active if the [Pct] button is selected (red).

(b)   If only the schools in a single district are being displayed, as in item 3 above, then the percentages displayed refer to just the enrollment total of the schools in the selected district,              

(c)   Be aware that an older, slower micro processor might not be able to handle these instantaneous percentage calculations acceptably.  If that occurs, or this feature does not work properly with a particular browser or tablet computer, the feature may be turned off by de-selecting the [Pct] button.                                                                 

11.  The [Ctrl] button: If using a tablet computer touching the [Ctrl] button while one of the dots is blinking will result in the name being written next to the dot.  Without a mouse, names cannot be positioned precisely on a tablet (as was described in (5) above when using a computer).                                                                                                                                                                                                                              

12.  Reset button:  If a district has been “selected” as in (3) above and it is desired to return the presentation to show all schools in all districts, click on the [Reset] button.  One other use of the [Reset] button is as follows:  if a large number of points have been included in a rectangle and it is desired to not keep clicking the mouse and identifying all of them, clicking on the [Reset] button will jump out of the loop. (The [Clear] button will also accomplish this latter.)                                                                                                                        

13.  The button labeled [Col] permits changing the color screen from a white screen to a black screen.  Some users may prefer the black screen, for aesthetic of legibility reasons, but if screens are to be captured and printed, the white version should probably be chosen.

14.  When this webpage and its Javascript software is posted to the website it is packaged with a main data set and several related files.  One of these files is referred to as a “setup” file.  The setup file contains the necessary information to display the two graphs and to select and display selected data fields in the data table which are first seen when the web page is presented on a computer.  In addition to the two graphs displayed initially, additional graphs may be defined in the setup file. If present, these graphs can be displayed by repeatedly clicking on the buttons [LHG] and [RHG], which are abbreviations fore “left-hand graph” and “right-hand graph”.  Either button will permit cycling through all of the pre-defined graphs, allowing the user to decide which graph will display in the left or right graph display areas.  Whichever two are chosen, they will be linked together in either the Multi-mode or the single-point (non-Multi-mode).


Many schools represented by a single point: It is sometimes useful to plot all of the schools in each district at one point for each of the respective districts. The data set used here——contains 3,458 schools in the 90 districts. If all of the schools for each district are plotted at a common point, there would be just 90 points in the resulting graph.                                      A good example of the use of such a graph is the one with the title pre-fix “G4”. (Graphs designated G5, G7,G8, and G9 are other examples.)  Use the [RHG] button to place this graph in the right-hand graph area, and leave the one prefixed with ”G1” in the left-hand window. Proceed as follows:  First, click the [Clear] button, and make sure the [Multi] button is colored red.                                      G4 shows, on the vertical axis, the district average regression residuals.  These values are the regression residuals for the schools, averaged, by district, after regressing the TAAS1 pass rates for each school upon the percentage of economically disadvantaged students.  This association can be most easily visualized by selecting and displaying only those schools in a single district.  For example, click on the [Hlt/Sel] button, ensuring it is colored red.  Then select the district Socorro from the district name list.  If the regression line does not appear in the left-hand graph, also click on the [Regress] button. Focusing on the left-hand graph, the residual for an individual school in Socorro would be the vertical distance, positive or negative, from the point representing that school to the regression line, shown in gray.  If these residual distances were determined for all of the schools shown in Socorro ISD, and their average calculated, this would be the y-value used to plot Socorro in G4. The x-value used in G4 is the average percent of economically disadvantaged students in the individual schools in the same district, averaged together to get the district average. To further use this example, with the [Multi] button still red or on, use the mouse to draw a rectangle around the single point, for Socorro, in the right-hand graph. As you can see, all of the points on the left were highlighted when the single point on the right was enclosed in the [Multi] mode rectangle.                                                                       Now, click on [Reset] and then [Clear], bringing back all points in both graphs.  With the [Multi] button still red, but the [Hlt/Sel] button not selected (leaving it white), as points in G4 (right) are selected with the mouse-drawn rectangle their corresponding points in G1 (their schools) will be highlighted.  This can be repeated multiple times, showing the variety of patterns among the schools within the universe of all elementary and middle schools that are plotted in G1.                                                                                                                                    After repeating this process for a couple of districts, the question will immediately arise, as to the district names associated with each of the 90 points in G4? Remember, each point in G4 contains, in effect, one superimposed point for each school in that district’s point.  A district can be identified very easily.  After highlighting all of the schools by creating a rectangle around one of the district points in G4, merely move the cursor to where it is desired to place the name and press the “Tab” key on the computer keyboard.  This can also be used to write the district name in a graph after highlighting all of the schools in a district by selecting a district name in the district select pop-up list, with the [Multi] button “on” or red. In addition, if an individual school has been identified by drawing a rectangle around it, with the dot for that school still blinking if the Tab key is depressed the district name can be exhibited.  This is in addition to writing the individual school’s name to the screen by pressing the <Ctrl> key, as described in Item 5 above.

16.  Browsers:  This Javascript version of ScatterBrain works well with Chrome and recent versions of Explorer. Android-based tablets permit a mouse to be plugged in, which can be used to create the rectangles used in identifying points or performing multi-point calculations. Remember, names can only be written to the screen while the dot for a particular district is actually blinking.  This can occur either by using the mouse method of enclosing points in a rectangle, or by using the name selection list, as described previously.                                                                                            

17.  If a touch-screen tablet is being used, without a mouse, mouse-clicks are simulated by touches.  Therefore, schools or districts can be selected by touching the screen two times, in effect determining the positions of the opposite corners of a rectangle.  After the rectangle is formed, repeated touching of the screen will result in stepping through all of the points highlighted by the resulting rectangle.  If the [Multi] function is “on” (red), the aggregate calculations will be carried out for all of the schools contained in the rectangle defined by the two points on the screen which were touched.

18.  Prior to using a rectangle to identify single points or to highlight multiple points (with the [Multi] button selected turned “red”) clicking on the [Clear] button will re-set the color rotation to begin with color red.  This is optional.

19.  A button to allow changing the size (radius) of the highlighted or blinking points has been added.  The default name on this button is [R=4].  Clicking on this button will rotate through 4 different sizes:  3,4,6, and 8.

20.  A significant new feature is activated by clicking on the [EditGr] button.  When clicked on, two forms are placed on the screen. The first titled “Edit graph setup data”, is discussed first. The second form, titled “Copy/Paste Area” , is discussed in item 21 below.  The “Edit graph setup file” form permits modifying basic elements for a graph, such as the maximum and minimum values used on the axes, the axes’ labels, and the x or y reference lines.  In addition, the modifications can be saved to the user’s local storage and later recalled to reproduce the modified graph. Most of the labels and edit boxes are self-explanatory, but several might need some description:

(a)   [Set k] button.  As stated previously, several different graphs are described in what are called setup files.  Clicking on [RHG], for example, will display each graph in turn in the right-hand window. Each is designated with a title beginning with G1, G2, etc.  Entering the corresponding number (e.g. 2) into the edit box just to the right of the [Set k] button and then clicking on that button will cause the graph setup information to be entered into the various form text areas.

(b)   After making any desired edits to the scales, graph labels, etc., clicking on the [Chg Graph] button will cause the graph with the number entered into the edit box next to the [Set k] button to be modified.  If the graph with that number was not previously moved into either the left or right graph areas using the [LHG] or [RHG] buttons, the change will not be observed.  Only the setup file information would have been altered.  Either of the previously mentioned buttons must be used to make the modified graph visible.

(c)   [Save SF] button.  After entering a name into the text box to the right of this button, clicking on it will cause the graph definition information in the form to be stored to local storage on the computer being used. 

(d)   [Get SF] button.  Not surprisingly, if the name of a graph description saved as in the previous step is typed into the edit box to the right of this button, that information will be recalled and will define the graph whose number is contained in the [Set k] edit box.  So, be aware of having the desired graph’s number in this location before using the [Get SF] function.  Of course, if you should accidently over-write the description of a graph that wasn’t intended to be modified, you can merely reload the webpage to restore it.  But any graphs that might have been intentionally modified would also be restored to their original state. Keep in mind that any changes made using the actions described in (a) and (b) will evaporate when the browser is closed or is directed to a different website.  The local storage option just described allows retrieving any such modifications to a graph.  Local storage is not volatile, but does have a 5-megabit limit.

(e)   The file names and contents of any files stored to local storage (as in ( c) above ) can be viewed with the web browser, as follows (using Chrome):

(i) Right-click on the web page and select “inspect”.

(ii) In the new page, click on “Application”.

(iii) Click on the arrow to the left of “Local Storage”.

(iv) Click on .

(v) The list of the names of the files previously savaged are shown in the column “Key”, with the file contents in the column headed “Values”, as well as beneath the lists, fore the file highlighted by clicking on its name.

(vi) Close the page by clicking on the “X” in the upper right corner of the page.


21. Copy/Paste modified setup files.  This feature permits exchanging modified graph setup information with remote colleagues via email.  Assume, for example, that you have modified the setup parameters for a graph, and you have saved the modified files to local storage, as detailed in item 20.  Now, let’s assume you are in communication with another user of this webpage, and you would like teo convey your changes to that person.  Here is how that can be accomplished:

(a)   Have/display the modified parameters in the Edit graph setup data form.

(b)   ) Click on the [To Edit Box] button, whereupon you will see the setup file data written as a simple text file into the Copy/Paste Area.

(c)   Right-click in the Copy/Paste area, select “Select All”.  Then right click on the highlighted text, and select “Copy”.

(d)   You can now copy this text to the message area in an email, which can be sent to the other party.

(e)   Upon receipt, the recipient, with this web page open, and the [EditGr] option selected, can (1) copy the text into the Copy/Paste Area and then (2) click on the [Fm Edit Box] button, thus inserting the parameters for the new graph into the setup data edit fields.  That person can, in turn, enter a name into the [Save SF] edit box, click on the [Save SF] button, to avoid losing the information.  To see the new graph, the [Chg Graph] button must be clicked on.