BookmarkSubscribeRSS Feed

Customize data visualizations in SAS Visual Analytics with #D3Thursday

Started ‎09-06-2018 by
Modified ‎09-13-2018 by
Views 5,510

85455_banner_D3Thursday.pngThere are dozens of objects in SAS Visual Analytics (VA), most of which you are probably quite comfortable with. No one is surprised or confused when they see a pie chart or line graph in your VA report.


However at the same time, these basic visualizations aren’t always the best way to visualize your data. Not to mention recycling the same types of visualizations repeatedly can make your reports turn stale and lose your audience’s attention.


That’s where the Data-Driven Content (DDC) object comes in handy. The DDC object allows you to send your data from VA to an external webpage. That gives us access to all our favorite web development tools to create our own custom data visualizations for our reports.


The D3 Thursday article series will look at how D3.js, a JavaScript library for data manipulation and visualization, can be used with the DDC object to create interesting and unique data visualizations for your VA reports. We will start out with how to work with the DDC object and the basics of D3.js before moving on to more complex visualizations.


All of the code for this series can be found at our GitHub repository.


Don't miss an installment of the series. Follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!


A Note on Background

To look at how D3.js can be used with the DDC object we must start from a common foundation. To get the most out of this article series, you should have at least basic proficiency with VA as well as GitHub. We will be using VA version 8.3 throughout this series, but you should have a similar experience on VA version 8.2.


You should also be experienced with front-end web development, especially JavaScript. That said, to access these examples and use them in your own VA reports is as simple as copying and pasting a URL. There is no server setup or coding required!


Getting Started

Now let’s hop into VA and see what the DDC really looks like.


The Default DDC

First we need to find some data to work with. For this article series, we will be sticking to standard SASHELP data sets that all VA users should have access to. Here we are using the Cars dataset to get us started. Start by dragging a DDC object into the report window and assign it data roles as shown below. The result should be a simple table of your data.


Default DDCDefault DDC

JSON Data Viewer

Next let’s look at rendering a custom HTML file through the DDC. Let’s start by duplicating and renaming the first page of our report. Now to change the content of the DDC all we need to do is change the URL. All the examples for this article series will be hosted on GitHub Pages making them simple to access from anywhere. You can access all of our code and examples from the repository at the bottom of this page Let’s change the URL of our DDC object to The result should be a scrollable content pane that shows the data message VA is sending to the DDC. This will be a useful utility for getting sample data in the coming weeks!


JSON Data ViewerJSON Data Viewer

Note that it is possible that your firewall will block the GitHub Pages address. If this is the case, you need to have an exception made in the firewall through your IT department.  If that is not possible, then you can still run the examples by serving them on a local server reachable from your VA server.


Since we may be using our custom visualizations in multiple reports we should save the links. We can do this by opening the administration settings and adding the new link.


Administration SettingsAdministration Settings

Libraries and Licensing

The DDC makes it possible to use any of the numerous JavaScript libraries available on the web. It is important, however, that you take the time to evaluate the library before using in your VA reports. What functionality does the library provide? How will this functionality improve your VA reports? How big is the library? How long will it take you to learn the library? Most importantly, is the library approved for your use cases? In the case of D3, the library is approved for both private and commercial use so we are safe to use it in our reports.


D3 LicenseD3 License


Next Post

Next time we will take an in depth look at the D3 library. We will discuss how it stacks up against competing JavaScript charting libraries and then look at a simple example of the library in action.


For a quick peek at what a sample on the D3Thursday GitHub looks like, simply enter<sampl... in your browser to see the visualization render with default data. You can add the same URL into Visual Analytics in the "Web Content" field in the Data-Driven Content Object settings, and visualize your data in Visual Analytics.


SAS Visual Analytics is an easy-to-use, web-based product that leverages SAS high-performance analytic technologies.

Version history
Last update:
‎09-13-2018 08:52 AM
Updated by:


Don't miss out on SAS Innovate - Register now for the FREE Livestream!

Can't make it to Vegas? No problem! Watch our general sessions LIVE or on-demand starting April 17th. Hear from SAS execs, best-selling author Adam Grant, Hot Ones host Sean Evans, top tech journalist Kara Swisher, AI expert Cassie Kozyrkov, and the mind-blowing dance crew iLuminate! Plus, get access to over 20 breakout sessions.


Register now!

Free course: Data Literacy Essentials

Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning  and boost your career prospects.

Get Started

Article Labels
Article Tags