top fifa teams complex inforgraphics with repods

Complex Infographics with d3.js in Repods — Part I

Preparing the Structure of the Infographic:

In this and the following article, we are going to demonstrate how to create complex infographics by adding interactivity in the Repods platform. Full code to follow along 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 more complex infographics, 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:

How to Model Data on the Repods Platform?

FIFA World Cup Statistics: A Data Science Perspective — Part I

If you are aiming to create custom complex infographic s— you can first check out our article on how to start with data visualization and d3.js using Repods and then continue to Data Visualisation with Repods.

Complex Infographics: Why Interactivity?

First of all, it is important to understand why interactivity is needed in complex infographics. 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 vs. Charting Libraries

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.

Interactivity vs. Static Infographics

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 in complex infographics, one may want to evaluate the goals clearly and select the most appropriate pattern to follow.

representation of a static infographic

https://bl.ocks.org/mbostock/3887118

Complex Infographics: Main Concepts of an Interactive Infographic

Before we start creating complex infographics, 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.

Transitions

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

Drawing Order

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.

Choice of Colors

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 into the Dynamic Infographic

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.

Preparing the Dataset

What we have looks like this:

image of the dataset fifa winners

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.

Creating a New Report

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

report in repods
Report Card within the Analysis Panel in Repods

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 below, 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).

overview of report attributes in repods

Generating a New Infographic

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. You can build your custom infographic code from scratch:

infographics card in repods
infographics editor in repods

Complex Infographics: Coding inside an Infographic

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

importing custom data screenshot
adding reports

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. Here 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 towards complex infographics 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. You can find the code for this part here.

Complex Infographics: 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. These 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.

Adding Images

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 tag, and the icons are already rendered on the canvas:

adding images to the interactive infographic

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 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. The text underneath will be discussed in Part II of this article because this group of elements is created dynamically.

Table Element

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.

code snippet for table elements

This element also has an interaction attached to it – team information is displayed on the click of a particular ball. We will explain this in our next article on complex infographics with d3. 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.


Subscribe to our blog!
Stay up to date with the latest data science and IoT tips and news.