Data Visualization with REPODS:

Finally, going to the hands-on example, the workflow of creating an infograph can be divided into 4 steps, representing each Code Panel tab:

1. Data Selection

For our example the following dataset (an array consisting of 4 objects) is copied into the “Custom Data” Panel:

“hard-coded” dataset which will be used as the basis for the new infograph

In d3.js syntax you would usually use just the keyword “data” to define your dataset but this can get a little confusing later on so it is advisable to use another term (in the examples in REPODS platform 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, e.g.:

Here just a regular CSS rule-sets are used to style the svg content. What is important regarding CSS, 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 ID’s to parts of the infograph or styling element tags, e. g., <p>, <header>). Besides this, d3.js provides the option to style the elements not through CSS definitions but set attributes of style with JavaScript:

3. Creating SVG element

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 infograph without running the risk of the browser relayouting 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. This way you can e.g. place a text paragraph which gives a short explanation of what is displayed in the infograph. 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 this, you can also copy & paste custom SVG graphics which were prepared in other platforms (Adobe Illustrator, Inkscape etc.) into the SVG Panel. E.g. you can copy & paste a floor plan of a building as svg text and create a visual representation out of it in a form of an infograph.

4. Writing d3 code

However, the most important part in the Infographs 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 infograph: https://github.com/d3/d3/blob/master/API.md

In this article we presume that you have at least a minimal level of knowledge in using d3.js so a very detailed description on how to write d3.js code will not be given (quick reminder that you can always turn to online tutorials https://d3js.org/, https://www.tutorialspoint.com/d3js/index.htm). However, we would like to highlight several aspects which are specific to the use of d3.js in the platform.

First of all, keep in mind that currently the newest d3.js version (5.4.0) is used in the platform. The major change in d3.js versions is to be noticed between version 3 and 4 so if you have been using version 3 keep in mind to check the changes in 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 this, 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 infograph by appending rects, circles, lines, paths etc. to build up your visualization;
2. style and transform these elements;
3. grab prepared 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 infograph (zooming, dragging, time-related actions etc.).

---

Posted from my blog with SteemPress : https://selfscroll.com/data-visualization-with-repods/

---