#D3Thursday is back again with a one-off post. This time we will be looking at how we can use the popular 3D graphics library Three.js to create a 3D residual plot!      3D Residual Plot In this post we will take a look at how we can turn a list of coordinates into a 3D surface and how we can use 2D text elements in our 3D visualization to create tick values.    Building a Surface Our 3D residual plot takes 4 inputs: the first covariate (x-dimension), the second covariate (z-dimension), the predicted value for a given covariate pairing (z-dimension), and the residual for a given covariate pairing (z-dimension). How then do we take a series of (x, y, z) coordinates and create a surface from them? The standard way to do this is by creating a series of 3 triangles connecting points in 3-dimensional space. In order to do this we will assume all values are defined for the 2D matrix formed by covariate 1 and covariate 2. In other words, if the values of covariate 1 are [1, 2, 3] and the values of covariate 2 are [4, 5, 6] then there must be a predicted value for all 9 pairings of covairate 1 and covariate 2. If this assumption is met, creating a surface from our data set becomes trivial.   let index, geometry, mesh; GEOMETRIES = []; for (let i = 0; i < COV2.length - 1; i++) { for (let j = 0; j < COV1.length - 1; j++) { index = i * COV1.length + j; for (let k = 0; k < 2; k++) { // Create geometry geometry = new THREE.Geometry(); if (k) { geometry.vertices.push( new THREE.Vector3( COV1_SCALE(DATA[index + COV1.length + 1].cov1), RESULT_SCALE(DATA[index + COV1.length + 1].pred), COV2_SCALE(DATA[index + COV1.length + 1].cov2) ) ); } else { geometry.vertices.push( new THREE.Vector3( COV1_SCALE(DATA[index].cov1), RESULT_SCALE(DATA[index].pred), COV2_SCALE(DATA[index].cov2) ) ); } geometry.vertices.push( new THREE.Vector3( COV1_SCALE(DATA[index + 1].cov1), RESULT_SCALE(DATA[index + 1].pred), COV2_SCALE(DATA[index + 1].cov2) ) ); geometry.vertices.push( new THREE.Vector3( COV1_SCALE(DATA[index + COV1.length].cov1), RESULT_SCALE(DATA[index + COV1.length].pred), COV2_SCALE(DATA[index + COV1.length].cov2) ) ); geometry.faces.push(new THREE.Face3(0, 1, 2)); geometry.computeFaceNormals(); // Create mesh from custom geometry and add to scene mesh = new THREE.Mesh(geometry, PREDICTION_MATERIAL); GEOMETRIES.push(mesh); SCENE.add(mesh); } } }   In order to create a triangle geometry there are a few steps:  Create a new geometry Push the vertices of the triangle Define the face of the triangle using the pushed vertices Compute the face normal Create a mesh from the geometry and add it to the scene It should be noted that we are using a double sided material here so the order of the vertices doesn't matter. If you wanted to create a single sided material, then the order of the vertices in the face would determine the direction of the face normal and which side is lit.   2D Ticks in a 3D World There are several methods used to integrate text in Three.js, each with it's own trade offs. You could import a model of a 3D text object, create your own 3D model of a text object in Three.js, create a custom texture with your text on it, or use bitmap fonts mapped to buffer geometries. For this post, we will look at a simpler method than any of these. We will use standard HTML div elements overlayed on our Three.js canvas to create the illusion of 2D text elements in our 3D space.    // Append axes values d3.select("body") .selectAll(".x-axis-text") .data(COV1_TICKS) .enter() .append("div") .classed("axis-text x-axis-text", true) .html(function(d) { return Math.round(d * 100) / 100; }) .each(function(d) { this.position = new THREE.Vector3(COV1_SCALE(d), -0.53, +0.5); }) .each(setXY); ... // Render loop function function render() { ... // Update axis text positions d3.selectAll(".axis-text") .each(setXY); } ... // Set XY values of element in window given XYZ in world coordinates function setXY() { const vector = this.position.clone(); const canvas = RENDERER.domElement; vector.project(CAMERA); vector.x = Math.round( (0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio) ); vector.y = Math.round( (0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio) ); d3.select(this) .style("top", vector.y + "px") .style("left", vector.x + "px"); }   The only challenge in using div elements for the text elements in our Three.js visualization is mapping a given position in world coordinates (x, y, z) to screen coordinates (x, y). Luckily, Three.js makes the mathematics of this projection simple by providing the project method. This allows you to quickly convert from 3D space into a 2D coordinate system. All that's left after that is scaling the values output from the project method to the pixel size of your display. There is one problem with the result of the above code, however.      Axis Text Without Display Toggle Because the axis text elements are rendered as div elements on top of the canvas the text elements don't disappear of they are obscured by the prediction surface or if the camera has zoomed past them. We can remedy this problem by toggling the display property on the divs depending on the camera position and whether not they are obscured from view.   // Update axis text positions d3.selectAll(".axis-text") .style("display", setDisplay) .each(setXY); ... // Determine whether to display text based on text position and camera position function setDisplay() { const vector = this.position.clone(); const camToText = CAMERA.position.distanceTo(vector); vector.project(CAMERA); // Update text raycaster with new camera location TEXT_RAYCASTER.setFromCamera(vector, CAMERA); // Get intersections from raycaster const intersects = TEXT_RAYCASTER.intersectObjects(GEOMETRIES); let intersected = false; for (let i = 0; i < intersects.length; i++) { if (intersects[i].distance < camToText) { intersected = true; break; } } return intersected || CAMERA.position.length() < this.position.length() ? "none" : "initial"; }   This method isn't perfect, since it only checks if the origin position of the text element is obscured, not every position the element occupies. This solution is, however, highly performant and simpler than the integration of 3D text elements. For more information on some of the other methods of creating text elements in your Three.js project check out the link in the additional resources section below.    Additional Resources 3D Residual Plot GitHub 3D Residual Plot GitHub Pages Creating text in Three.js Next Post This post was a one-off, but in the coming weeks #D3Thursday will return with a new series of posts with new charts focusing on the challenge of visualizing clinical trials data! Stay posted for additional #D3Thursday content and be sure to reach out with any ideas you have for visualizations or interesting data you think deserve a post!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!   ... View more

