How to sort dc.graph.js node colors based on a specific attribute in the dataset?

Question

I want to visualize a dataset using dc.graph.js, and I want to have the nodes to show different colors based on different values of a specific attribute in the data file. Here is a sample json dataset that I would like to visualize:

"nodes": [
    {
      "id": 0,
      "name": "beans",
      "fiber content":"high"
    },
    {
      "id": 1,
      "name": "meat",
      "fiber content":"low"
    },
    {
      "id": 2,
      "name": "apple",
      "fiber content":"high"
    },
    {
      "id": 3,
      "name": "walnut",
      "fiber content":"medium"
    },
    {
      "id": 4,
      "name": "egg",
      "fiber content":"low"
    };

I want all the food items with high fiber content to have the same color on the graph, and those with medium fiber content to show another color, and the ones with low fiber content to have a third color. In other words, I hope to basically have the nodes grouped into three groups: high, medium and low fiber content, then assign colors respectively to each group. I read through the dc.graph.js API and found that nodeKey is a unique identifier of the node's attributes, so I looked at the demo js and found this function which does the data file import and define the attribute terms:

function on_load(filename, error, data) {
    var graph_data = dc_graph.munge_graph(data),
        nodes = graph_data.nodes,
        edges = graph_data.edges,
        sourceattr = graph_data.sourceattr,
        targetattr = graph_data.targetattr,
        nodekeyattr = graph_data.nodekeyattr;
    var edge_key = function(d) {
        return d[sourceattr] + '-' + d[targetattr] + (d.par ? ':' + d.par : '');
};
    var edge_flat = dc_graph.flat_group.make(edges, edge_key),
        node_flat = dc_graph.flat_group.make(nodes, function(d) { return d[nodekeyattr]; }),
        cluster_flat = dc_graph.flat_group.make(data.clusters || [], function(d) { return d.key; });

I'm not sure how it recognizes the attributes from the imported dataset, so I wonder if I need to point out and link to the "fiber content" attribute somewhere in my code to tell it what my color groups are based on. And for the color settings, the brushing-filtering demo actually has colors on the graph working but the graphs are auto-generated randomly without a dataset, so there isn't any grouping around attributes involved. I tried to add this following code snippet about colors (which I mostly followed from the brushing-filtering.js) to the same on_load function above, but it didn't work:

var colorDimension = node_flat.crossfilter.dimension(function(n) {
        return n.color;
    }),
    colorGroup = colorDimension.group(),
    dashDimension = edge_flat.crossfilter.dimension(function(e) {
        return e.dash;
    }),
    dashGroup = dashDimension.group();

var colors = ['#1b9e77', '#d95f02', '#7570b3'];
var dasheses = [
    {name: 'solid', ray: null},
    {name: 'dash', ray: [5,5]},
    {name: 'dot', ray: [1,5]},
    {name: 'dot-dash', ray: [15,10,5,10]}
];

Diagram
    .autoZoom('once-noanim')
    .altKeyZoom(true)
    .nodeFixed(function(n) { return n.value.fixed; })
    .nodeLabelFill(function(n) {
        var rgb = d3.rgb(Diagram.nodeFillScale()(Diagram.nodeFill()(n))),
            // https://www.w3.org/TR/AERT#color-contrast
            brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
        return brightness > 127 ? 'black' : 'ghostwhite';
    })
    .nodeFill(function(kv) {
        return kv.value.color;
    })
    .nodeFillScale(d3.scale.ordinal().domain([0,1,2]).range(colors))

Any tips on how I might accomplish this?

How to sort dc.graph.js node colors based on a specific attribute in the dataset?

0 Answers