Your browser cannot do “canvas” graphics. The browsers which can do it are Netscape Navigator, Opera, Safari, and Mozilla Firefox. The most convenient and stable seems to be Netscape Navigator.

 Beginners are respectfully invited to click on one of the three big “copy (something) to input area” buttons. “Iris data” is the most impressive.

Iris data
Bupa liver data
sphere data
The button will copy some data to the input area.
input area
Then please click on the big
begin
button to begin the animation. On many browsers the F11 key on the keyboard is useful, to get more viewing space.
clear input area
tab to comma
blanks to comma
permute columns
append on right
color menu
Changes above the line wait for the next click of “begin.”
Changes between the lines, if made during animation, do not wait.
background
squeeze and unSqueeze
longer segments and shorter segments
wider segments and narrower segments
more canvas width and less canvas width
more canvas height and less canvas height
pause and unPause


Your browser cannot do “canvas” graphics. The browsers which can do it are Netscape Navigator, Opera, Safari, and Mozilla Firefox. The most convenient and stable seems to be Netscape Navigator. To top

Iris data
Bupa liver data
sphere data
plane data
tesseract data
hypersphere data

license and e-mail address and revision date

input area

 The input area is where the data must be before the animation can begin. The data can be pasted there if they are in the clipboard, or they can be copied there if there are “copy” buttons for them in the present file.

It is necessary that the data in each row be separated by commas. There are buttons to change blanks to commas or to change tabs to commas. In each row the columns to the left of the right-most column must contain real numbers. In each row the right-most column may contain any string, including a string representing a number. Two rows having equal right-most strings will give the same slope and color to their segments. There is a button to “permute” the columns. There is a button to “append” a new right-most column.

The data can of course be selected and copied to the clipboard. To top

begin

The “grand tour” method for displaying high-dimensional data was invented by Daniel Asimov. See, for instance, http://ntrs.nasa.gov/archive/nasa/casi.ntrs.nasa.gov/19970014997_1997021574.pdf The method is usually implemented in speedy languages like C and Fortran and Java. I have instead used JavaScript. That means my program is slow, jerky and unstable, a caricature of Asimov’s. This is all my fault, certainly not his. Anyway, the “begin” button will start the animation if the data table in the input area is suitable. The right-most column controls slope and color of the segments. The first-met string gets the first color and slope, then the next different string gets the second color and slope, and so on. If there are too few colors, then the animation cannot start. To top

clear input area

 The input area is replaced with an empty string. It is a good idea to click this button before pasting into the input area. To top

tab to comma

 Tables using the tab character as separator can arise in two principal ways. The first is the “table” tag of html. If the user selects and copies such a table to the clipboard and then backs up to here and clears the input area and pastes, then the result will be found to have tabs as separators. The second way is a comma-separated-values file (.csv ). If the browser attempts to open such a file on the web, the file will be opened by the default spreadsheet, usually Excel. If the user then selects and copies the table in the spreadsheet and clicks back to here and clears the input area and pastes, then the result will be found to have tabs as separators. Either way, this “tab to comma” button will convert each tab to a comma. To top

blanks to comma

 This button works on the input area; each line has its beginning blanks and trailing blanks removed. Then each instance of one or more blanks together is replaced by a single comma. This button is for tables that use blanks as the separator. An instance of such a table is
http://harvardforest.fas.harvard.edu/personnel/web/aellison/publications/primer/FishersIrisData.txt
For that particular table, one ought to select all and then copy to the clipboard. Then click on the browser’s back button to come back here. Then click on the “clear input area” button. Then paste into the input area. Then click on the “blanks to comma” button. Also one must delete the top row. Then put 2,3,4,5,1 into the field after the “permute columns” button and click on that button. The input area is ready to be used. Just click on the “begin” button. To top

