So let’s get started.
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 heat map, which also offers a little bit of interactivity.
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 JSON Input 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.
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.
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:
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: