Chapter 18: 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:

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 Display 18.1 on page 504, or as simple as an organizational tree for a department in a corporation.

Display 18.1: A Treeview Applet Web Link Diagram

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 on page 513.

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.

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.

 /* 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 . 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 on page 536.*/  /* (Make sure that ods listing is open when running macro.) */  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 on page 506.

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