#D3Thursday is back again with a new series of articles over the next few weeks. This time we will be looking at how we can use the popular 3D graphics library Three.js to create a 3D choropleth! Last time we added interactive overlays to highlight countries when they are hovered over or clicked on. This week we will go one step further and animate our 3D choropleth over time!     Animated 3D ChoroplethAs with previous posts, I've included sample data (Sample_Data_18.sas7bdat) for this post to help you get started.    Animating Over Time For you #D3Thursday readers with a good memory, this talk of animating a visualization over time might be ringing a few bells. That's because we already covered the topic extensively in this post when we animated an area graph over time! If you want to get a more in depth view of the topic, start with that post. This post will just look at the few new considerations for animating our 3D choropleth over time.   The first step in animating our 3D choropleth is to create an additional texture cache.    let WORLD_TEXTURE_CACHE = memoize(getTexture); // Cached textures for globe accross all years let OVERLAY_TEXTURE_CACHE = memoize(getTexture); // Cached textures for country overlays by year We now need base and overlay textures for every year of data sent in. As you can imagine, we could quickly run out of system memory when trying to cache all of these textures. My solution is to use memoize the getTexture function twice, creating two separate caches. The first cache (WORLD_TEXTURE_CACHE) will store the base texture for each year of data, while the second cache (OVERLAY_TEXTURE_CACHE) will store the overlay textures for the present year only. Next we need to modify our getTexture function to take both the year and the country as an argument.   function getTexture(date, country) { ... WORLD_JSON.features.forEach(function(d) { if (!country || country == d.properties.iso_a3) { context.fillStyle = DATA[date][d.properties.iso_a3] ? COLOR_SCALE(DATA[date][d.properties.iso_a3].measure) : "#CCC"; ... } With our modified getTexture function we can load the base textures for all years so that our animation runs smoothly.    // Load textures to world cache DATES.forEach(function(d) { WORLD_TEXTURE_CACHE(d); });   This new cache structure gives us the flexibility to clear our OVERLAY_TEXTURE_CACHE while leaving our base texture cache intact. This way our animations will always play smoothly, but we don't have to worry about running out of memory from storing too many overlay textures.    // Clear overlay texture cache OVERLAY_TEXTURE_CACHE = memoize(getTexture);   I should note here that unlike low level programming languages like C, JavaScript does not allow the programmer to explicitly allocate or free memory. Instead, this process is handled automatically by the garbage collector. By re-initializing the value of OVERLAY_TEXTURE_CACHE we create a new internal cache. Since there is no longer a reference to the previous cache, the garbage collector will start to free the memory it once occupied. In my testing this process happened quickly enough to prevent the cache from growing past the browser's memory limit, but you could still run out of memory if you begin aggressively caching textures before the garbage collector has freed more memory for your application. For that reason, I recommend testing on your target platform and adjusting the size of the overlay textures as needed.    Additional Resources Animated 3D Choropleth GitHub Animated 3D Choropleth GitHub Pages Next Post This is the last of the three #D3Thursday posts on creating a 3D choropleth using Three.js and D3, but don't fret! Stay posted for additional #D3Thursday content and be sure to reach out with any ideas you have for visualizations or interesting data you think deserve a post!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!   ... View more

