The “Heat Map” Scenario

Have you ever looked at a table of data and wondered if there was a better way to represent the data, so as to better judge the impact of the information?

The technique of “Heat Mapping” is a common mechanism for visualizing data. According to Wikipedia:

A “heat map” (or heatmap) is a graphical representation of data where the individual values contained in a matrix are represented as colors [or shades of a color]. The term ‘heat map’ was originally coined and trademarked by software designer Cormac Kinney in 1991, to describe a 2D display depicting financial market information, though similar plots such as shading matrices have existed for over a century.

For example, this webpage contains a map of the United States and two tables of data (displayed vertically in the right page column). Clicking or tapping the map image on this page adds a map of the United States to the current OmniGraffle canvas, and clicking or tapping each table will transfer data from the table to the map on the current canvas.

This kind of interactivity enables a workflow that really shows off OmniGraffle‘s ability to visualize data! And best of all, the techniques demonstrated on this webpage work on both macOS and iOS. Here’s the workflow using OmniGraffle for macOS:

*Example webpage shown in the video above

Adding Stencil Content to the Current Canvas

In this example, each of the states in a map of the U.S. are colorized with a shade indicating the percentage that Federal tax revenue comprises of each state’s budget. To visualize the data from the provided tables, two instances of the USA map will be added to the document, each on its own canvas.

To add an instance of the map to the current canvas, the user taps or clicks the map image on the webpage. This simple user-action triggers the running of an Omni Automation script embedded in the webpage that automatically imports the contents of the previously installed USA Map stencil to the current document canvas.

The Omni Automation script shown below, performs the task of checking for the stencil and then duplicating all of the stencil items (states) to the current canvas in OmniGraffle.

To make the script executable from the webpage, it is encoded into an Omni Automation URL that is used as the target (href) of an HMTL link encasing the image object in the webpage’s HTML code. The script is then triggered when the user taps or clicks the image.

It’s an effortless way to add a specific map to a document, triggered from a webpage. Try it yourself by tapping or clicking the USA Map image above.

Table Data Export and Heat Mapping

Once an instance of the USA Map stencil has been placed on the current cavas in OmniGraffle by the embedded automation, the next challenge is to colorize the map using the data from either of the data tables on this page.

This involves a multi-step process of:

• Extracting the data from the user chosen table
• Inserting the data into a Omni Automation script that targets the stencil on the current canvas
• Executing the Omni Automation script that matches the data objects to their corresponding graphic elements, and applies a fill color shade to each graphic based-upon the data value of the object in the source table.

To enable their data to be “extracted” by webpage JavaScripts, each of the data tables is assign a unique identifier and its elements (rows and column cells) are assigned keys and values that make them and their components accessible to script queries.

NOTE: the name of each table row is a U.S. postal code that corresponds to the tag assigned to one of the stencil graphics. These postal codes act as unique identifiers that enable the formatting scripts to match data to objects in OmniGraffle.

Here is the main JavaScript function embedded in the webpage that performs the series of steps listed before. It is trigger when the user taps or clicks the OmniGraffle icon at the top right of either table.

Next, let’s examine how the data is extracted from the tables.

Extract Table Data Function

The JavaScript code used to extract table data is the standard JavaScript implementation used with HTML web pages. There are no 3rd-party libraries or frameworks used.

The JavaScript function is passed the ID of the target table, which it then uses to iterate the table rows and extract the data and add it to standard JSON objects.

The result of the function is a JSON array of objects containing the data for every row in the targeted table.

To enable the JSON data to be inserted into the Omni Automation script that performs the action with the OmniGraffle document, the last statement in the extraction function converts the JSON array of objects into a JSON string using the JSON.stringify() method.

Transfer Data (Mapping)

Here is the Omni Automation script that performs the task of matching data with graphics in the OmniGraffle document. In order to be available for execution by the main JavaScript webpage function, it is encoded and placed within a hidden DIV on the webpage. Here is the script unencoded:

To be available for use, the script is encoded and placed within a hidden DIV whose ID matches the ID of its corresponding source table.

Works on iPad Pro Too!

And the best part is that Omni Automation is dual platform: macOS and iOS. See for yourself!