permute columns

 This button can move the columns into a different order. For example, if there are columns 0 through 7, we can reverse their order by typing “ 7,6,5,4,3,2,1,0 ” without the quotes into the field by the button and clicking on the button. By leaving a number out, we can delete its column. It is also possible to duplicate a column by typing its number twice, but I know of no practical use for this. This button is dangerous on browsers that cannot “undo” inside the input area, but Netscape Navigator and Mozilla Firefox can undo so. Just right-click the mouse inside the input area and then click on the word Undo. To top

append on right

 This button can type a new column on the right of the other columns. It can depend or not depend on those other columns. If we just need to have the constant number 33333, then it suffices to type 33333 into the field by the button and then click on the button.

However, we may desire something more complicated, such as for example the sum of the numbers in columns 1 and 3. In that case we type into the field “ eval( s[1] )+eval( s[3] ) ” without the quotes and then click on the button. The s[1] means the string in column 1, so eval( s[1] ) means the number that will be in column 1. We must type eval because these things are still strings, not yet numbers. However, the contents of the whole field is “eval”ed without our saying so, so the field must be legal JavaScript. This button is dangerous on browsers that cannot “undo” inside the input area, but Netscape Navigator and Mozilla Firefox can undo so. Just right-click the mouse inside the input area and then click on the word Undo. To top

color menu

with alpha

Different users have differently-abled color receptors. The canvas can do alpha, and the colors in this paragraph use alpha. I use more transparency on a segment to suggest that it is farther from the viewer, and less transparency to suggest that a segment is closer to the viewer. The amount of alpha is calculated after each rotation, so it is omitted until then. The 