#D3Thursday is back again with a new series of articles over the next few weeks. This time we will be looking at how we can use the popular 3D graphics library Three.js to create a 3D choropleth! Last time we started by creating a 2D canvas choropleth using D3, and then using that choropleth to texture a 3D sphere rendered using Three.js. This week we will expand on that example by adding interactive overlays to highlight countries when they are hovered over or clicked on.     Interactive 3D Choropleth To keep things simple we will be using the same sample data (Sample_Data_16.sas7bdat) as last week for this post.   Adding Interactive Overlays The first step to creating our overlays is determining what country the user is hovering over. We accomplish this by using a raycaster to determine where on the sphere our cursor is hovering.   // Render loop function function render() { // Update controls CONTROLS.update(); // Update raycaster with new mouse and camera location RAYCASTER.setFromCamera(MOUSE, CAMERA); // Get intersections from raycaster with choropleth sphere const intersect = RAYCASTER.intersectObjects([CHOROPLETH_SPHERE])[0]; COUNTRY = intersect ? getCountry( SPHERE_GEOMETRY.vertices[intersect.face.a], SPHERE_GEOMETRY.vertices[intersect.face.b], SPHERE_GEOMETRY.vertices[intersect.face.c] ) : null; if (!PRESERVE && COUNTRY && COUNTRY.id != TIP_ID) { setOverlay(); } else if (!PRESERVE && !COUNTRY && TIP_ID) { clearOverlay(); } // Render frame requestAnimationFrame(render); RENDERER.render(SCENE, CAMERA); }   Our raycaster casts a ray from the location of the camera through the current position of the mouse on each frame, and then checks to see if that ray intersects with our choropleth sphere. If the ray intersects our sphere, the raycaster will return the face of our geometry that is being intersected. Then we can determine the country that is associated with the intersected face.   // Get country corresponding to face by iterating over features and finding which feature contains center function getCountry(a, b, c) { // Get center of face const centerXYZ = { x: (a.x + b.x + c.x) / 3, y: (a.y + b.y + c.y) / 3, z: (a.z + b.z + c.z) / 3, }; // Convert to lat/lng const centerLatLng = { lat: Math.asin(centerXYZ.y) * 180 / Math.PI, lng: Math.atan2(-centerXYZ.z, centerXYZ.x) * 180 / Math.PI } // Iterate over all features let feature; for (let i = 0; i < WORLD_JSON.features.length; i++) { feature = WORLD_JSON.features[i]; // Check if center point is in polygon(s) of feature if (feature.geometry.type == "Polygon") { if (pointInPoly(centerLatLng, feature.geometry.coordinates[0])) { return {id: feature.properties.iso_a3, name: feature.properties.name}; } } else { for (let j = 0; j < feature.geometry.coordinates.length; j++) { if (pointInPoly(centerLatLng, feature.geometry.coordinates[j][0])) { return {id: feature.properties.iso_a3, name: feature.properties.name}; } } } } return null; }   We do this by first calculating the center of the face in world coordinates, converting that value to a latitude/longitude value, and then iterating over all the features in our geojson file to see if our center coordinate falls within a country. Here I'm using the even-odd rule to determine if the point in question falls within one of our geojson features. Once we have determined the country being intersected, we can set or clear our overlay if necessary.    // Set overlay values given country corresponding to intersection function setOverlay() { // Set overlay OVERLAY_SPHERE.material.map = getTexture(COUNTRY.id); // Set tooltip values TIP_ID = COUNTRY.id; d3.select(".tooltip-title") .html(COUNTRY.id + " - " + COUNTRY.name); d3.select(".tooltip-value") .html(DATA[COUNTRY.id] ? METADATA.measureFormat(DATA[COUNTRY.id].measure) : "No Data"); } // Clear overlay function clearOverlay() { // Clear overlay OVERLAY_SPHERE.material.map = getTexture("BLANK"); // Clear tooltip values TIP_ID = null; d3.select(".tooltip-title") .html(""); d3.select(".tooltip-value") .html(""); }   There are two aspects to our overlays. First, we have a tooltip statically positioned in the upper left of the scene. Second, we have a second sphere placed over our choropleth sphere that is textured with a transparent background and only the intersected country colored in. The result is a 3D interactive overlay that allows the user to see the data value for any country by either hovering or clicking on the country.     Interactive Overlay Performance Considerations As you can imagine, an interactive 3D data visualization like this one requires more horsepower to run than the 2D data visualizations we've created in past posts. In particular, when designing a 3D data visualization like this one, you need to be careful when balancing the trade off between run time performance, load time, and memory usage. If you try to perform too many actions during the render loop, you may wind up dropping frames resulting in choppy animation. If you try to perform too many actions at initialization, you may wind up with an unpleasantly long wait time. If you store too many objects to ease in computation, you may run out of memory and cause a browser crash. In the case of our interactive overlays, the process of determining the country intersected by the raycaster and creating a 3D overlay can quickly lead to a poorly performing application if not implemented properly.   Load Textures at Run Time  The first and most simple option for creating overlays is to perform all computation at run time, as shown in the snippets above. This means that on every execution of the render loop the program checks the raycaster for intersects, computes the matching country if an intersection occurs, and loads a new texture for a the overlay if necessary. The benefit of this solution is that we are only storing one overlay texture at a time and therefore have a short load time. The problem with this solution is that if multiple countries are hovered on in quick succession, the application can drop frames and become choppy.    Load Textures at Start One way to solve the problems of loading textures at run time is to store all textures that may be needed when the application is first started. Rather than perform the slow task of creating a new texture for each overlay in the render loop, we can instead just access a stored copy of the texture at run time. This eliminates the problem of dropping frames at run time, but comes with it's own problems. Depending on the number of textures to be stored, this process could create an unacceptably long load time. Additionally, depending on the size of the textures to be loaded, the browser may run out of memory and crash when trying to store them all.    Memoization  Memoization provides a happy compromise between the two above solutions. Memoization is the process of caching the results of a function when it is called, and then using that cache to quickly return the result for subsequent function calls with the same arguments. Here's a simple memoization function that I used to optimize this visualization:    let TEXTURE_CACHE = memoize(getTexture); // Cached textures for each country ... // Memoization function function memoize(fn) { const cache = {}; return function() { const args = JSON.stringify(arguments); if (cache[args] === undefined) { const val = fn.apply(null, arguments); cache[args] = val; return val; } else { return cache[args]; } }; } Now, by simply replacing all calls to getTexture with TEXTURE_CACHE we can call our memoized function. The result is that we have a short initial load because textures are only loaded one at a time, we have better performance after the textures have been cached, and we only store the textures that the user needs instead of storing all textures. Additionally, we can even put in place logic to clear the cache of the memoized function if it grows too large.   While memoization is a happy middle ground between two extremes, it's important to note that one of the other solutions may be better for your application. Before creating a 3D visualization like this one, I encourage you to think through some of the following questions.   Do I need dynamic overlay textures? Tooltips or another alternative may be sufficient for your application. What client devices/browsers do I need to run on? Different environments will have different performance/memory limitations. Will load time matter for your application? You may be able to load your application in the background while the user is presented with other material.   Additional Resources Interactive 3D Choropleth GitHub Interactive 3D Choropleth GitHub Pages Next Post For the next and final post in this series we will go one step further and animate our interactive 3D choropleth over time!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!               ... View more

