Complex Infographics with d3.js in Repods — Part I
Preparing the Infographics Structure
Author: Justina Dešriūtė, Full-Stack Developer @Record Evolution GmbH
In what follows and in Part II of this article, we demonstrate how to create a complex infographic by adding interactivity in the Repods platform. The full code for this infographic can be found under this gist file link.
Our article on data visualization has already provided a quick overview of how to create a simple infographic containing bar charts. This time, our goal is to create a more complex infographic, demonstrating how to add interactivity to your data visualization.
If you are new to the Repods platform — check out our tutorial series on how to get started. You can create your first data pod to proceed with your data upload, analysis, and representation:
Starting a Data Model with Repods;
If you are aiming to create a custom infographic — you can first check out our article on how to start with data visualization and d3.js using Repods and then continue to Data Visualization with Repods.
Table of Contents
- Why interactivity?
- Main Concepts of an Interactive Infographic
- Hands-on — Step by Step into the Dynamic Infographic
- Coding Inside an Infographic
- - Getting the Data
- - Modifying CSS
- - Preparing the SVG Panel
- - Structure of the Infographic
Why Interactivity?
First of all, it is important to understand why interactivity is needed in an infographic. The answer is simple — you need interactivity to modify your visualization so that it would render another view of the data to present more or different information when in contact with the user. Usually, the presented data is multi-dimensional and the structure of the visualization can be applied to different parts of the dataset. The excessive use of interactivity may lead to a lagging presentation, freezing, or may cause extra clutter on the screen. However, if you know that your visualization will benefit from adding interactivity, choosing the right tool is essential. The combination of Repods and d3.js provides one such tool.
Interactivity showcases the strengths of d3.js as opposed to charting libraries. Charting libraries usually offer mostly static templates (or dynamic ones with no customization options) that cannot be modified. For this reason, users should not be discouraged by the initial effort one has to invest to understand how d3.js works. With just a couple of extra functions, you can transform your existing pie chart into a donut chart. On top of that — you can add several lines of code for the interactivity to get a dynamic display of your data. Maintaining flexibility and providing users with the maximum amount of freedom to create whatever data visualizations they seek has always been the goal of d3.js. The Repods platform supports this effort.
The same applies to static infographics, whereby the type of interactive infographics immensely depends on your dataset. For example, scatterplots need to have more than one piece of data associated with them. Also, for a scatterplot, the data must be numerical. So before getting into the potential intricacies of dynamic visualizations, one may want to evaluate the goals clearly and select the most appropriate pattern to follow.
Main Concepts of an Interactive Infographic
Before we start creating our infographic, let’s sketch out some of the main concepts to be used in this article. These can be viewed as the core of d3.js interactivity.
To achieve interactivity, we will use the function .on(), which is a wrapper for traditional HTML mouse events (meaning — the function accepts “click”, “mouseover”, “mouseout”, etc.). Using this function on a d3 selection, you can apply mouse event listeners to all members of the selection in a single step and pass the underlying data of the member to your event listener. This is also the approach with the d3 .attr() and .style() methods.
The second main category is transitions. Transitions help you control the visual animation of a selection’s graphical members. These are defined for a selection, can be set to occur after a certain delay using the delay() function, or set to occur over a given period of time using duration(). Delays can be useful for drawing attention to the change of the animation (generally — information presented on the screen).
Another thing to keep in mind during the creation of an interactive infographic is that the drawing order of elements is determined by their DOM order because SVG has no Z-level. The drawing order is important — we don’t want the graphical objects with which users are interacting to look like they’re behind the objects that users are not interacting with.
Even though it might appear trivial — colors matter. Visualization can fail if a color scheme is too intense or too bleak. When it comes to creating more complex infographics with d3, color ramps become an important category. Selecting and defining appropriate color schemes is essential because it can reveal the intricacy of the data and simultaneously simplify the complexity by providing users with more clarification on the message that is being sent via the infographic. For more detailed advice, you can take a look at this article by d3.js guru Elijah Meeks.
Hands-on — Step by Step towards Dynamic Infographics
For our infographic, we will be using the FIFA dataset available from kaggle. The dataset has already been prepared in the Repods platform and can be downloaded here: https://gist.github.com/justinadesriuteRE/c4d18fd145af3b9200fac4d1a1caa00d. What we have looks like this:
The dataset contains information about 32 countries and their stats in FIFA rankings (last updated June 7, 2018). We will not be using all of the entries in our infographic but only the information about the top nine countries. After the dataset is uploaded into the platform and the data is piped into the Core Table, we create a report and select the data entries that will be used in our visualization.
Once we have opened the Analysis panel, the next step would be to create a new report. Click on the Add Report button. Inside the freshly created report, we can start the data selection and do some report customization (e.g. change its name).
Let’s name our Core Table NEW_FIFA — this is the source from which we will be selecting the attributes to be added to our dataset. In this example, the goal is to create an interactive infographic that would display the nine teams ranked as the top FIFA teams and also display the winner of the World Cup 2018. In accordance with this goal, we will select the appropriate attributes to be placed into the dataset.
As you can see from the image above, Current FIFA rank, Group, Previous finals, Previous semifinals, Previous titles and Team attributes are selected to be added as showing Detail over time period. Selecting certain attributes at this point does not hinder you from adding new ones or removing existing ones from your dataset later on. One of the convenient features of the Repods platform is real-time updating. If your report is modified, the dataset and the infographics will also be modified accordingly to comply with the latest version of the information in use (after the end of World Cup 2018, FIFA will update the rankings on July 19, so we will be able to adjust our infographics accordingly).
Next, within the Analysis panel, click on Add Infograph to generate a new demo infographic. Basically, all the demo information within the generated infographic can be deleted and you can build your custom infographic code from scratch:
Coding Inside an Infographic
As discussed in our introductory article, an infographic is created by writing the code in the four panels inside the infographic. Let’s start with the last panel, Data, which will be modified only in the beginning.
Getting the Data
First, we have to select the dataset to be used in our visualization. Inside the panel, we have the option to select Add Data. After clicking the button, you are presented with the list of reports and workbook cards that can be used. Here you can select one or more resources by checking the checkboxes. All the items that you have marked will appear in the custom data dropdown where you will select the exact dataset to use in the infographic.
For the purposes of this article, we have created the Report “Fifa_data”, which can be selected from the list inside the Custom Data dropdown. Once the item is selected, Repods generates a variable called “REP_Fifa_data” that contains two arrays: “names” and “data”. The “names” array contains a list of JavaScript objects containing information about the columns of our dataset (name, datatype, ordinal position). In the infographic, we will be using the information from the second array. When we use the information from the Report (or a Workbook Card), it cannot be modified directly in the Data panel. However, if the Report or Workbook Card is updated, the content of the Data panel will change accordingly without any additional actions. In this way, the infographic presents only the most up-to-date information.
Modifying CSS
The CSS panel is straightforward — you can write whatever CSS rule sets you consider important in styling your infographics. In our case, CSS declarations are minimal — we are mostly defining font-size, font family, and color. There are no significant restrictions in Repods, except for margin, height, width and overflow properties of HTML, body, and SVG tags which are always overwritten by the platform. So feel free to style your infographics.
The code for CSS of our infographic can be found on this gist file here.
Preparing the SVG Panel
The next step is to prepare the SVG panel. Here we will place the elements of our infographic as the static components to be transformed into the dynamic elements that add interactivity with d3 functions.
The code for this part can be found at: https://gist.github.com/justinadesriuteRE/89800bc237c97648ec47b16e0d537963.
Structure of the Infographic
Our infographic can be divided into four parts: Main Title, Line of Balls — team representation, Table of Statistics, and the Winner Trophy.
The Main Title and the text “The Winner” above the trophy icon are just simple text tags that are rendered on the canvas as soon as the code is written. They have no relation to d3.
In the Line of Balls and the Winner Trophy parts, we want to use two vector images in an SVG (Scalable Vector Graphics) format. Since SVG is nothing more than just a bunch of lines of code, we can paste the code directly into the SVG panel. Remember, if an SVG is not your own creation, carefully choose the source and respect the rules of licensing, if necessary. Do not forget to reference the author. For our infographic, free icons from https://www.iconfinder.com/ have been used.
What is great about an SVG image is not only that it does not decrease in quality when its size is modified but also that it allows you to customize as much as you need. Changing the fill property of an SVG path you can, for example, easily change the colors of an image.
Our infographic needs two images — a football ball and a trophy. The code for both icons is pasted into the SVG panel, all the paths are wrapped inside a <g> tag, and the icons are already rendered on the canvas:
However, we want to change the icons’ positioning on the screen (paths are drawn starting from the top left corner if the position is not specified) so we need to translate the <g> element to position it on the screen in the preferred spot.
The ball icon will be dynamically added with d3. In addition, IDs (“ball” and “winnertoken”) are given to both images respectively. Having a CSS selector on them is important for interactivity inside the D3 panel.
The balls that represent teams and the text underneath will be discussed in Part II of this article because this group of elements is created dynamically.
Finally, the last part to be discussed in the SVG panel is the table element. For this, we use an HTML table as it comes with a built-in layout. To use an HTML tag inside an SVG element, we need to wrap the HTML tag into a foreignObject tag.
This element also has an interaction (information about the teams is shown on the click of a particular ball) attached to it, which will be explained in the next article in the d3 section. All we need to know now is that HTML for the table is placed inside the <foreignObject> tag, specifying x, y, width, and height attributes.
At this point, we have prepared the structure of our infographic. The last part is adding interactivity. We discuss this in Part II of this article in our tutorial series Data Science with Repods on Medium.
