Create Infographics
The Results section is where you create customized interactive infographics with animated features.
Last updated
The Results section is where you create customized interactive infographics with animated features.
Last updated
To access the option to create infographics, start your data pod and go to the Analysis panel.
The Analysis panel takes you to the Results layer of your data pod.
The Results layer is where you code in workbooks and create visualisations in infographics. In this environment, you have an overview of all result entities created within your data pod, grouped by type.
Within the overview panel, infographics are presented in a masonry-style layout. The tiles are ordered by their creation timestamp.
To create a new infographic, click on Infographic:
You will be redirected to the infographics editor.
From here, you can also select an infographic tile from the list of available Results assets.
Click on the infographic tile to enter the infographic editor or click on the available buttons from within your overview panel to perform the designated actions (e.g. remove).
To create charts, you need to have some basic understanding of web assets creation.
The Infographics editor gives you access to cutting-edge web tools to present your information.
The greatest advantage of the infographics editor is that you do not have to care about getting the data from the data pod into the browser. The data pod pushes the selected data into the browser in real time.
The infographics editor will open as follows:
This panel is split into two main sections. We have the code panels on the left-hand side and the result canvas on the right-hand side.
The code panels enable you to edit the different components of a web presentation.
You have three separate code tabs. These are HTML/SVG, JavaScript/D3, and CSS. With these three panels, you can create a web presentation without using the data from your data pod. This is how they look like:
To use the data from your Pod, you need the Data tab. Here you also have an Add Data button:
To render the data from your data pod, you can add data manually or import a workbook card result in your environment and keep it updated in real-time. Click on Add Data.
The popup window allows you to select from the entities available from within your data pod:
Once you have made your selection, these items are added to your dropdown menu. From here, you can select the item that you need.
The way you create web assets is similar to what you can find on jsfiddle or codepen.
To execute the code, i.e. to re-render the Result Canvas, simply hit the Draw Graph button or the key command Cmd+E/Alt+E (Mac / Other).
The code is executed in a
<iframe>so that it cannot destabilize the data pod app or the app in which you have embedded the infographics.
This is where you see the outcome of your infographic.
The result canvas has an <iframe> element into which all the web assets are rendered. A log panel displays errors or your console.log() output.
You can host your infographics right from your data pod.
The infographics will then be available on the web via a secret URL. Only individuals who have the URL will be able to view the infographic and/or forward it to others.
You can view the URL of the infographics if you check the Public checkbox as shown above and click on the Embed icon that will display the embed code as shown below:
The infographics hosted in your data pod receive data updates in real time.
Note that the infographics will not be available under the given URL while the data pod is stopped.
For more information on how to get started with custom infographics, check out our related tutorials:
Data Visualization with Repods: Create Your First Custom Infographic
Complex Infographics with d3.js in Repods — Part I
Adding Interactivity to Complex Infographics with d3.js in Repods — Part II
Once you have explored the chapter on infographics, you can move on to the other Results entities: workbooks.
Any questions at this point? Get in touch with our support team.
The Draw Graph button in the upper right-hand corner of the infographic editor may be disabled or enabled depending on whether you can extract an infographic from that entity.