#D3Thursday is back again with a new series of articles over the next few weeks. This time we will be looking at how we can use the popular 3D graphics library Three.js to create a 3D choropleth! This week we will start by creating a 2D canvas choropleth using D3, and then using that choropleth to texture a 3D sphere rendered using Three.js.     Basic 3D Choropleth As with previous posts, I've included sample data (Sample_Data_16.sas7bdat) for this post to help you get started.    Creating a 2D Canvas Choropleth Up until now all of the visualizations we have created using D3.js have been made with SVG graphics. Today we will look at how we can instead use the HTML canvas object to create graphics. Unlike SVG graphics where one DOM object is created for each shape, only the canvas object is created with canvas graphics. Images are then created by drawing shapes (or paths) on to the canvas.   const PROJECTION = d3 .geoEquirectangular() .translate([CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2]) .scale( Math.min(CANVAS_WIDTH / PROJECTION_AR / Math.PI, CANVAS_HEIGHT / Math.PI) ); // D3 geo projection for canvas ... // Return texture created from canvas choropleth function getTexture() { // Append canvas and save reference const canvas = d3 .select("body") .append("canvas") .attr("width", CANVAS_WIDTH) .attr("height", CANVAS_HEIGHT); // Get 2d context of canvas const context = canvas.node().getContext("2d"); // Create geo path generator const path = d3 .geoPath() .projection(PROJECTION) .context(context); // Draw background context.fillStyle = "#555"; context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw features from geojson context.strokeStyle = "#555"; context.lineWidth = 0.25; WORLD_JSON.features.forEach(function(d) { context.fillStyle = DATA[d.properties.iso_a3] ? COLOR_SCALE(DATA[d.properties.iso_a3].measure) : "#CCC"; context.beginPath(); path(d); context.fill(); context.stroke(); }); // Generate texture from canvas const texture = new THREE.Texture(canvas.node()); texture.needsUpdate = true; // Remove canvas canvas.remove(); // Return texture return texture; }   As you can see from the code above, D3 makes it easy to render the paths for any given geography using the numerous projections and the geoPath function. When used together, these functions convert latitude/longitude information from a geo.json file into x/y pixel coordinates and then paint the appropriate paths on to your canvas object. The canvas object created by this function would look like the following if you were to render if by itself.     2D Canvas Choropleth Rendering a 3D Scene Now that we have created a texture from our 2D canvas choropleth using D3, we can move on to creating our 3D scene.    // Init scene SCENE = new THREE.Scene(); // Init camera and set position CAMERA = new THREE.PerspectiveCamera( 45, // field of view (fov) in degrees WIDTH / HEIGHT, // aspect ratio 0.01, // near field distance 1000 // far field distance ); CAMERA.position.set(0, 0, 4); // Init renderer and set size RENDERER = new THREE.WebGLRenderer({ antialias: true, // turn on antialiasing to smooth jaggies (turn off for better performance) canvas: d3.select("canvas").node() // canvas to hold rendered scene }); RENDERER.setSize(WIDTH, HEIGHT); // Init sphere geometry SPHERE_GEOMETRY = new THREE.SphereGeometry( 1, // Radius of sphere SEGMENTS, // Number of horizontal segments used to construct sphere SEGMENTS // Number of vertical segments used to construct sphere ); // Init choropleth sphere and add to scene CHOROPLETH_SPHERE = new THREE.Mesh( SPHERE_GEOMETRY, // geometry for mesh new THREE.MeshBasicMaterial({ map: getTexture() }) // material for mesh ); SCENE.add(CHOROPLETH_SPHERE); // Init camera controls CONTROLS = new THREE.TrackballControls(CAMERA, RENDERER.domElement); // Set legend values updateLegend(); // Start render loop render(); // Render loop function function render() { // Update controls CONTROLS.update(); // Render frame requestAnimationFrame(render); RENDERER.render(SCENE, CAMERA); }   It only takes  a few lines of code to get up and running with your first 3D scene using Three.js! In our simple example, we only have one object. Each object in Three.js consists of two parts: a geometry and a material. For our object, we are using a spherical geometry and a basic mesh material made with our choropleth texture in order to create a 3D globe choropleth.   We chose to keep this scene simple to maximize performance, but we will be adding complexity in the form of mouse events and animations in the coming posts. Three.js is capable of much more complicated scenes than this one and I encourage you to experiment with how you could add to this scene. Fork this example on GitHub and see what you can make!   Additional Resources Basic 3D Choropleth GitHub Basic 3D Choropleth GitHub Pages Next Post Next post we will take a look at how you can add mouse events to a 3D scene using a raycaster and discuss the performance considerations you should think about when doing so.   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!     ... View more

For SAS Global Forum 2019, Elliot Inman, Olivia Wright, and I wrote a paper titled Kustomizing Your SAS Viya Engine Using SAS Studio Custom Tasks and D3.js. In order to visualize the results of a cluster model created in the paper, I created a D3.js circle packing graph.     SGF 2019 Circle Packing     For more information, check out this post where I describe how this chart was created. ... View more

