This data visualization example is a simulation of a casino slot machine floor diagram. It illustrates the use of a more complicated SVG document which is dynamically modified using JavaScript/ECMAScript. BIS for extend is used to provide machine state change information. To set up this applet, create a directory served by BIS for extend and unzip the contents of FloorPlan.zip into this directory. For the purpose of the following description, this directory is assumed to be C:\inetpub\wwwroot\acuxbis\samples\simulation.
The SVG that contains the floor plan is named floorplan.svg. The creation of this SVG is not covered in this example, but you can inspect the design of this document (using a text editor) to see the approach taken. The document has three main sections. The first contains the JavaScript necessary to produce the dynamic modification of the SVG. The second section is surrounded by the <defs>…</defs> XML tags. This section contains definitions of the icons and buttons which are used in the third section. The third section is surrounded by <g id=”FloorPlan”> … </g> XML tags, and contains several hundred <use> XML elements. Each <use> element is identified by an id attribute that contains a machine name.
Each of the <use> tags in the third section also contains an attribute named xlink:href. This attribute is used to refer to elements in the <defs> section, specifically by referring to the id attribute of a <g> tag subordinate to the <def> tag. In this manner, icons defined in the second section can be used repeatedly in the third section, thereby reducing the complexity of the overall SVG document. The xlink:href attribute also supplies the means to change the icon dynamically. The JavaScript in the first section starts a recurring timer to obtain updates from a web service every few seconds. The changes, consisting of machine name/state name pairs, are delivered to the function updateMachineState in the form of JavaScript Object Notation (JSON), which parses the JSON. Then, for each machine name/state name pair, the xlink:href attribute for the <use> element for the machine name is updated to contain the new state name.
A BIS for extend web service program, mstate.acu , provides a simulation of machine state changes. This program maintains a set of machine names in an XML document, machines.xml. Each time a web service request is made by the JavaScript running in the browser, mstate.srf uses mstate.acu to return a small set of randomly generated machine state changes. The XSLT stylesheet, statechangejson.xsl, creates the JSON representation of the data exported from the state-changes group item.