group simlar properties (e.g. costs) and color them

[bittorf]

https://en.wikipedia.org/wiki/K-means_clustering https://github.com/harthur/clusterfck

the visualizer should automatically group similar properties, e.g. speed/costs/number of links etc. and use appropriate colors for them. (so we avoid to reimplement the colors for every protocol)

this issues is just dropping an idea, dont take this too serious.

[nemesifier]

this issues is just dropping an idea, dont take this too serious.

lol xD

[bittorf]

BTW, the demo is great: http://harthur.github.io/clusterfck/demos/colors/ (click on "# of clusters: 11")

[gubi]

Did you mean something like this?

[bittorf]

@gubi no, i talk about a totally other thing. but the demo you posted is impressiv too!

i will explain my wish: we have different protocols with different ranges of "cost" or other values. instead of hardcoding e.g. cost of 3.000-7.000 should be color orange we should read in all costs and automatically group them.

[gubi]

...so, following your example, we can decide to assign a dynamic colour based on the user choice. In other words, leave users to establish nodes (and/or links) colours depending on their own preferences in a display filtering (sub)panel. This is a wonderful feature! "Colorize in red all links that cost 1.3..."

I think that we can do that with less energy. Let's see lines 452 to 461: there's a TODO that should be completed....

A practical example

D3 has a default styles templates, used also in the code above as default style set BUT not yet implemented with our own ;) I build this example changing the nodes colours depending on their links count. So, in one hand we must to create a global opts attribute, like as

opts = d3._extend({
    ...
    customNodeColours: null, // Void: null | d3 style function()
    ...

and in the other hand just add the } else { exception in line 461, like this

} else {
    node.style(opts.customNodeColours);
    node.style({
      "fill": function(d){ return opts.customNodeColours(d.linkCount); },
      "cursor": "pointer"
   });
}

Finally, in the HTML file, before calling the d3.netJsonGraph() function, we can create our parameters and pass them inside the hacked lines above. Just like as follow:

var data {
    customNodeColours: function(d) {
        var colors = d3.scale.quantize().domain([3, 5, 2]).range(["#333", "#666", "#999"]);
        return colors(d);
   }
};
d3.netJsonGraph("json_file.json", data);

For further informations, follow d3's Quantitative Scales

[bittorf]

you are right, this looks good. can you patch/extend our d3-copy or even "upstream" that? the next thing will be to read in the ranges...