Implementation of Treemap CSV

Hey nice people,

i am new to the implementation of d3 examples into the knime tool.
Unfortunately the explanation for another example is too hard to understand and very old.
https://www.knime.com/blog/from-d3-example-to-interactive-knime-view-in-10-minutes
https://hub.knime.com/knime/spaces/Examples/latest/07_Scripting/04_JavaScript/01_D3_JS-Example~41V8OYtwe7wZODCk

To be exact:

I need to visualize disease data (csv) in following way:
https://observablehq.com/@d3/treemap
How can i implement this chart into knime?
How should i clean the data ?
etc.

Is there any instructions for this chart in particular.

Thanks for the help and greeting !

M

2 Likes

Hey @mschwanse,

true, a lot of things changed (and will change) regarding JavaScript and its dependencies - so here a little example from which you can work off (thanks @DanielBog for helping!):

Regarding the data format, you can have a look how the “flare” example dataset from here is handled and adjust it to your disease dataset accordingly (possibly by adjusting the workflow you linked). In my example, I wrapped it into a JSON which I passed on via flow variable.

Regarding the implementation in KNIME via JavaScript: you’d find the code for the Treemap chart here from where you can copy-paste it into the Generic JavaScript View node. The tricky part is to use a newer version of d3, which you can get with require.js. Then it’s a matter of making the svg object known to the html page by adding it to the innerHTML of the body:

// get latest d3 and/or other needed dependencies
require.config({
	paths: {
                "d3": "https://d3js.org/d3.v7.min"
	}	
});
// wrap function that needs d3 with require.js
require(["d3"], function(d3) {
	// Treemap code here
	// chart = Treemap(flare, { ...
	html += chart.outerHTML;
	body.innerHTML = html;
}

I uploaded an example on the Hub which you can use as a starting point:

I hope that gets you started!
Kind regards,
Lukas

2 Likes

Hey Lukas ,

thanks for ur help !
There is only one problem left:

To apply the table data to JSON i have to build the string like in the example below. Can u show an examplebuild for this problem and how to build the table with the needed information.

{
    "name": "flare",
    "children": [
        {
            "name": "analytics",
            "children": [
                {
                    "name": "cluster",
                    "children": [
                        {
                            "name": "AgglomerativeCluster",
                            "size": 3938
                        },
                        {
                            "name": "CommunityStructure",
                            "size": 3812
                        },
                        {
                            "name": "HierarchicalCluster",
                            "size": 6714
                        },
                        {
                            "name": "MergeEdge",
                            "size": 743
                        }
                    ]
                }              
            ]
        }
    ]
}

Hey @mschwanse ,

this depends a lot on how your input data looks like. I assume it looks like this:
image

From that I’d work my way up from the leaves (AgglomerativeCluster, CommunityStructure, …) over the branches (cluster, analytics) to the root (flare) and use the Table to JSON Node successively. With a GroupBy and a Rename you can make sure that the JSON objects are lists (arrays) and that they are named properly

For kicks I show a way to automate this for an arbitrary amount of branches via a recursive loop, so you don’t have to copy/paste the same three nodes for each branch.


This needs some flow variable preparation in each iteration, which is hidden in the metanode.

It might need some adjustment dependent on your input data, but in general this would be one approach to get the final JSON. Feel free to play around with it :slight_smile:

BR,
Lukas