Dendrogram: figue.js (clustering) output to fit visualization

Question

It seems that machine learning via JavaScript is in it's infancy as there are hardly any libraries which fit each other calculation wise and visualization wise.

I am using figue.js library and wish to output the result via the following:

http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte1/ http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte2/ http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte3/

This is what it requires:

{
  "name": "root", "y" : 0,
  "children": [
  {
    "name": "parent A", "y" : 30,
    "children": [
      {"name": "child A1", "y" : 100},
      {"name": "child A2", "y" : 100},
      {"name": "child A3", "y" : 100}
    ]
  },{
    "name": "parent B", "y" : 76,
    "children": [
      {"name": "child B1", "y" : 100},
      {"name": "child B2", "y" : 100} // <--- number at the end is the ultrametric distance
    ]
  }
  ]
}

This is what figue.js is giving me(of course it's different, all of the developers do this...):

{
    "label": -1,
    "left": {
        "label": "Point 1",
        "left": null,
        "right": null,
        "dist": 0,
        "centroid": [
            13.0406203,
            55.606759100000005
        ],
        "size": 1,
        "depth": 0
    },
    "right": {
        "label": -1,
        "left": {
            "label": -1,
            "left": {
                "label": -1,
                "left": {
                    "label": "Point 2",
                    "left": null,
                    "right": null,
                    "dist": 0,
                    "centroid": [
                        13.0403852,
                        55.6066934
                    ],
                    "size": 1,
                    "depth": 0
                },
                "right": {
                    "label": "Point 5",
                    "left": null,
                    "right": null,
                    "dist": 0,
                    "centroid": [
                        13.0404121,
                        55.6066418
                    ],
                    "size": 1,
                    "depth": 0
                },
                "dist": 0.00005819080683319214,
                "centroid": [
                    13.04039865,
                    55.606667599999994
                ],
                "size": 2,
                "depth": 1
            },
            "right": {
                "label": "Point 3",
                "left": null,
                "right": null,
                "dist": 0,
                "centroid": [
                    13.0404818,
                    55.606629700000006
                ],
                "size": 1,
                "depth": 0
            },
            "dist": 0.00007074249076717127, // <--- ultrametric distance
            "centroid": [
                13.040426366666667,
                55.60665496666667
            ],
            "size": 3,
            "depth": 2
        },
        "right": {
            "label": "Point 4",
            "left": null,
            "right": null,
            "dist": 0,
            "centroid": [
                13.0405408,
                55.6066934
            ],
            "size": 1,
            "depth": 0
        },
        "dist": 0.00008682562985036432,
        "centroid": [
            13.040454975000001,
            55.606664574999996
        ],
        "size": 4,
        "depth": 3
    },
    "dist": 0.00010313457228779574,
    "centroid": [
        13.040488040000003,
        55.606683479999994
    ],
    "size": 5,
    "depth": 4
}

I can say that this is complicated to resolve. Or does anyone know of any libraries that may compile the structure?

So you're looking for an adaptor between the figue.js output to make it work in native d3.js? — Jared Farrish, Apr 05 '15 at 14:53
@JaredFarrish Indeed, I am writing one now but it's not working. Adapter is the term, thank you. — basickarl, Apr 05 '15 at 14:55
I don't see anything that might work that isn't a full-blown package by itself (like OpenRefine) or some R-sourced data adapter. I see others have asked the same question; if you develop a solution, I would recommend contributing that as an answer so others may benefit. — Jared Farrish, Apr 05 '15 at 15:40
@JaredFarrish Haven't done a recursive algorithm in ages, was easy once it all came back! — basickarl, Apr 06 '15 at 06:31

basickarl · Accepted Answer · 2015-04-05T17:36:22.893

var root = figue.figue.agglomerate(figueLabels, figueVectors, figue.figue.EUCLIDIAN_DISTANCE, figue.figue.SINGLE_LINKAGE);

// the above code is from figue.js, I have however modified the library so that it is module and works in nodejs

// the code below is the adapter

function recursive(json) {
    var str;
    if (json.left !== null || json.right !== null) {
        str = {
            name: '',
            y: json.dist,
            children: []
        };
        if (json.left !== null) {
            str.children.push(recursive(json.left));
        }
        if (json.right !== null) {
            str.children.push(recursive(json.right));
        }
    } else {

        str = {
            name: json.label,
            y: json.dist
        };
    }
    return str;
}

var json = recursive(root);

// there we go, now we can use the json variable as an argument for the visualization

console.log(JSON.stringify(json));

Below is the result!

enter image description here

Dendrogram: figue.js (clustering) output to fit visualization

1 Answers1