How to Restyle an Existing #D3Thursday Visualization

2 Likes

#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 Flames

SGF 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.

Navigate to the source repository.
Click "Fork" in the upper-right hand corner. You will be redirected to your fork on GitHub.Create Your Fork
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 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...