Open-source data visualization : Dash and SWAT
SAS Visual Analytics gives the power to data analysts to explore data and build interactive dashboards. Using SAS Viya SDKs, you can integrate the visualizations created in SAS Visual Analytics in your custom web applications. In this series of articles, I will cover a few other tools and languages which can be used to visualize. Whether your preferred language is Python or R, you can also visualize and interact with data stored into CAS or score data or even execute SAS code.
In a previous articles (see list below), I’ve shown how you can create a custom web application using the SAS SDK for Visual Analytics, but if you are data scientist using Python everyday and you are familiar with Dash, then let me walk through you can source your visualizations using data from SAS Viya’s CAS.
In this article, I will explain how you can build an interactive web page which uses data stored in CAS and the application will be developed in Python using the popular Dash package developed by Plotly and the SWAT package.
About Dash
Dash is Python package used to create visualizations mainly used for Machine Learning and data science web apps. The framework is built on top of Plotly.js, React and Flask. While Plotly and React are used for the user interface, Flask is used as the backend web server. Dash is available as an open-source framework, but also has an enterprise platform. In this article, the open-source framework will be used. If you want more information about the differences between the enterprise and the open-source versions, please refer to Plotly. You can also find a lot of example applications on this page.
Using Dash
If you are not familiar with Dash, here are the basic concepts. The framework provides a variety of UI components which can be used to build the layout of your web application.
The simplest Dash application would be:
As you can see in the sample code, an app variable is created using Dash and then elements are added to the application layout.
On line 10, the application is started using the app.run() method/function. Starting the application will open a browser page and display the “Hello World” message.
If you want to add interactivity, you can add an HTML input element and a callback function as seen in the code below.
The app.layout contains different elements:
- a text element: "Say hello to:"
- a Dash Core Component (dcc) for input with an id and other parameters
- an HTML button to update the message
- an HTML header tag to display the hello message
In addition to these visuals, we have a callback function. The @callback requires at least one Output and one Input parameter in that order. The Output stores the information about the target element for the callback function. The Input stores the information about the element triggering the callback function. A State element can be used to pass information from an element which doesn't trigger the callback as in our case the input element. All the callback parameters are in the form: (element_id, element_property). You can pass as many inputs, outputs, and states as you can to the callback function.
The updateMessage function is the callback function which gets as parameters the Input and the State information. As soon the Input will be updated, the function will be called and update the Output.
After saving the code, your application will behave like this:
These are the fundamentals of using Dash. If you want more information about it, please refer to this tutorial. For more information about the different components, please refer to the official documentation.
About SWAT
SAS Scripting Wrapper for Analytics Transfer (SWAT) package exists for Python and R languages. It acts as an interface to the Cloud Analytic Services (CAS) engine . It can be used to load and analyze data using the CAS engine which can process large amounts of data on premise or on the cloud provider of your choice.
For those who are familiar with Pandas package, the SWAT package features SASDataFrames which are a subclass of pandas.dataframes. This means that what you can do with a pandas.DataFrame will also work with SASDataFrame. The only difference is that SASDataFrame objects contain extra metadata familiar to SAS users.
Using SWAT
When using the SWAT package, the first step will be to create a connection with the CAS server. This can be done using the following code:
In this case, the authentication will be done using an authinfo file which is stored in $HOME/.authinfo (running on MacOS). If you want to store the file in another location, you can specify the path by passing an authinfo parameter to the function. The authinfo parameter will define where the authinfo file is stored.
The url parameter defines the URL of the CAS server. In my case: https://server.demo.sas.com/cas-shared-default-http
You should also pass the SSL certificate location in order to connect over HTTPS protocol. This certificate can be exported from a browser connected to your SAS Viya environment. If you want to know how it can be done on your browser, please refer to this link.
If you prefer not to use an authinfo file, SWAT provides other techniques like passing a token parameter or passing username/password parameters. For more information about Making a connection.
As soon as you have created a connection, you can use that connection to perform all the actions you may want like loading data into CAS or execute CAS actions to manipulate data on the CAS server. If you want to read more about using SWAT and CAS, please refer to this article series from Peter Styliadis.
Our application
Now that you have a basic understanding of the different components, let's see what can be using them.
The application layout is similar to many dashboards. We have a header bar displaying the application name. Below the header bar a drop-down box to select a region in this case. We then have a bar chart displaying the sum of invoices by brand which is filtered by the selected region. When the user clicks on an element in the bar, it displays the information about the selected car in the bottom portion of the screen.
The UI components used for the different elements are:
- dbc.NavbarSimple
- dbc.Select
- dcc.Graph
- dbc.Card, dbc.CardHeader, dbc.CardBody, dbc.CardFooter
- dbc.ListGroup, dbc.ListGroupItem
Other components like dbc.Container, dbc.Row and dbc.Col are used to arrange the different elements on the screen.
As you may have noticed, we have a lot of components starting with dbc which stands for dash_bootstrap_components. These are specific components coming with Dash which can be used to display elements which have the same look and feel as Bootstrap based applications. If you are new to web development, you may not know about Bootstrap which is widely used web library for building websites. One of the benefits of Bootstrap is to standardize the usage of CSS classes to ease the development of web applications across different browser sizes. If you want more information about the Dash Bootstrap Components, please refer to this documentation. For more information about Bootstrap in general, please visit this website.
At the beginning of the code below the imports, we have the information about the connection to the CAS server. We then create a CAS session and upload data stored on an external website into CAS. You could also use data loaded on the CAS server, but I wanted to demonstrate how easy it is to load a csv file into CAS using the SWAT package.
Besides the UI components, we have also the callback functions.
The first callback function filters the graph when the selected origin changes.
If you are familiar with pandas.DataFrames, you will notice that the SASDataFrame (tbl) implements the query method. The to_frame converts the SASDataFrame into a pandas.DataFrame.
We then return a bar chart which is provided by plotly.express.
The next callback creates a card element on the fly and displays it. Even if it was possible to reuse the dataframe from the previous callback, I made the choice to query the CASTable to demonstrate the functionality. It would also have been possible to use another CAS table to populate the card element.
Conclusion
Building and sharing visualizations is an import part of today’s data specialists tasks. If you are familiar with Python and pandas, you can create interactive dashboards in a few lines of code. This article demonstrates the basic functionalities of the SWAT package and doesn’t make use of the full capacity of the CAS server. Extending on the techniques described in this article you can query large tables stored into CAS and display the results using your preferred language: Python. You can also integrate data from different data sources or execute scoring based on selections done by the user.
In the next article, I will demonstrate how you can score data as part of this web application.
Stay tuned!
If you want to use the code from this article, you can download it from this GitHub repository.