#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 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.   Two weeks ago we described how you can download, modify, and host any #D3Thursday visualizations. Last week we modified our existing sunburst chart to visualize the results of our analytic model. This week we will create an all new circle packing chart to visualize the results of our analytic model.   SGF 2019 Circle PackingLike the last two weeks, the sample data (Sample_Data_15.sas7bdat) for this post is the output of the analytic model that Olivia Wright built using SAS Studio Custom Tasks!   Creating the Pack   Luckily, the matter of creating a circle packing graph from our hierarchy is remarkably easy thanks to the d3.pack() function.   // Pack nested data d3 .pack() .size([PACK_SIZE, PACK_SIZE]) .padding(PACK_PADDING)(ROOT);   This function eliminates the difficult computation surrounding positioning the circles in a circle packing graph. All we have to do is supply the width, height, and padding for our circle packing graph and the d3.pack() function will automatically determine the position and radii for our circles!   Visualizing Distance from Centroid   In a typical circle packing graph the color indicates the depth of a node within the hierarchy. In our case we are going do something a little bit different. We will use a set color for the root and cluster level of the hierarchy, but we will vary the color and opacity at the leaf level.    // Create dist scale to determine opacity from distance DIST_SCALE = d3 .scaleLinear() .domain( d3.extent(DATA, function(d) { return d.distance; }) ) .range([1, 0.2]); ... DATA_CIRCLES.enter() .append("circle") ... .attr("fill", function(d) { if (!d.height) { return GRAD.fill[d.data.cluster] ? GRAD.fill[d.data.cluster] : GRAD.fillScale(d.data.clsuter); } else if (d.height == 1) { return "#FFF"; } else { return "#EEE"; } }) ... .style("opacity", function(d) { return DIST_SCALE(d.data.distance); }) ...   For this custom circle packing graph, we will color leaf level nodes according to which cluster they belong to. Additionally, we will use opacity to show the distance that leaf node is from the centroid for that cluster. In our example distance has been broken down into quintile.   Hierarchical Selections   The final aspect of our custom circle packing graph is the ability to make hierarchical selections.   // Select clicked element and all children elements d3.select(el).each(function(d) { selectChildren(d, true); }); ... // Recursive selection to elements children function selectChildren(node, selectedBool) { // Toggle selection on current node d3.select("#" + node.data.id).classed("selected", selectBool); // Toggle selection on children if present if (node.children) { for (let i = 0; i < node.children.length; i++) { selectChildren(node.children[i], selectBool); } } }   This allows the user to quickly select all leaf nodes in a cluster by clicking on the cluster once.    Additional Resources SGF 2019 Circle Packing GitHub SGF 2019 Circle Packing GitHub Pages Next Post This is the last of the three #D3Thursday posts leading up to SAS Global Forum 2019 but don't fret! Stay posted for additional #D3Thursday content and be sure to reach out with any ideas you have for visualizations or interesting data you think deserve a post!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!   ... View more

#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 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.   Last week we described how you can download, modify, and host any #D3Thursday visualizations I have posted. This week we will look at how we can modify our existing sunburst chart to visualize the results of our analytic model.      SGF 2019 Sunburst Like last week, the sample data (Sample_Data_14.sas7bdat) for this post is the output of the analytic model that Olivia Wright built using SAS Studio Custom Tasks!   A Pseudo-Hierarchy   Before we start modifying the code, we need to take take a moment to discuss how the output of our clustering model differs from the traditional hierarchies we previously visualized with our sunburst. Here's an example of a traditional hierarchy visualized with a simple binary tree.     Traditional Hierarchy In a traditional hierarchy like this one, every node is unique and appears only at one depth of the tree. That is to say that France will never appear twice in the tree and will always be at the third level of this tree because the third level represents country. Our clustering model output, however, looks more like the pseudo-hierarchy shown below.   Pseudo-Hierarchy   Unlike our traditional hierarchy above, we can see duplicate nodes in this tree. Additionally, we can see that multiple parent nodes feed into the same child node (both Cluster 1 and Cluster 2 in level 2 feed into Cluster 1 in level 3). We can rectify this situation by modifying our hierarchy as follows.     Modified Pseudo-Hierarchy   By thinking of Cluster 1 in level 3 of our hierarchy as two different nodes we can begin to picture what our sunburst will actually look like instead of getting lost in the tangle of our pseudo-hierarchy. At our innermost ring, we will have two arcs: Cluster 1 and Cluster 2. At the next ring, we will have four arcs: Cluster 1a and Cluster 3 which are children of Cluster 1 in the innermost ring, and Cluster 1b and Cluster 2 which are children of Cluster 2 in the innermost ring.    Modifying the Sunburst   In order to properly visualize our pseudo-hierarchy we need to perform a few modifications to our existing sunburst chart. The most important changes we need to make are how the arcs are colored and what happens when we click on an arc. Let's start with the color.   DATA_ARCS.enter() ... .attr("fill", function(d) { return GRAD.fill[d.data.key] ? GRAD.fill[d.data.key] : GRAD.fillScale(d.data.key); }) ...   Rather than using progressively lighter shades that we calculate when we nest our data we can simply color our arcs based on their keys, which correspond to which cluster the arc represents. Now we can change what happens when we click on an arc.   // Handle click events on arcs function handleArcClick(arcD) { // Prevent event from falling through to underlying elements or causing scroll d3.event.stopPropagation(); d3.event.preventDefault(); // Remove selected class from all arcs d3.selectAll(".focused").classed("focused", false); // For selected arcs, bring opacity to 1 and move to front d3.selectAll(".data-arc") .filter(function(d) { return d.depth && d.data.key == arcD.data.key && d.depth == arcD.depth; }) .moveToFront() .classed("focused", true) .transition() .duration(HOVER_TRANS_TIME) .style("opacity", 1) .each(function(d) { // Focus all parents of selected arc let node = d.parent; while (node.parent) { d3.select("#" + node.data.id) .moveToFront() .classed("focused", true) .transition() .duration(HOVER_TRANS_TIME) .style("opacity", 1); node = node.parent; } }); // Select all other arcs, bring opacity to unfocus opacity d3.selectAll(".data-arc:not(.focused)") .classed("focused", false) .transition() .duration(HOVER_TRANS_TIME) .style("opacity", UNFOCUS_OPACITY); }   Unlike our original sunburst, we no longer care about what percentage of the total a single arc encompasses. Instead, we are interested in seeing how many times a particular cluster appears in a certain ring, and what the parents of that cluster are. To help the user answer these questions we can modify what happens when an arc is selected. Whenever an arc is clicked, we search that ring and highlight any other appearance of that cluster. Then we can traverse the hierarchy from each highlighted arc and highlight that arc's parents.    Additional Resources SGF 2019 Sunburst GitHub SGF 2019 Sunburst GitHub Pages Next Post Next post we will wrap up this series of posts leading up to SAS Global Forum 2019 by creating an all new chart: a circle packing graph!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!     ... View more

#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_Streamgraph.html   Additional Resources SGF 2019 Streamgraph GitHub SGF 2019 Streamgraph GitHub Pages Atlassian Git Documentation 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!     ... View more

This #D3Thursday we will look at how we can animate a D3.js area graph over time in SAS Visual Analytics (VA).   Animated Area Chart  As with previous posts I've included sample data (Sample_Data_12.sas7bdat) for this post to help you get started. This data set is significantly larger than any we have use before, so you will have to override VA's system data limit in order to send all 50,000+ rows to our graph. System Data Limit Handling the Data   The first step in creating our animation is getting our data into the right shape. // Extract data sets from 2d array format into associative array format DATA_SETS = []; let dateDatum, binDatum, binTotal; let i = 0; let length = VA_MESSAGE.data.length; while (i < length) { dateDatum = { date: VA_MESSAGE.data[i][0], entries: [] }; while (i < length && _.isEqual(dateDatum.date, VA_MESSAGE.data[i][0])) { binTotal = 0; binDatum = { bin: VA_MESSAGE.data[i][1] }; while (i < length && binDatum.bin == VA_MESSAGE.data[i][1]) { binDatum[VA_MESSAGE.data[i][2]] = VA_MESSAGE.data[i][3]; binTotal += VA_MESSAGE.data[i][3]; i++; } Y_MAXIMUM = Math.max(Y_MAXIMUM, binTotal); dateDatum.entries.push(binDatum); } DATA_SETS.push(dateDatum); } // Sort by earliest date and lowest bin DATA_SETS.sort(function(a, b) { return Date.parse(a.date) - Date.parse(b.date); }); for (let i = 0; i < DATA_SETS.length; i++) { DATA_SETS[i].entries.sort(function(a, b) { return a.bin - b.bin; }); } ... // Create data stack STACKED_DATA = STACK(DATA_SETS[DATA_INDEX].entries); There are two key things that are different here from previous weeks. First, we no longer have a single data set. Instead, we have an array of data sets (one for each date/time). Secondly, we must sort our data sets by date and bin in order to render our areas correctly.   Adding the Input Controls Now that we have our data in the right shape, we can create the input controls we will need to control our animations. <div class="input-container"> <div id="row1" class="row"> <span id="play-button"> <i class="fas fa-play-circle"></i> </span> <p id="min-date"> </p> <input id="date-slider" class="slider" type="range" min="0" max="100" value="0" step="1"> <p id="max-date"> </p> </div> </div> You have a lot of options here for what inputs you want to create, and even more options for how to style them. I decided to use FontAwesome icons to create the play button since the library is lightweight and easy to work with. You could also use a custom icon stored on your server for this, or create it with SVG graphics.   I also decided to use a standard HTML slider input and two paragraph tags for the date control. Again, I did this for simplicity, but you could instead use a jQuery or D3.js plug-in slider.   Also notice that I hard coded these HTML elements. For maximum portability, you would want your D3.js code to create these elements on your page, but this is simpler and works for our example.    Binding Control Functions Now that we have our input controls on the page, we can bind the functionality we want to each element. // Animate when play button clicked d3.select("#play-button").on("click", function() { // Toggle playing boolean PLAYING = !PLAYING; // Update play button d3.select("#play-button i") .classed("fa-pause-circle", PLAYING ? true : false) .classed("fa-play-circle", PLAYING ? false : true); // Animate when played if (PLAYING) { // Reset slider if we are at end of data sets if (DATA_INDEX == DATA_SETS.length - 1) { d3.select("#date-slider").node().value = 0; } animateElements(); } }); // Redraw when date slider moved d3.select("#date-slider").on("input", function() { // Update data index and data set, stop playing DATA_INDEX = parseInt(this.value); STACKED_DATA = STACK(DATA_SETS[DATA_INDEX].entries); PLAYING = false; // Update progress bar on slider d3.select(this) .attr("value", this.value) .style("background-image", function() { const middle = (parseInt(this.value) - parseInt(this.min)) / (parseInt(this.max) - parseInt(this.min)); return ( "-webkit-gradient(linear, left top, right top, " + "color-stop(" + middle + ", #777777), " + "color-stop(" + middle + ", #d3d3d3)" + ")" ); }); // Change play button to pause d3.select("#play-button i") .classed("fa-pause-circle", false) .classed("fa-play-circle", true); // Redraw selected data set drawElements(); });   Animating Finally, we can get around to the business of writing the animateElements function. We could have simply used our existing updateElements function to handle the animation, but I prefer to keep it separate for simplicity. The updateElements function has to handle changes to many elements (the scales, axes, legend, etc.) that won't change while animating over time. Instead of reusing our complicated update function, I've elected to create a more compact animateElements function. // Redraw elements changed over time function animateElements() { // Iterate to next dataset DATA_INDEX = DATA_INDEX >= DATA_SETS.length - 1 ? 0 : DATA_INDEX + 1; STACKED_DATA = STACK(DATA_SETS[DATA_INDEX].entries); // Update date slider d3.select("#date-slider") .style("background-image", function() { const middle = (parseInt(this.value) + parseInt(this.step) - parseInt(this.min)) / (parseInt(this.max) - parseInt(this.min)); return ( "-webkit-gradient(linear, left top, right top, " + "color-stop(" + middle + ", #777777), " + "color-stop(" + middle + ", #d3d3d3)" + ")" ); }) .node() .stepUp(); // Update date texts DATE_TEXT = SVG.selectAll(".date-text").data([DATA_SETS[DATA_INDEX].date]); DATE_TEXT.text(function(d) { return DATE_FORMAT(d); }); // Update data paths DATA_PATHS = G_CHART_AREA.selectAll(".data-path").data( STACKED_DATA, function(d) { return d.key; } ); DATA_PATHS.transition() .duration(ANIMATION_TRANS_TIME) .attr("d", AREA); // If playing and not at end of data sets, set timer to animate again if (PLAYING && DATA_INDEX < DATA_SETS.length - 1) { setTimeout(animateElements, ANIMATION_TRANS_TIME); } // Otherwise, pause else if (DATA_INDEX == DATA_SETS.length - 1) { PLAYING = false; d3.select("#play-button i") .classed("fa-pause-circle", false) .classed("fa-play-circle", true); } } The one thing worth noting here is that we aren't actually doing any interpolating on the date text element. Since our data set spans such a large range of dates, interpolating across all date values becomes dizzying. If, however, you were animating over a smaller number of dates that were close together you may want to interpolate the text to smooth out the animation.   Controlling Animation Speed As a bonus, we will add another input slider to allow the user to control the speed of the animation. <div class="input-container"> ... <div id="row2" class="row"> <p id="slow-text">Slow</p> <input id="speed-slider" class="slider" type="range" min="20" max="500" value="100"> <p id="fast-text">Fast</p> </div> </div> ... // Update animation time when speed slider moved d3.select("#speed-slider").on("input", function() { ANIMATION_TRANS_TIME = parseInt(this.value); }); Giving the user the ability to control the animation speed is a great idea since we don't know how many dates we will be animating over or what length of time is between them. Here the user can select any animation duration between 20 and 500 milliseconds, which should be sufficient for most situations.    Additional Resources Animated Area GitHub Animated Area GitHub Pages The Future of #D3Thursday Unfortunately, this post marks the end of the 12 planned #D3Thursday posts. Don't fret though, as I'm not going anywhere and will be continuing to work on awesome third-party visualizations to use in VA. Stay posted for additional #D3Thursday content and be sure to reach out with any ideas you have visualizations or interesting data you think deserve a post!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!     ... View more

