Data Visualization with Repods
Create Your First Custom Infographic
Author: Justina Dešriūtė, Full-Stack Developer @Record Evolution GmbH
In this article, we are going to demonstrate how to create custom infographics in the Repods platform. Bear with us until the end and you will be able to create bar charts that look like this:
In our previous articles in the Repods tutorial series Data Science with Repods, we have shown you how to start using the platform. With the Repods cloud service, you can create Data Pods, import your data, collect real-time data, create core tables, set relations between tables, or create reports and workbooks. Feel free to refresh your knowledge or create your first Data Pod here:
https://medium.com/data-science-with-repods/starting-a-data-model-with-repods-4be3c2030eff
The Repods platform allows you to create data visualizations using the JavaScript library D3.js (latest version 5.4.0) directly inside the platform. The data-driven documents library d3.js created by Mike Bostock enables users to generate powerful interactive data visualizations using existing web technologies. If you have not worked with d3.js before, follow these links for a better overview: https://d3js.org/, https://www.tutorialspoint.com/d3js/index.htm.
Once you have created your Data Pod in Repods, enter the Pod and go to the Analysis panel. An environment containing reports, workbooks, and infographics will be displayed as follows:
If you have created your Data Pod with the initial set of demo data, you already have an idea of how an infographic created using d3.js looks like. Besides, you can take a look at Mike Bostock’s (and many other users’) examples online at https://bl.ocks.org/mbostock. If your Data Pod contains no demo data, we are here to walk you through the first and the following steps.
An important thing to keep in mind from the very beginning is the compatibility of your dataset and the selected idea for an infographic. Some visualizations might appear quite impressive:
However, they might not necessarily fit your dataset structure or purpose and may cause problems in writing fitting d3.js code in the very first steps. Our first word of advice — start with a clear idea of the infographic that you want to create.
Let’s start. First, click on the button Add Infograph. This action will generate a template for our first/new infographic. You will be navigated to the infographics editor panel inside the new infographic where all the coding happens:
To create a custom infographic with d3.js, you need two main ingredients:
- The data that is going to be the basis for your visualization;
- JavaScript, SVG, CSS code that renders the graphics based on your data.
The panel in the infographics section is split into two main views — code panel on the left and the results panel on the right.
The inner navigation in the code panel is divided into four parts: SVG, JavaScript, CSS, and Data. The code for the new infographic will be written in the first three tabs; the data for the infographic will be selected and modified in the fourth tab.
The Data Panel is where you prepare and modify the data set which will be used to create the infographic. The simplest approach to get the dataset needed for the infographic is to copy and paste some data directly into the Custom Data panel. Data has to be presented as an array, usually consisting of JavaScript objects.
Another option is to use the data already prepared on the platform. Just click on the grey button Add Data in the Data Panel and choose from the list of already created Reports and Workbook Cards. The data from the Reports or Workbook Cards is automatically transformed into JavaScript objects for further processing in the other code tabs.
If you select one or more of the Reports or Workbook Cards, the selection will appear in the Custom Data dropdown. A sample of the selected data will appear in the code panel for your review and editing.
If you use an existing Report or Workbook Card, note that the infographic will always be kept updated (or even deleted) by Repods if the data in the Report or Workbook itself is refreshed.
Finally, going to our hands-on example, the workflow of creating an infographic can be divided into four steps, representing each Code Panel tab:
- Data Selection
For our example, the following dataset (an array consisting of 4 objects) is copied into the Custom Data panel:
In the d3.js syntax, you would usually use just the keyword “data” to define your dataset. Since this can get a little confusing later on, it is advisable to use another term (in the examples in the Repods platform, the terms cdat or mydata are mostly used). In this example, a very simple array of objects is used to create a dataset.
2. Styling
Second (optional but recommended for more customization possibilities) step is to place some styling in the CSS tab. An example is displayed below:
Here regular CSS rule sets are used to style the SVG content. What is important regarding CSS is that some rule sets of html, body, and svg tags will be overwritten by the platform so it does not make sense to modify them manually: margin, height, width, and overflow. All the other rule sets can be defined as usual (creating classes, giving IDs to parts of the infographic or styling element tags, e. g. <p>, <header>). Besides, d3.js provides the option to style the elements not through CSS definitions but through set attributes of style with JavaScript:
3. Creating SVG Elements
The SVG tab is used to create or import custom SVG code into the view. All visual elements must be created inside the SVG element provided by Repods. Even text blocks have to be rendered into the SVG element (see below). This requirement is set because, in this way, you can smoothly scale the whole infographic without running the risk of the browser distorting your defined view. Event font sizes in text paragraphs or buttons are scaled proportionally alongside the scaling of the other SVG shapes (the assumed “original” width of the SVG panel is always 1000px).
You can use HTML elements within the SVG using the <foreignObject> tag. In this way, you can, for example, place a text paragraph that gives a short explanation of what is displayed in the infographic. What is more, all the tags and attributes related to the SVG element can be used in this panel (https://developer.mozilla.org/en-US/docs/Web/SVG/Element).
Besides, you can copy and paste custom SVG graphics that have been prepared in other platforms (Adobe Illustrator, Inkscape, etc.) into the SVG panel. For example, you can copy and paste a floor plan of a building as an SVG text and create a visual representation out of it in the form of an infographic.
4. Writing d3 Code
However, the most important part in the Infographics section is the JavaScript/D3 tab where all of the d3.js code is written to create the graphical representation of your dataset. In this tab, all the d3.js API references can be used to create your custom infographic:
https://github.com/d3/d3/blob/master/API.md
We presume that you have at least a minimal level of knowledge in using d3.js so we will not provide a detailed description of how to write d3.js code. For more information, you can always turn to the relevant online tutorials at https://d3js.org/ or https://www.tutorialspoint.com/d3js/index.htm. At the same time, we would like to highlight several aspects that are specific to the use of d3.js in the platform.
First of all, keep in mind that currently the latest d3.js version (5.4.0) is used in the platform. The major change in d3.js versions is to be noticed between versions 3 and 4. If you have been using version 3, remember to check the changes in the d3.js code syntax.
As pointed out above, it is required to add all parts of SVG into an element provided by Repods. This element is called REframe and is a d3 selection consisting of a single group element <g>.
Later on, all the methods are used directly on the SVG as in a regular d3 code:
Besides, you would write regular d3.js code which you can customize as much as you find necessary:
- Draw different parts of an infographic by appending rects, circles, lines, paths, etc. to build your visualization;
- Style and transform these elements;
- Grab existing elements from the SVG panel to position or style them based on your data;
- Apply various methods from the extensive d3 API to add interactivity and more intricate functionality to your infographic (zooming, dragging, time-related actions, etc.).
In the example, we are creating a vertical and a horizontal bar chart. The code for both charts can be divided into three main parts:
- Defining x and y scales on which the bars will be positioned;
- Appending the bars, representing our data units;
- Drawing the axis of the chart.
1. Scales
A d3 scale is a function to map input data to positions on the REframe. D3 provides the functions scaleBand and scaleLinear to create these map functions. To map text strings to positions, we use the scaleBand. To map numbers to positions, we use scaleLinear. To define the input for our scale function, we use scaleLinear.domain(). The output of our scale is set with scaleLinear.range() — equivalently for the scaleBand. The domain of the scaleBand scale is derived from our dataset using a standard JavaScript map function. The range for both functions is determined by the desired screen positions of our bars and is given as an array of two numeric values indicating the starting and ending points in REframe.
2. Bars
svg and barSvg are defined by appending the aforementioned REframe with a “g” element. Specifically for barSvg, we must add the transform attribute and translate the second barchart to be placed below (and not on top of) the first one. After this, both svgs groups are ready to be used:
a) Rectangles are selected as a shape for our bars in the chart (.selectAll(“rect”));
b) The data is joined using the d3.js .data method (.data(mydata));
c) For each entry in our data, a bar is created (.enter().append(“rect”));
d) The bars are positioned on the axes and styled.
3. Axes
To add the axes to the charts, we will reuse the scales that we created before. To do this, we use the axis maker functions from d3: d3.axisLeft and d3.axisBottom. Calling these functions with a scale as an argument on a provided “g” element will append all necessary elements (line, ticks, and text) to represent a chart axis according to the given scale.
So if you have followed our instructions, you are now equipped to create a custom infographic in the Repods platform. Repods and d3.js offer you a powerful tool to process, transform, and present your data. The infographics function enables you to produce and share your results in a visually appealing customizable form.
In this article, we have only scratched the surface of the endless possibilities to present your data in the platform. Stay curious — follow our article series Data Science with Repods on Medium https://medium.com/data-science-with-repods</a> and you will learn much more!
