GETTING STARTED | D3 VIZUALIZATIONS | KNIME ANALYTICS PLATFORM
From D3 example to interactive KNIME view in 10 minutes
Integrate beautiful visualizations in your workflows with just two nodes
Interactive visualizations on the web have become very popular. The JavaScript framework D3 has developed into one of the most used libraries by many websites and publishers for rich graphics and visualizations.
In this article, I’d like to show you how easy it is to harness D3’s capabilities and bring them into KNIME. To do so I am taking an existing example from the D3 website and will create an interactive view using the Generic JavaScript view in just 10 minutes.
So let’s get started.
If you have a basic version of KNIME Analytics Platform, you first need to install the KNIME JavaScript Views extension. To do so, go to the ‘File’ menu and ‘Install KNIME Extensions…’. Select the ‘ KNIME & Extensions ’ category and from that category, select and install the ‘ KNIME JavaScript Views ’. Alternatively, you can drag & drop the extension from the KNIME Hub to your KNIME Analytics Platform, and follow the installation prompt. After successful installation, you will need to restart your application.
In the second step, let’s pick the example we want to work with. I picked the one for this blog post by browsing through the D3 Gallery.
After scrolling down for a bit, you will see this nice implementation of a Heatmap, which also offers a little bit of interactivity.
The great thing about most of the examples in this gallery is that all of the different parts that go into the visualization are given and explained. We will see how this comes in handy when setting up the view node. But first, let’s take a look at the workflow we are going to set up. It is very simple and involves only two nodes: the Container Input (JSON) node to feed in the data and the Generic JavaScript View node to display the visualization.
Note. The Generic JavaScript View node in the current version of KNIME Analytics Platform (v. 4.5) supports dependency for D3 (v. 4.2.6). For this example, to display the visualizations available in the D3 Gallery, we retrieve an older version of D3 (v. 3.5.5) using the GET Request node, and use this older dependency via flow variable in the Generic JavaScript View node.
JSON Data
Looking at how the data are read into the view in the example, we notice that an external JSON file is read in.
Since we are going to be porting this view into KNIME it would be nice to be able to exchange and modify this data in a workflow. For simplicity, we will use the Container Input (JSON) node and simply copy and paste the whole JSON string from the website straight into the configuration of the node.
After executing the node KNIME creates a table with one JSON column in which one cell including all the pasted data is present. Now we already have the data in the workflow and can work with it.
Please note, that this setup is quite unusual, with the Container Input (JSON) node as data source of the Generic JavaScript View node. Here the Container Input (JSON) node is used to be able to easily copy and paste the .json data from file pm25.json on the website. Usually data would be provided by reading a .csv file, as shown in the following image.
View Configuration
Let’s move on to the visualization. Open up the configuration dialog of the Generic JavaScript View node. Here you will find two large input fields, one for CSS and one for JavaScript. We can also use flow variables in our script and pull in a few standard libraries, one of them being D3.
CSS
The next easy part is the CSS. We do not have to change anything here and can also just simply copy and paste it from the website.
HTML
There is two more parts on the website. One of them is a basic HTML stub that the JavaScript later on uses. At the moment it is not possible to enter HTML in the node configuration, so we will have to create it as the first thing in our JavaScript. There are different ways to do this, but since we have D3 as a dependency already, it would be natural to use D3 also for the element creation. The following code snippet creates the same HTML structure as given in the example.
JavaScript
Now onto the last part, the actual JavaScript implementation. Since all the pieces are already in place, we can copy and paste the code from the website again into our JavaScript editor on the right hand side.
There is, however, one thing we need to change, and that is how the data is accessed in the code. As I said before, in the example it is pulled in as a file. This is done with the d3.json() function, as you can see here:
We have the data in the workflow already and fed a table into the view node. A KNIME table, when connected, is always automatically converted into a JavaScript table construct and made available as a ‘knimeDataTable’ variable. We know that the table coming in only has one column and one row, so in our access call we only need to address this one cell in the table:
After we pulled out the data, we obtained the JSON string, which we only need to parse now, to be able to use it just as the example does. Getting all these pieces together, we can now execute the node and open the view, which should look exactly like the example on the website:
From here on, you can modify the view to fit your current need, or generalize it for a broader use case. Download the workflow Example of Visualization with Custom JavaScript D3.js Code from the KNIME Hub.
Requirements:
- KNIME JavaScript Views extension
- KNIME JSON-Processing extension
— — — — -
As first published on the KNIME Blog: https://www.knime.com/blog/from-d3-example-to-interactive-knime-view-in-10-minutes
