Enhance VA reports with dynamic infographics

3 Likes

A few days ago, I saw a presentation that showed an infographic with a human figure. The dual coloring of the human figure represented the men/women ratio of a statistic being represented. I started to think how easy it can be to achieve this using the Data-Driven Content object within SAS Visual Analytics. This is what I will explain in this article.

Here is the resulting report: a simple Visual Analytics report based on the world famous sashelp.class data set. You can also download a CSV version of this data set under the name classfit.

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

We will focus on the creation of the object representing a the ratio between F(emale) and M(ale) in the class data set.

Find and adapt the image

The first step is to find a suitable image on the internet. In this case, I looked for a black and white image representing a human. This is easy to find on the internet. You should just make sure that the resolution is high enough and that the image is available for free. I found the following image.

The image needs a bit of editing. I used Snagit but any other image editor could be used. The first step will be to crop the image to get only the human in black.

The next step will be to make the fill style of the outline transparent. Nearly all image editing software have a tool called "Magic Wand". This tool selects all the pixels from the same color that are close to each other. So, select the body and hit the delete button. When done, do the same for the head of the figure. You should end up with something like this.

You will notice that the areas you deleted should appear transparent, in my editor it appears as a checkerboard area. You should now save the edited image as PNG file. Storing it as PNG file is important because that file format handles the transparency easily which is required for our infographic. If you need more information about transparency and image formats, please refer to this Wikipedia page.

Create the html page

We have now an image with transparent areas. This image will be used as a foreground image in an html page. The html page will be responsible for:

Display the different layers in the correct order
Display background colors according to the data coming from the VA report
Resize the background area to fit the image size

To display the different layers in the correct order, we will use CSS options. There is a specific one to handle layers: z-index. This option sets the order of appearance for the html components. The smallest number goes to the back and the highest number goes to the front. View more information about z-index.

Here is in the css code that is used in the html page:

img {
        position: absolute;
        left: 0px;
        top: 8px;
        height: 85%;
        width: 85%;
        z-index: 1;
    }
    .female {
        background-color: #ffcc32;
    }
    .male {
        background-color: #33A3FF;
    }
    .color0 {
        position: relative;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: -1;
    }
    .color1 {
        position: relative;
        left: 0px;
        right: 0px;
        z-index: -1;
    }

As you can see in the CSS code, we have the img tag which will be displayed in the foreground and the color0 and color1 classes will be used for the html object to be displayed in the background.

The other instructions are mainly to handle the positioning on the page and the background color of the html objects.

So far, we have set the formatting information but we are not handling the data coming from the VA report. We will use javascript for this piece. You can find on GitHub SAS-provided javascript classes that can be used to aid the integration with VA. We will also use jQuery to ease the manipulation of the HTML page. The following lines are serving that purpose.

<script src="./libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./util/messagingUtil.js"></script>
<script type="text/javascript" src="./util/contentUtil.js"></script>

If you need more information on how Data-Driven Objects are working, please refer to:

Those few lines are not enough to handle what we are aiming for. We should also define a function to make the link between the provided javascript and the HTML page. This is the purpose of the following lines:

        function displayGauge(messageFromVA) {
            if (messageFromVA.data) {
                let data = messageFromVA.data;
                let imgHeight = $(".gauge").height();
                let imgWidth = $(".gauge").width();
                let ratio = data[0][1];
                var topHeight = imgHeight * ratio;
                $(".color0").height(topHeight);
                $(".color1").height(imgHeight - topHeight);
                $(".color0, .color1").width(imgWidth * 0.9);
                data.forEach(function (obs, i) {
                    switch (obs[0]) {
                        case 'F':
                            var color = 'female';
                            break;
                        case 'M':
                            var color = 'male';
                            break;
                    }
                    $(".color" + i).attr("class", "color"+i);
                    $(".color" + i).addClass(color);
                }
                );
            }
        }
        va.messagingUtil.setOnDataReceivedCallback(displayGauge);

That piece of code is:

Collecting data from VA report
Getting the size of the foreground image
Formatting the different divs of the html to display the data with the assigned color

Now that we have all the CSS and javascript required to format our object, we should define the content of the html page itself.

    <div>
        <img class="gauge" src="./man.png">
        <div class="color0"></div>
        <div class="color1"></div>
        <div>
            <table>
                <tr>
                    <td class="female">F</td>
                    <td class="male">M</td>
                </tr>
            </table>
        </div>
    </div>

As you can see, the HTML for this example is really simple and minimalistic.

You can find all the files required to reproduce on GitHub.

Use the infographic in the report

The first step will be to copy the files to a web server that is accessible by SAS Visual Analytics. If you don't want to use the web sever that is configured with SAS Viya environment, you can use another web server but you will need to allow access to that server as indicated in the following article: Open Viya for REST API’s and web developments by configuring Cross-Origin Resource Sharing (CORS)

To make it easy on this demo, I've decided to use the web server configured with Viya. You can upload the files from GitHub to the /var/www/html folder of the machine hosting the web server. When done, you should create a VA report and add a Data-Driven Content object to the report. Here are some screenshots of the properties of the object:

You can add other objects to the report and add actions between objects. When the report is completely set, you should see:

(view in My Videos)

Select the full-screen icon to see a larger version.

Conclusion

In a few minutes, you can create a customized infographic that provides visual information tailored to your business needs. A few lines of javascript and a bit of image editing are the only actions required.