data visualization image

Data Visualization with Repods: Create Your First Custom Infographic

In this article on data visualization, we are going to demonstrate how to create custom infographics in the Repods cloud data science platform. Bear with us until the end and you will be able to create bar charts that look like this:

bar chart showing the data visualization capabilities in repods
Data visualization in Repods

On the Repods cloud data science platform, 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 by learning from How to Model Data on the Repods Platform.

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/ and https://www.tutorialspoint.com/d3js/index.htm.

Getting Starting with Data Visualization

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:

analysis panel in repods for data visualization
The Analysis panel in Repods where you create reports and custom infographics

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:

some data visualizations by others

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.

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:

infographics editor in repods
The Infographics Editor in Repods

To create a custom infographic with d3.js, you need two main ingredients:

  1. The data that is going to be the basis for your visualization;
  2. JavaScript, SVG, CSS code that renders the graphics based on your data.

Our 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. We will write the code for the new infographic in the first three tabs; in the fourth tab, we will select and modify the data for the infographic.

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 & paste some data directly into the Custom Data panel. Data has to be presented as an array, usually consisting of JavaScript objects.

the data panel as part of the infographics editor
The Data Panel within the Infographics Editor

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.

reports to add within the data panel
Add Data within the Data Panel

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.

add custom data for data visualization
Add Custom Data

Workflow for Your Data Visualization

Finally, going to our hands-on example, the workflow of creating an infographic to support your data visualization efforts can be divided into for steps, representing each Code Panel tab:

Data Selection

For our example, the following dataset (an array consisting of four objects) is copied into the Custom Data panel:

data panel in repods

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.

Styling

Second step (optional but recommended for more customization possibilities) is to place some styling in the CSS tab, e.g.:

code to open up come customization possibilities

Here regular CSS rule sets are used to style the SVG content. What is important regarding CSS is that some rule sets of htmlbody 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).

Besides, d3.js provides the option to style the elements not through CSS definitions but through set attributes of style with JavaScript:

javascript code for custom data visualization

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

creating svg elements in repods

You can use HTML elements within the SVG using the tag. In this way, you can e.g. place a text paragraph that gives you 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.

using html within the svg panel for data visualization

Besides, you can copy & paste custom SVG graphics that have been prepared in other platforms (e.g. Adobe IllustratorInkscape) into the SVG panel. For example, you can copy & paste a floor plan of a building as SVG text. Then you can create a visual representation out of it in the form of an infographic.

Writing d3 Code

However, the most important part in the Infographics section is the JavaScript/D3 tab. All of the d3.js code is written here 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 of using d3.js so a detailed description on how to write d3.js code will not be provided here. For more information, you can always turn to the relevant online tutorials at https://d3js.org/ and 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 to support your data visualization.

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, keep in mind 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.

Later on, all the methods are used directly on the SVG as in a regular d3 code:

writing d3 for data visualization

Besides, you would write just a regular d3.js code which you can customize as much as you find necessary:

  1. Draw different parts of an infographic by appending rects, circles, lines, paths, etc. to build your visualization;
  2. Style and transform these elements;
  3. Grab existing elements from the SVG panel to position or style them based on your data;
  4. 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 our example, we are creating a vertical and a horizontal barchart. The code for both charts can be divided into three main parts:

writing d3 for data visualization part 2
  1. Defining x and y scales on which the bars will be positioned;
  2. Appending the bars, representing our data units;
  3. Drawing the axis of the chart.
/ vertical barchart
var x = d3.scaleBand()
    .domain(mydata.map(d => d.name))
    .range([160, 800])
    .padding(0.3);
var y = d3.scaleLinear()
    .domain([0, 4000])
    .rangeRound([700, 400]);
colChart = REframe.append("g")
colChart
    .selectAll("rect")
    .data(mydata)
    .enter().append("rect")
    .attr("fill", "tomato")
    .attr("width", x.bandwidth())
    .attr("x", function(d) { return x(d.name); })
    .attr("y", function(d) { return y(d.xnumber); })
    .attr("height", function(d) { return y(0) - y(d.xnumber); })
colChart.append("g")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));
colChart.append("g")
    .attr("transform", "translate(" + 160 + ",0)")
    .call(d3.axisLeft(y));
// horizontal barchart
var yBar = d3.scaleBand()
    .domain(mydata.map(d => d.name))
    .range([160, 800])
    .padding(0.3);
var xBar = d3.scaleLinear()
    .domain([0, 4000])
    .rangeRound([160, 900]);
barChart = REframe.append("g")
    .attr("transform", "translate(0," + 600 + ")")
barChart
    .selectAll('rect')
    .data(mydata)
      .enter().append("rect")
    .attr("fill", "green")
     .attr("x", function(d) { return xBar(0); })
    .attr("y", function(d) { return yBar(d.name); })
    .attr("height", yBar.bandwidth())
    .attr("width", function(d) { return xBar(d.xnumber) - xBar(0); })
barChart.append("g")
    .attr("transform", "translate(160," + 0 + ")")
    .call(d3.axisLeft(yBar));
barChart.append("g")
    .attr("transform", "translate(0," + 800 + ")")
    .call(d3.axisBottom(xBar));

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. If we want 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. Then, 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.

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 bar chart to be placed below (and not on top of) the first one. After this, both svg 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.

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 on 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 and highly customizable form.

data visualization created successfully

In this article, we have only scratched the surface of the endless possibilities to present your data in the platform via data visualization. Stay curious — follow our article series Data Science with Repods on Medium and you will learn much more!


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