Chapter 19: Creating Interactive Constellation Diagrams

Creating Constellation Diagrams

The Constellation Applet provides interactivity for node/link diagrams that illustrate data that is associative, hierarchical, or requires an arc list. Node and link color and size can be associated with specified data values.

Display 19.1: A Constellation Applet Affinity Diagram

Interactive features of the Constellation Applet include pop-up data tips for links and nodes, subsetting of links via an embedded scroll bar, pan and zoom, fish-eye distortion of a central image area, and several node and link selection modes. You can define drill-down URLs for nodes, specify menu text for the drill-down action, insert a background image, and specify a drill-down URL for the background image, among other enhancements. You can also specify your own JavaScript methods to define responses to drill-down actions.

The Constellation Applet, like the Treeview and Rangeview applets, differ from the other applets in that the diagrams that they display are not generated by SAS/GRAPH procedures. The DS2CONST macro generates and formats an HTML output file, and specifies the appearance and behavior of the node/link diagram based on values in a data set.

When to Use the Constellation Applet

The Constellation Applet is best used to illustrate relationships between links and nodes, which can be shown in affinity, sequence, and Web-click path diagrams, for example. Colors, link line widths, and link directional indicators can be specified to illustrate relationships. Pop-up data tips can be specified for nodes and links, along with drill-down URLs for nodes and for an optional background image. For diagrams that illustrate associative data, an embedded scroll bar subsets the data in the diagram dynamically.

The Constellation Applet can be used to display hierarchical data, but so can the Treeview Applet, which should also be considered for hierarchical diagrams such as organizational trees, because of its unique layout capabilities. For information on the Treeview Applet, see Creating Treeview Diagrams on page 503.

Programming with the DS2CONST Macro for the Constellation Applet

The DS2CONST macro enables you to generate complete Web presentations for the Constellation Applet. The macro has a large number of arguments that you can use to generate and format an HTML output file, configure the diagram, and describe how data sets and variables are to be applied to the diagram.

The macro arguments are structured so that you can associate a variable with an aspect of the diagram. The values of the variable are then used for that part of the diagram. For example, the NLABEL argument specifies the name of the variable whose values define the text labels that are to be applied to the nodes. Other arguments provide default values that are used when no variable value is provided.

Descriptions of all of the arguments of the DS2CONST macro are provided in DS2CONST Macro Arguments on page 518.

Follow the steps outlined in the following code to use the DS2CONST macro to generate a Web presentation for the Constellation 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 nodes data set */  data nodedata;  length nodeLabel  nodeId xLoc yLoc 8;  input nodeLabel nodeID xLoc yLoc;  cards;  Snacks    5  375   25  SftDrink  3   25   25  Books     2  200   25  BeerWine  4  200  300  Dairy     1   25  300  Bakery    0  375  300  ;  run;  /* 3. Define a links data set */  data linkdata;  length from to value 8 tip ;  input from to value @13 tip $char45.;  cards;  0  0  0     Bakery => Bakery #0  0  1  0.7   Bakery => Dairy #0.7  0  2  0.1   Bakery => Books #0.1  0  3  0.3   Bakery => SftDrink #0.3  0  4  0.1   Bakery => BeerWine #0.1  0  5  0.2   Bakery => Snacks #0.2  1  0  0.5   Dairy => Bakery #0.5  1  1  0     Dairy => Dairy #0  1  2  0.1   Dairy => Books #0.1  1  3  0.2   Dairy => SftDrink #0.2  1  4  0.3   Dairy => BeerWine #0.3  1  5  0.4   Dairy => Snacks #0.4  2  0  0.1   Books => Bakery #0.1  2  1  0.2   Books => Dairy #0.2  2  2  0     Books => Books #0  2  3  0.3   Books => SftDrink #0.3  2  4  0.3   Books => BeerWine #0.3  2  5  0.3   Books => Snacks #0.3  3  0  0.2   SftDrink => Bakery #0.2  3  1  0.3   SftDrink => Dairy #0.3  3  2  0.2   SftDrink => Books #0.2  3  3  0     SftDrink => SftDrink #0  3  4  0.6   SftDrink => BeerWine #0.6  3  5  0.8   SftDrink => Snacks #0.8  4  0  0.2   BeerWine => Bakery #0.2  4  1  0.4   BeerWine => Dairy #0.4  4  2  0.1   BeerWine => Books #0.1  4  3  0.5   BeerWine => SftDrink #0.5  4  4  0     BeerWine => BeerWine #0  4  5  0.9   BeerWine => Snacks #0.9  5  0  0.3   Snacks => Bakery #0.3  5  1  0.4   Snacks => Dairy #0.4  5  2  0.1   Snacks => Books #0.1  5  3  0.5   Snacks => SftDrink #0.5  5  4  0.5   Snacks => BeerWine #0.5  5  5  0     Snacks => Snacks #0  run;  /* 4. Define a title  */  title1 'Grocery Affinity Diagram.';  /* make sure ods listing is open when running macro */  ods listing;  /* 5. Run the DS2CONST macro  */  %ds2const(ndata=nodedata,            ldata=linkdata,            datatype=arcs,            cnode=red,            colormap=y,            height=650,            width=600,            codebase=&jarfiles,            htmlfile=&htmlfile,            nid=nodeID,            nlabel=nodelabel,            nx=xLoc,            ny=yLoc,            lfrom=from,            lto=to,            lvalue=value,            ltip=tip); 

Note: You must change the CODEBASE= argument (using either http:// or a directory path such as C:/ ) to specify the location of your sas.graph.constapp.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.

Display the resulting HTML file in a Web browser to run the applet and generate the diagram.

Arguments in the DS2CONST macro identify the name of the nodes and links data sets. In the nodes data set, arguments identify a node ID variable and a node label variable. Other arguments identify the links data set and the variables that define the nodes at the start and end of each link line.

For information on more complex presentations for the Constellation Applet, see Enhancing Presentations for the Constellation Applet on page 517.