Interactive Dorling Cartogram with Scatter Plot: D3.js Info Visualization Part 2
We call it Scartogram !!!
Written by Shivika K Bisen, Yashaswini Joshi and Vanya Procopovich
D3.js is a JavaScript library for producing dynamic data visualizations on the website. It makes use of Scalable Vector Graphics(SVG), HTML, and CSS. This article is about creating interactive scartogram charts with D3.js. We used the v5 version of D3.js. Scartograms are an excellent way to visualize correlated data.
Here we will learn through an example of the USA obesity story. In our visualization, we tried to create a visualization structure similar to Martini’s glass style. We have tried to visualize US obesity through different visualization techniques like Dorling cartogram, Scatter plot, etc. This article deals with the Dorling Cartogram with the Scatter Plot part of the visualization.
Dataset
We used the data from the Center for Disease Control and Prevention’s (CDC) Division of Nutrition, Physical Activity, and Obesity. The dataset includes data from the Behavioral Risk Factor Surveillance System for each US state. For this visualization we considered the following variables: Break out, Break out the category, Locationabbr, Locationdesc, Year, and Average Data value. There are 9632 data instances. The obese population is defined as one with BMI > 30.
In the above animation when we click on the states, we get interactive line charts for each breakout category (Age group, race/ Ethnicity, Education attained, Gender, Household income). Breakout categories are:
- Age Group: 18–24 yr, 25 -34 yr, 35–44 yr, 45–54 yr, 55–64 yr, 65 and above
- Race/Ethnicity: American Indian, Asian, Black, Hispanic, Multiracial, Other, White
- Household Income: College graduate, H.S or G.E.D, Less than H.S, Some post-H.S
- Education attained: Less than $15K, $15K-$24K, $25K-$34K ,$35K-$49K, $50K and more
- Gender: Female, Male
Step 1: Defining dimensions for the base map and time slider:
For Dorling Cartogram we are using d3.geoPath, to create the path from GIS coordinates. In the below code we are declaring dimensions to create the base map. We are creating the base for Time slider visuals with min year as 1995 and max year as 2016.The year_selector is a function that helps us select a year from the array. The colorScale is used to give right color to the Scartogram bubbles.
Step 2: Loading data
In the below code we are loading the JSON data to variable combined_data, as we are using the same JSON data for both Dorling Cartogram and Scatter Plot. To load the JSON data we are using async and await . TopoJson’s mesh method collapses all shared internal boundaries into a single compound path.
Step 3: Creating a Map for Dorling Cartogram
Basic Map:
Start off by creating a basic base map showing boundaries for the nation and states, rendered from TopoJSON layers. This will provide a starting point to see how the process unfolds. The function creteBaseMap creates, appends, and returns the base outline map of the US.
Calculating state centroids and converting obesity % to a radius:
In the below code we have used d3-geo’s geoPath().centroid() method through which we can get the planar x, y coordinates for the location of each state’s center, commonly referred to as a “centroid” in geospatial analysis. The below code also has a scale for converting obesity % to a radius. We can notice the overlap between the rendering of each state bubble positioned using its centroid coordinates which will be addressed in the next step.
Applying collision detection:
In the below code we have used d3.forceSimulation, to create a Dorling Cartogram where the bubble for each state position is adjusted using collision detection to prevent overlap. This results in some shift from the bubble’s original centroid position but does a fairly good job at keeping adjacency between states.
Step 4 Adding to labels to Scartogram(bubbles):
In the below code we added the state abbreviation and obesity percentage to the bubbles of scartogram.
Step 5: Time slider for animation
In the below code we have set MIN_YEAR(1995) to currentValue and MAX_YEAR (2016) to targetValue . Function step() calls the updateYear() and playButton() . updateYear()function updates the year when the user clicks on the play button. On click of playButton using setInterval functionfor every 1000 milliseconds, the time slider handle moves to next year. The visualization gets updated according to the time slider handle for the scartogram.
Step 6: Transition from Cartogram to Scatter Plot
Updating the scales, axes for the Scatter Plot:
In the below code we have added the x and y scales for the scatter plot. Also, we have added different attributes to x and y axes. We build the axes starting with the x-axis. The most important part of building the axes is determining how to scale the real data points (from your dataset) to pixels on the screen. Obviously, if the data points range from 0 to 100,000, we cannot simply plot points from 0 pixels to 100,000 pixels. So first, we build a scale. In this case, a linear scale, d3.scaleLinear() , takes in the min and max values of our dataset, .domain(xExtent) , and maps them to pixel values on the screen, .range([0, width]) . d3.axisBottom simply notes that we want the tick marks to be underneath the axis line. Moving g to the right spot to ensure that it is in the “traditional” x-axis location. If we left out the transform, translate code, d3 would add the axis in the default position that it adds every element, i.e. the top-left corner of the canvas. The same process is followed for the y-axis, but for y-axis we have d3.axisLeft .
The addLabeladds labels to the scatter plot. We have also added the text annotation for different scatter plots called Interesting insights to show the correlation between obesity and different factors such as poverty, age, income, etc.
For each correlation visualization we have different ids, we passed this id while displaying the visualization so that the relevant insight is displayed above the visualization.
d3.select('#chart-description').text(chartsInfo[id])
The transition:
The below code explains the hiding of state outline for the scatter plot and transitioning of bubbles to the correct x and y coordinates. We have added different attributes such as delay() , duration()for smooth transition from cartogram to scatter plot.
Step 7: Transition back to Cartogram from Scatter Plot
Step 8: Creating a function for drawing scartogram
Step 9: Line charts
In the below code redrawLineChart() function draws the line chart to show how different factors are correlated with obesity for a particular state clicked by the user. The complete code for Interactive Line Chart D3.js v5.
D3.js interactive charts are fun. You can check the whole code for scartogram chart here: https://github.com/sbisen/d3-obesity-usa/tree/master/d3-playground/modules/line-chart.
The whole project can be found in https://github.com/sbisen/d3-obesity-usa
Part 2: Interactive Line Chart D3.js v5
