Interact with an image to get data!
A few weeks ago, a customer asked if it was possible to display a picture of a human body and be able to click on specific areas to get information related to it. I thought that other customers would be interested in developing such a report for car repairs, or when troubleshooting issues on a donuts production line.
The idea is to have a picture, define pinpoints on it and link those points to data. The functionality is unfortunately not available out-of-the-box in SAS Visual Analytics but it can easily be achieved using standard HTML features and a Data-Driven Content (DDC) object in SAS Visual Analytics.
Before I explain the different steps to build the HTML page needed, here is a screenshot of the resulting report:
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
For this report, I used the SASHELP.CARS table that was loaded into CAS. The drop-down lists on the top have dependencies between them to filter the data. The main part of the report is the Data-Driven Content object which dynamically changes the Car's specifications information based on the area of the car that the user clicks. In this case, the hood of the car was clicked and the specifications related to the engine are displayed.
If you are new to SAS Visual Analytics 8.x, you might be interested to get information about the Data-Driven Content object before getting into more details. The following links might be of interest to you:
Working with Data-Driven Content
Enhance VA reports with dynamic infographics
How to use D3.js within SAS Visual Analytics?
The HTML code
The Data-Driven Content object displays an HTML page. The page can be stored on the web server configured with SAS Viya under /var/www/html or on any other web server. If you decide to store the web page on another server, you should make sure that the SAS Viya environment is configured for Cross-Origin Resource Sharing (CORS). For more information about this configuration, please refer to: Open Viya for REST API’s and web developments by configuring Cross-Origin Resource Sharing (CORS)
It is now time to explain how the HTML page is written. You can find the HTML page and the image file on GitHub.
The HEAD section
This section references two script tags. The JavaScript files are provided by SAS to ease the development of Data-Driven Content object. The messagingUtil.js and contentUtil.js can be found on GitHub. The files should be stored in a directory named util under the root of the web server (for the SAS Viya Web Server: /var/www/html/util/).
A link tag points to the Bootstrap framework. Bootstrap is a web framework that is widely used and eases the design of web pages. It will be used to layout the objects on the web page. If the environment does not allow internet access, the css file can be downloaded and stored under the same directory (or a child folder).
The BODY section
The body of the HTML is what will be displayed on the screen. The main part of the BODY is used to position the different components on the web page.
The section tag contains the different components while the script tags contains the JavaScript code which makes the page interactive.
Here is the code for the section tag:
As you can see in the code, the section tag contains two "rows".
- The first "row" displays the Model, the PriceTag and the header for "Car's specifications".
- The second "row" displays the image of the car and the data about the car.
In the IMG tag, a style property has been defined. This is the only way to resize the image. Other techniques to resize the image will make the image map useless as the references will not be dynamically adapted. This is a limitation of the image map.
Now that you heard about image map, let me explain what it is. In HTML5, the map tag identifies an overlay on the image. The layout creates a map of the image using pixel positions like latitude and longitude on geographic map. In our example, four areas are defined. They have a title property. This property should be set as it will be used to filter the VA data using JavaScript. For more information about image maps.
You probably wonder how you can create those areas. Should you create them using trial and error approach? No.
There are different web sites and tools that can be used to create image maps. I've been using https://www.image-map.net/.
This web site lets you upload a picture or define the URL to a picture(1). It then drives you to the creation of the different areas (2).
When you are done, click on the Show Me The Code! (3) button to get the HTML code:
In this example, only circles are used as shapes but it can also be a rectangle or a polygon.
The code that is generated needs to be pasted in the HTML body element.
The last part of the section tag is the div which displays a hint for the end-user or the data that comes from the VA report. The hint information is visible until the user clicks on one of the areas.
The Script sections
The first script section references jQuery. If you need more information about jQuery. If the environment does not allow internet access, the JavaScript file can be downloaded and stored under the same directory (or a child folder).
The second script will add interactivity to the web page.
I've done my best to clearly document the code. So I will not explain each line of code but to summarize:
- When the web page is loaded, a message is received from VA.
- That message is processed display or hide different pieces of information on the page.
- A function reacts to click actions on the image map areas. This function is in charge of selecting the information that should be displayed and where.
There is one important line of code : e.preventDefault();
This is line is important because it prevents the default behavior for the click event on the image map areas. Missing that line of code causes image flickering.
A question that you may have is about the content of the message received from VA. On the screenshot of the JavaScript code, some code has been highlighted:
This code will write the received message into the browser console. The console can be accessed using Developer Tools on your preferred browser: Chrome, Firefox, Safari, or Edge
The report
The VA report composition is simple. It is composed of four elements: three drop-down lists and a Data-Driven Content object. Each drop-down list filters the next object on its right. From left to right, the variables used for the drop-down lists are: Origin, Make and Model. This configuration is often referred to as cascading prompts. Selecting a model filters the data sent to the Data-Driven Content (DDC) object.
The Data Roles tab for the DDC object looks like this:
The order of the variables is important. The data passed to the DDC object are stored in the form of an array. As a result, changing the order of the variables will affect the Car's specifications. If you changed the number of variables and/or the order, you can use the developer tools to look at the messageFromVA content.
The last step is to bind the DDC object with the HTML page. In the Options tab of the Data-Driven Content object, you should fill the URL under the Web Content section.
The demo
We now have all we need to work with the report.
Conclusion
Using Data-Driven Content objects in SAS Visual Analytics opens the number of possibilities to meet business user's needs. With a bit of web development knowledge, it is easy to build interactive visuals. In this example, I've used the same royalty-free picture for all the cars. In a real business situation, we could use the specific car model. What is demonstrated for cars, can be for any picture. With image maps, any picture can become a map that is clickable and can drive data in the VA report. This example only shows one side of the interaction between Data-Driven Content object and other VA elements. It is also possible to use the Data-Driven Content object to filter other objects in the report. In this example, DDC is the last chain link. It can also become the first one and drive the content of the report. There are many options to implement and use DDC objects. If you have ideas or questions, don't hesitate to share them as comments to this post.
