Custom Visualizations in SAS Visual Analytics - A Strategy for Using the Data-Driven Content Object
D3 visualizations are cool. You can go to the D3 Gallery and marvel at the impressive collection of open source visualizations available as options for presenting your data. Specialized visualizations can play an important role in your dashboards, and the ability to embed D3 visualizations and other custom JavaScript (JS) projects is an important capability in SAS® Visual Analytics. However, there is more to creating meaningful dashboards than simply slapping together a collection of impressive visualizations. Choosing the correct visualizations and the appropriate levels of user interactivity is key to creating effective dashboards.
SAS Visual Analytics – visualization and interaction framework
The SAS Visual Analytics user experience is built on a visualization and interaction framework allowing beautiful, informative dashboards to be created and shared. Dashboard authors can choose from the comprehensive collection of built-in visualizations or use SAS Graph Builder, a component of SAS Visual Analytics, to combine built-in objects creating custom graph objects to address specific scenarios.
Adding Report Actions, such as data filtering and data brushing, are key to enabling dashboard users to explore dashboards on their own. SAS Visual Analytics dashboard authors can enable report actions between visualization objects, allowing users to filter and select (brush) data across visualization objects and drill into data to explore and gain deeper insight.
SAS Visual Analytics – Data-Driven Content object
For situations where you need to use a custom JS visualization, D3 for instance, there is the SAS Visual Analytics Data-Driven Content object (DDC). This object is basically a JS container in your SAS Visual Analytics dashboard where custom JS projects can run – but that’s only the tip of the iceberg.
The real power of DDC is that SAS Visual Analytics and the JS projects running in DDC communicate with one another through messages containing JSON objects as parameters. SAS Visual Analytics passes its data to the DDC based on current data filter or data brush interactions, and the DDC communicates information about changed data filter or brush interactions back to SAS Visual Analytics. Informational messages can also be sent from the DDC to be displayed in SAS Visual Analytics. The use of DDC and JS projects is straight forward and very powerful, but keep in mind that you'll have to write code to support integration between DDC and your custom JS visualization. In other words, you need to have a baseline familiarity with custom JS projects.
Think like a product manager
Simple enough? Well it depends. If you’re a JS developer, then yes, it's fairly simple. If not, then you will need to spend some time with online resources, because using the DDC requires coding. Another option might be to partner with a JS developer. You know the data, the business, and the expectations of your users. Software developers know the technologies and how to take requirements and build software components to address them. So how do you start?
First off, recognize that when software is written and put into production someone is on the hook to maintain it. Therefore, whenever possible request custom visualizations that can be used repeatedly and by multiple SAS Visual Analytics dashboard designers. Next, understand what you are asking for. The more thorough and complete your requirements are the more likely you are to get what you want.
Regardless of the approach you take, here are some good steps as you start the process:
- Find a JS visualization that fits a specific purpose for your dashboard.
- Create three buckets for your requirements:
- Data
- Visualizations
- Interactions
- Determine the data roles you will assign to the custom visualization.
- Decide on the level of interaction you expect to deliver through the custom visualization.
- Data Filtering?
- Data Brushing?
- One direction or bi-directional?
- What informational messages should be displayed?
- For developers using the custom visualization?
- For end users?
For general purpose usage, the custom visualization should include:
- Sample data to allow the object to be displayed in two default ways.
- Directly from the URL - outside SAS Visual Analytics. This allows you and others to easily inspect the visualization and understand how it behaves.
- Within SAS Visual Analytics without Data Roles applied. This gives the dashboard designer a visual starting point.
- Instructional message indicating the required Data Roles. This will assist dashboard designers understand the expected data types and order of Data Roles.
- Selection model to support bi-directional selection.
- Resizing of the object when the bounding window changes size.
Things to consider:
- Do you want tool-tips when the mouse hovers over a data element?
- Do you require single-select, multi-select?
- Are there multiple data scenarios that need to be accounted for in the custom visualization logic?
On the SAS Software GitHub site for Data-Driven Content visualizations, there are samples you can reference to better understand how to embed your own custom visualizations. There are also JS utility libraries to provide some of the standard functions you will need for integration with the DDC.
As you begin working on your custom JS project be sure to refer to the following content:
- Customize data visualizations in SAS Visual Analytics with #D3Thursday by SAS’ Ryan West
- Data-Driven Content: leveraging third-party visualizations in SAS Visual Analytics by SAS’ Renato Luppi
- Leverage a Google 3D-PieChart within VA using the Data-Driven Content Object by SAS’ Meera Venkataramani
- Use Custom Visualizations to Extend SAS® Visual Analytics by SAS’ Robby Powell
- Full examples of third-party visualizations can be found in GitHub.