rgba(255,0,0;rgba(0,255,0;rgba(0,0,255;rgba(128,128,0;rgba(0,128,128;rgba(128,0,128
colors are red, green, blue, red-green, green-blue, and blue-red. The 
rgba(255,255,255;rgba(255,255,255;rgba(255,255,255;rgba(255,255,255
colors are all white, so they ought to be used with a black background. Similarly, the 
rgba(0,0,0;rgba(0,0,0;rgba(0,0,0;rgba(0,0,0;
colors are all black, so they ought to be used with a white background. The 
rgba(0,0,255;rgba(255,0,0;rgba(128,0,128
have no green in them. The 
rgba(0,255,0;rgba(0,0,255;rgba(0,128,128
have no red in them. The 
rgba(255,0,0;rgba(0,255,0;rgba(128,128,0
have no blue in them.
without alpha

The remaining colors have no alpha properties. That is, all the segments are opaque. The two lines 

red;#00ff00;blue;yellow;cyan;magenta
and 
red;green;blue;olive;teal;purple
are for users with all three kinds of color receptors operating. The former has more contrast of brightness than the latter. The next two, 
white;white;white;white;gray;gray;gray;gray
and 
black;black;black;black;gray;gray;gray;gray
are for users with no distinction of color at all. The colors in 
blue;magenta;red;navy;purple;maroon
have no green in them. The colors in 
#00ff00;cyan;blue;green;teal;navy
have no red in them. The colors in 
red;yellow;#00ff00;maroon;olive;green
have no blue in them. To top

background

 If one of the foreground colors is white, then of course the background ought to be set to black, and vice versa. Otherwise the background choice is up to the user. To top

squeeze and unSqueeze

 To squeeze is to move all the segments closer to the center of the canvas. To unSqueeze is to move them farther from the center. The canvas itself is not affected. To top

longer segments and shorter segments

 If segments are longer, their slopes may be easier to see. If segments are shorter, they take up less space on the canvas. To top

wider segments and narrower segments

 Wider segments may be easier to see from the back row of a big lecure hall, but they take more space on the canvas. Narrower segments show slope more clearly. To top

more canvas width and less canvas width

 The default canvas of grandTour is for a monitor screen set for 800 pixels across and 600 pixels down. Users who have set more resolution may wish to make the canvas wider. To top

more canvas height and less canvas height

 The default canvas of grandTour is for a monitor screen set for 800 pixels across and 600 pixels down. Users who have set more resolution may wish to make the canvas higher. To top

pause and unPause

 To pause is to freeze the animation. To unPause is to resume the animation from where it was paused. To top

Iris data

 This is explained and printed in a slightly different format from ours at http://en.wikipedia.org/wiki/Iris_flower_data_set The table at that page can be selected and copied to the clipboard, but be warned that its separators are tabs, not commas. Of course the present file, grandTour.htm, has a button to make the change from tabs to commas.


To top

Bupa liver data

 Just clicking on the “begin” button makes an animation that shows no particular features. I have lifted the data from ftp://ftp.ics.uci.edu/pub/machine-learning-databases/liver-disorders/ The table itself is at “bupa.data” and the explanation is at “bupa.names” . The latter says in part: 
4. Relevant information:
   -- The first 5 variables are all blood tests which are thought
      to be sensitive to liver disorders that might arise from
      excessive alcohol consumption.  Each line in the bupa.data file
      constitutes the record of a single male individual.
   -- It appears that drinks>5 is some sort of a selector on this database.
      See the PC/BEAGLE User's Guide for more information.

5. Number of instances: 345

6. Number of attributes: 7 overall

7. Attribute information:
   1. mcv	mean corpuscular volume
   2. alkphos	alkaline phosphotase
   3. sgpt	alamine aminotransferase
   4. sgot 	aspartate aminotransferase
   5. gammagt	gamma-glutamyl transpeptidase
   6. drinks	number of half-pint equivalents of alcoholic beverages
                drunk per day
   7. selector  field used to split data into two sets
This suggests that maybe we ought to replace columns 5 (drinks) and 6 (selector) with something of our own, showing whether drinks is bigger than 5 or not. (In JavaScript the leftmost column is numbered 0, not 1.)

The button needed is “append on right”. In the field next to that button let us type “ eval( s[5] ) > 5 ? 1 : 2 ” without the quotes. Here s[5] means the string in column 5, and we evaluate it and see if it is bigger than 5. If so, append 1, else, append 2. Then we click on that button. Then in the field next to the “permute columns” button we type “ 0,1,2,3,4,7 ” without the quotes. This will delete columns 5 and 6. Then we click on that button. Now there are only 5 columns. Clicking on the “begin” button we get a different-looking picture.



To top

sphere data

 One hundred points are placed at random on the skin of a sphere embedded in 3-space. The sphere itself is intrinsically 2-dimensional, and the human perception sees this from the way the points seem to try to stay in formation as the figure rotates.


To top

plane data

 One hundred points are randomly placed on a plane (not a hyper-plane) embedded in 6-dimensional space. The plane is intrinsically 2-dimensional. From the motion of the animation it is clear that it is a plane. Without motion nobody could tell.


To top

tesseract data

 Two-hundred-fifty points in 4-dimensional space are randomly placed on the 32 edges of a tesseract. Edges going in the same direction have segments of the same slope and color. This is a grossly inefficient way to animate a tesseract, but the program was short and easy to write, and I could not resist the temptation.


To top

hypersphere data

 One hundred points are randomly placed on the skin of a hyper-sphere embedded in 4-dimensional space. The hyper-sphere itself is intrinsically 3-dimensional. In a stationary picture, the hollowness of the figure might not be apparent, but in animation it is clear that no point stays near the center. Rather, all points move on long paths.


To top

license and e-mail address and revision date

 The “grand tour” is, as I have said, invented by Daniel Asimov. The Iris data and Bupa liver data tables are from other people’s pages, as I have said. All the rest is mine, and I place it in the public domain. Criticism, both constructive and destructive, comes to me, Harold Kaplan, 
       at        dot
smtw2gh  toadmail   com
The date of this revision is 16 April 2008.

Harold Kaplan’s statistics.htm

John C. Pezzullo’s page
To top