BookmarkSubscribeRSS Feed

How to Restyle an Existing #D3Thursday Visualization

Started ‎04-11-2019 by
Modified ‎04-25-2019 by
Views 1,957

#D3Thursday is back again with a new series of articles over the next few weeks leading up to SAS Global Forum 2019.   My colleagues, Elliot Inman and Olivia Wright, and I wrote a paper titled Kustomizing Your SAS Viya Engine Using SAS Studio Custom Tasks and D3.js.  In this paper we create a custom end-to-end analytics workflow in SAS Viya. We start by using SAS Studio Custom Tasks to create custom analytic models. Then, we pass this data into SAS Visual Analytics, where we use custom D3 graphs to visualize the data. These articles will give you a sneak peak at the visualizations used in our SGF paper.  Olivia Wright, author of Custom Task Tuesdays will be doing the same thing with her 
series leading up to SGF. You can check out her series of posts to learn more about how we get from our source data to our analytic model output, and then use CAS to load the output data for use in SAS Visual Analytics.

 

This week we will start slow and take an in-depth look at how you can download, modify, and host any #D3Thursday visualizations I have posted. I will be creating a modified version of the D3 Streamgraph we created previously that will visualize the results of our analytic model in style. More specifically, we will be restyling our streamgraph to emulate the flames that are so typical on kustom hot rods.  

Kustom Hot Rod FlamesKustom Hot Rod Flames

SGF 2019 StreamgraphSGF 2019 Streamgraph

As with previous posts, I've included sample data (Sample_Data_13.sas7bdat) for this post to help you get started. Unlike the sample data in our previous posts though, this sample data is the output of the analytic model that Olivia Wright built using SAS Studio Custom Tasks!

 

Create Your Fork

 

The first step in creating your own customized version of a #D3Thursday visualization is downloading the source repository. We will do this by creating a fork of the source repository on GitHub using the following steps. Note that I will be assuming you have Git installed and configured on your machine. If you haven't done this yet, I've linked some introductory documentation by Atlassian in the Additional Resources section below to help you get started with Git.

 

  1. Navigate to the source repository.
  2. Click "Fork" in the upper-right hand corner. You will be redirected to your fork on GitHub.Create Your ForkCreate Your Fork
  3. Clone your fork by clicking the green "Clone or download" button, copying the URL, and running the command below in your Git console window.Clone Your ForkClone Your Fork

 

git clone <your-fork-url>

Now you're ready to start customizing the #D3Thursday visualizations however you please!

 

Make Your Modifications

 

This week I will be creating a simple modification of the streamgraph we created in a previous #D3Thursday post. I'll start by duplicating the HTML file for that visualization under a new name. The first change I'm going to make is to the updateElements function. We aren't interested in having any animation on our new streamgraph, so instead I'll make the updateElements function delete all children of the SVG and then redraw the visualization from scratch.

 

function updateElements() {
// Remove all elements
d3.select("#" + SVG_ID)
.selectAll("*")
.remove();

// Redraw
drawElements();
}

 

Next, I will modify our color scales to create a gradient from pure yellow to pure red, instead of keying a specific color to each category.

 

// Create color scales
const fills = [];
const strokes = [];
const colorInterp = d3.interpolateRgb("#FF0000", "#FFFF00");
let fill;

for (let i = 0; i < GRAD.data.length; i++) {
fill = colorInterp(i / (GRAD.data.length - 1));
fills.push(fill);
strokes.push(d3.color(fill).darker());
}

GRAD.fillScale = d3.scaleOrdinal(fills);
GRAD.strokeScale = d3.scaleOrdinal(strokes);

 

Finally, let's add a black outline to each path with some CSS.

 

.data-path-context {
pointer-events: none;
stroke-width: 1px;
stroke: black;
}

.data-path {
stroke-width: 2px;
stroke: black;
}

 

Now we have a streamgraph without any complex transitions that is styled in a way that would make the kustom car community proud!

 

Host It In GitHub Pages

 

The final step to this process is to host this modified version of the visualization somewhere it can be accessed from SAS Visual Analytics. I find using GitHub Pages to host the visualizations to be the easiest method, so that's what I'll be describing here. Of course, you can use whichever hosting service or method works best for your situation. To start, you will need to add the changes you made back to your remote fork. You can do this by issuing the following commands into your Git console.

 

git add .
git commit -m <your-commit-message>
git push

Now, navigate to the GitHub Pages URL for your new visualization. The URL will follow the format https://<username>.github.io/sas-visualanalytics-thirdpartyvisualizations/samples/D3Thursday/<name-of-file-you-modified>. In my case the URL is https://rbwest.github.io/sas-visualanalytics-thirdpartyvisualizations/samples/D3Thursday/13_SGF_2019...

 

Additional Resources

Next Post

Next post we will modify our existing D3 sunburst chart for use with the results of our analytic modeling!

 

Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!

 

D3Thursday Logo.png 

Version history
Last update:
‎04-25-2019 09:51 AM
Updated by:
Contributors

sas-innovate-2024.png

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