Creating a split view radar chart in SAS Visual Analytics with #D3Thursday
This post we will combine the knowledge gained from our previous posts to create a split view radar chart in SAS Visual Analytics (VA)!
Since this post is an amalgamation of the previous two posts (a radar chart and a variable view stacked bar chart), there isn't much new material to cover. The only new topic is how to create an optimal grid to support multiple charts in one SVG.
As with previous posts I've included sample data (Sample_Data_9.sas7bdat) for this post to help you get started. If you would like to create your own data set to use with this graph, first follow the data steps outlined in our radar chart post and then use the following SAS code to add the View column to your data set:
data YOUR_NEW_LIB.YOUR_NEW_DS;
set YOUR_ORIG_LIB.YOUR_ORIG_DS;
if mod(_N_, 2) eq 0 then View = "Split";
else View = "Single";
run;
Creating the Grid
Let's hop right into the code to calculate our grid's dimensions:
function gridify() {
const ar = WIDTH / HEIGHT;
const factors = [];
const n = DATA.length;
let gridW, gridH, tileW, tileH, radius;
// Determine possible width/height combinations to create grid
for (let i = n; i > 0; i--) {
gridW = i;
gridH = Math.ceil(n / i);
tileW = Math.max(WIDTH / gridW, TILE_MIN_WIDTH);
tileH = Math.max((HEIGHT - LEG_HEIGHT) / gridH, TILE_MIN_HEIGHT);
radius = Math.min(tileW - 2 * SIDE_PAD, tileH - 2 * TOP_PAD) / 2;
factors.push({
gridW: gridW,
gridH: gridH,
tileW: tileW,
tileH: tileH,
radius: radius
});
}
// Find width/height combination that maximizes radius
let factor = factors[0];
for (let i = 1; i < factors.length; i++) {
if (factors[i].radius > factor.radius) {
factor = factors[i];
}
}
// Assign global dimensions using optimal width/height
GRID_WIDTH = factor.gridW;
GRID_HEIGHT = factor.gridH;
TILE_WIDTH = Math.max(WIDTH / GRID_WIDTH, TILE_MIN_WIDTH);
TILE_HEIGHT = Math.max((HEIGHT - LEG_HEIGHT) / GRID_HEIGHT, TILE_MIN_HEIGHT);
WIDTH = GRID_WIDTH * TILE_WIDTH;
HEIGHT = GRID_HEIGHT * TILE_HEIGHT + LEG_HEIGHT;
}
This code uses the number of categories and the dimensions of the container to determine which grid width/height combination maximizes the radius of our split apart charts.
Now that we have our grid dimensions, we can create our individual charts:
// Create group for each category and create sub-elements within each group
CATEGORY_GROUPS = SVG.selectAll(".g-category").data(DATA, function(d) {
return d.category;
});
CATEGORY_GROUPS.enter()
.append("g")
.classed("g-category", true)
.attr("id", function(d) {
return "g-category-" + d.category;
})
.merge(CATEGORY_GROUPS)
.attr("transform", function(d, i) {
return SPLIT
? "translate(" +
((i % GRID_WIDTH) * TILE_WIDTH + TILE_WIDTH / 2) +
", " +
(TOP_PAD + Math.floor(i / GRID_WIDTH) * TILE_HEIGHT + RADIUS) +
")"
: "translate(" + WIDTH / 2 + ", " + (TOP_PAD + RADIUS) + ")";
})
.each(function(d, i) {
let categoryGroup = this;
let iCategory = i;
// Create grid lines
...
// Create grid circles
...
// Create measure labels
...
// Create data paths + data points
...
});
I won't spend much time here, but it is important to note that we now have to create a set of grid lines, grid circles, measure labels, data paths, and data points for each category group. This allows us to split what was previous one single chart into one chart per category.
For more details on how to handle this split and the transitions between views, please check out the full code at the GitHub linked below!
Additional Resources
Next Post
Next post we will learn to visualize nested data using a sunburst chart!
Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!
