Creating Interactive Treeview Diagrams

Creating Treeview Diagrams

The Treeview applet generates node/link diagrams for hierarchical data, with optional fish-eye distortion that highlights the central area of interest, as shown in the following figure:

A Treeview Applet Web Link Diagram

[A TreeViewApplet Web Link Diagram]

You can scroll across the diagram by selecting off-center nodes or by searching for nodes. Positioning the cursor over a node can display optional data tips. If you then right-click, you access a pop-up menu. The menu enables you to highlight or hide subtrees or drill-down to an optional URL. The menu also enables you to select all nodes, display all previously hidden nodes, reset the view, display applet help, and search for nodes using various search parameters.

SAS/GRAPH programming for the Treeview applet differs from some of the other applets in that it does not use ODS, a device driver specification, or a SAS/GRAPH procedure. Instead, the DS2TREE macro references data sets to generate and configure an HTML output file that runs the Treeview applet.

When to Use the Treeview Applet

The Treeview applet is well-suited for the illustration of hierarchical data sets. The fish-eye distortion factor, coupled with extensive node selection features, means that a single node/link diagram can accommodate large data sets. Applet parameters can be set to specify the layout of the diagram. You specify a starting node, and then you specify how the other nodes are to be drawn in relation to that node. The resulting diagram can be as complex as the Web link diagram in A Treeview Applet Web Link Diagram, or as simple as an organizational tree for a department in a corporation.

If you need a higher degree of configurability to illustrate weighted relationships between the nodes and links in your diagram, then the Constellation applet might be a better choice than the Treeview applet, as described in Creating Constellation Diagrams.

Interactivity Enabled by the Treeview Applet

The following picture shows the pop-up menu that a user can invoke by right-clicking a Treeview diagram in a browser. The picture shows all the options that are available for interacting with the diagram. For a description of these options, right-click on any Treeview diagram and select Treeview Applet Help from the pop-up menu.

[Pop-up menu for Treeview applet]

Programming with the DS2TREE Macro for the Treeview Applet

The DS2TREE macro generates HTML output files for the Treeview applet. Macro arguments enable you to generate and format an HTML file and to customize the appearance of your node/link diagram.

Follow the steps shown in the following code to generate a Web presentation that runs the Treeview applet. (Note that the ODS LISTING destination must be open in running the macro.)

/* 1. Define the name and storage location of the HTML output file */
/*    and the location of the jar files.                            */ 
%let htmlfile = your_path_and_filename.htm;
%let jarfiles = http://your_path_to_archive;

/* 2. Define a data set that contains parent-child relationships. */ 
data myorg;
input name $ empno mgrno deptname $22. deptcode $;
cards;
Peter      2620   1420   Documentation            DOC
Linda      6915   1420   Research & Development   R&D
Maria      1320   1420   Legal                    LGL
Vince      1420   1750   Executive                EXE
Jim        6710   6915   Quality Assurance        QA
Nancy     22560   6915   Quality Assurance        QA
Patrick   28470   6915   Quality Assurance        QA
Elsa      33075   6915   Development              DEV
Clement   22010   6915   Development              DEV
Murielle   3020   6915   Development              DEV
David     11610   6915   Research                 RES
;
run;  

/* 3. Specify titles and footnotes: (optional). */
title1 'Organizational Chart';
footnote1 'To display the department name, place the cursor over a node.';
footnote2 'To rotate the chart, click and drag a node.';

/* 4. Run the DS2TREE macro. */
/* You must change the CODEBASE= argument (using either http://      */
/* or a directory path such as C:/) to specify the location of your  */
/* sas.graph.treeview.jar file and its associated jar files          */
/* (sas.graph.nld.jar, sas.graph.j2d.jar). See the CODEBASE= argument in:   */ 
/* Arguments for the APPLET Tag*/ 
/* Make sure that the ods listing destination is open. */
ods listing;
%ds2tree(ndata=myorg,         /* data sets and files */
         codebase=&jarfiles,
         xmltype=inline,
         htmlfile=&htmlfile,
         nid=empno,           /* roles of variables */
         nparent=mgrno,
         ntip=deptname,
         nlabel=name,
         height=500,          /* appearance */
         width=600,
         tcolor=navy,
         fcolor=black);

Display the resulting HTML file in a Web browser to run the Treeview applet and display the node/link diagram.

The preceding example shows how the arguments of the DS2TREE macro identify a data set and specify how the variables in that data set are to be interpreted to generate the diagram. Appearance arguments define the size of the diagram and the color of the text in the title and footnotes.

For information on generating more complex diagrams for the Treeview applet, see Enhancing Presentations for the Treeview Applet.

For definitions of all DS2TREE macro arguments, see DS2TREE Macro Arguments.

Top of Page