This #D3Thursday we will create a D3.js streamgraph with brush and zoom events!   Streamgraph   To save some time, I will only be going over how to add the brush and zoom events in this post, rather than discussing how to create a streamgraph. Creating a streamgraph is fairly straightforward and takes advantage of a built-in D3.js path builder much like our donut and sunburst charts from earlier weeks. If you have any questions about that process, feel free to check out the source code and send me any questions you have!     As with previous posts I've included sample data (Sample_Data_11.sas7bdat) for this post to help you get started. While the sample data set isn't ideal for the streamgraph (typically streamgraphs are used to represent data in which one category dominates the y metric at a time before receding), it gives you a starting place to play around with the brush and zoom events! For more information on when and how to use streamgraphs, see the article linked at the bottom of this post!   Brush and Zoom Events   Using brush and zoom events in combination, we can allow the user to easily zoom in on or select any part of our streamgraph for examination. Luckily, D3.js has built-in tools that make it easy to provide this functionality on any graph!   Our Graph Layout Let's start by looking at the layout of our graph to supply some context for the following code snippets: <svg> <defs> <!-- gradients --> </defs> <g class="g-legend" ...> <!-- legend elements --> </g> <text class="x-label" ...></text> <text class="y-label" ...></text> <g class="x-axis" ...> <!-- Primary x axis elements --> </g> <g class="x-axis-context" ...> <!-- Context x axis elements --> </g> <g class="y-axis" ...> <!-- Y axis elements --> </g> <g class="g-chart-area" ...> <!-- Primary chart data path elements --> </g> <g class="g-context-area" ...> <!-- Context chart data path elements --> </g> </svg> The key thing to notice here is that we now essentially have two charts, the primary chart and the context chart. The context chart will remain the same while the primary chart is zoomed in on or brushed across. This way the user never forgets what he has selected and can examine a section of the chart without losing the big picture.   The Brush and Zoom Objects In order to implement the brush and zoom functionality, we will start by creating the brush and zoom objects: // Create brush for context graph BRUSH = d3 .brushX() .extent([[0, 0], [CHART_WIDTH, CONTEXT_HEIGHT]]) .on("brush end", brushed); // Create zoom for primary graph ZOOM = d3 .zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [CHART_WIDTH, CHART_HEIGHT]]) .extent([[0, 0], [CHART_WIDTH, CHART_HEIGHT]]) .on("zoom", zoomed); These objects define the areas in which the user can brush or zoom, as well as handle the job of turning mouse events like clicks, drags, and scrolls, into brush and zoom events. The brush part refers to the users ability to drag and move a selection on the context graph at the bottom, while the zoom part refers to the users ability to zoom in on or drag across the main graph at the top.   Applying the Objects These objects, just like D3.js axes, must be bound to an object in order to function.  // Create zoom rect ZOOM_RECT = G_CLIP.selectAll(".zoom").data([DATA]); ZOOM_RECT.enter() .append("rect") .classed("zoom", true) .merge(ZOOM_RECT) .attr( "transform", "translate(" + (Y_AXIS_WIDTH + Y_AXIS_PAD) + "," + (Y_LABEL_HEIGHT + VERT_PAD) + ")" ) .attr("width", CHART_WIDTH) .attr("height", CHART_HEIGHT) .call(ZOOM); // Create brush group BRUSH_GROUP = G_CONTEXT_AREA.selectAll("g").data([DATA]); BRUSH_GROUP.enter() .append("g") .classed("brush", true) .merge(BRUSH_GROUP) .call(BRUSH) .call(BRUSH.move, X_SCALE.range()); The zoom object is attached to a rect element that is the same dimensions as our primary chart, while the brush object is attached to a group element that is attached to our context area group. This is because the brush event requires multiple objects to track all the interactions the user has with the brush. It requires a background rect for users to make selections on, a selection rect that can be moved across the background rect, and a rect for the east and west side of the selection so the selection can be expanded from either side.   Handling the Events Now that our objects are applied to the correct elements, all that's left is to handle the events issued by the brush and zoom objects. function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom var s = d3.event.selection || X_SCALE_CONTEXT.range(); // use entire range if selection is null // Update x scale domain of main chart scale of context chart X_SCALE.domain(s.map(X_SCALE_CONTEXT.invert, X_SCALE_CONTEXT)); // Update x axis of main chart using updated scale SVG.select(".x-axis").call(d3.axisBottom(X_SCALE).tickSizeOuter(0)); // Update paths of main chart using updated scale G_CHART_AREA.selectAll("path").attr("d", AREA); // Update zoom to point to same location as brush G_CLIP.select(".zoom").call( ZOOM.transform, d3.zoomIdentity.scale(CHART_WIDTH / (s[1] - s[0])).translate(-s[0], 0) ); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush var t = d3.event.transform; // Update x scale domain of main chart using scale of context chart X_SCALE.domain(t.rescaleX(X_SCALE_CONTEXT).domain()); // Update x axis of main chart using updated scale SVG.select(".x-axis").call(d3.axisBottom(X_SCALE).tickSizeOuter(0)); // Update paths of main chart using updated scale G_CHART_AREA.selectAll("path").attr("d", AREA); // Update brush to point to same location as zoom G_CONTEXT_AREA.select(".brush").call( BRUSH.move, X_SCALE.range().map(t.invertX, t) ); } Notice that these two functions follow the same set of steps: Ignore events spawned by the other function Grab selection or transform from event Update x scale domain using selection or transform Update x axis using updated scale Update paths using updated scale Update object associated with other function to be consistent with current object The important part to notice is the first and last step here. The brush and zoom interactions are inherently intertwined, so zooming in requires moving the brush, and vice versa. Then we must also include code to ignore events spawned by the other function, or else we would have an infinite recursion problem.   Clipping With the callback functions implemented, our chart is interacting properly except for one issue:   Streamgraph Clipping Issue  We must clip our paths when they are outside of our chart area! In order to do this we need to perform a slight modification to the layout of our chart.   <svg> <defs> <!-- gradients --> <clipPath id="clip"> <rect class="clip-path-rect" ...> </rect> </clipPath> </defs> <g class="g-legend" ...> <!-- legend elements --> </g> <text class="x-label" ...></text> <text class="y-label" ...></text> <g class="x-axis" ...> <!-- Primary x axis elements --> </g> <g class="x-axis-context" ...> <!-- Context x axis elements --> </g> <g class="y-axis" ...> <!-- Y axis elements --> </g> <g class="g-clip" clip-path="url(#clip)"> <g class="g-chart-area" ...> <!-- Primary chart data path elements --> </g> <rect class="zoom" ...></rect> </g> <g class="g-context-area" ...> <!-- Context chart data path elements and brush elements--> </g> </svg> There are a few key changes made here that allow us to clip our paths properly:  A clipPath element with id="clip" is appended to our defs A rect with the x, y, width, and height of our chart area is appended to our clipPath Our chart area group is nested within a group with the attribute clip-path="url(#clip)" Note that we must apply the clipPath to an absolutely positioned element, which is why we created the new g-clip group. If the clipPath is applied to the transformed g-chart-area group then the clipPath will inherit the transform from said group and no longer position as expected.    Additional Resources Streamgraph GitHub Streamgraph GitHub Pages Stacked Graphs – Geometry & Aesthetics by Lee Byron & Martin Wattenberg Next Post Next post we will look at how we can animate an area chart over time!   Remember to follow these articles on the SAS Communities Library and the #D3Thursday Twitter hashtag. Comment below or Tweet your questions and comments!     ... View more