Search code examples
javascriptgraphdc.jscrossfilter

Integrating a network graph with dc.js/crossfilter.js

I'm looking for tips and guidance on integrating a network chart with dc.js/crossfilter.js`.

Let's say I have some data like this:

[
    {
        'name': 'john',
        'sexe': 'male',
        'relative': [
            'susy',
            'mark'
        ]
    },
    {
        'name': 'susy',
        'sexe': 'female',
        'relative': [
            'susy',
            'mark'
        ]
    }
    ...
]

Using plain dc.js I can quite easily display coordinated piecharts showing proportions of males/females, percentages of people with the same name etc..

What I would like is to combine the features of dc.js with a network graph, so I can show who's related to who.

The idea is that ie: when selecting "females" in a piechart, the network graph would redraw itself to show exclusively the female relationships.

I'm aware the question may be vague and only loosely fit the guidelines, but I've spent hours digging across to internet for an example of combining dc.js charts with a network diagram.

Can integrating a network graph with dc.js be relatively easily achieved?

Solution

  • You can try dc.graph.js

    It follows the same sort of data model as dc.js, using crossfilter and accessor functions. The main difference is that there are two crossfilter instances, one for the nodes and one for the edges. Also, it uses accessors on the edges to retrieve the keys of the source and target boxes.

    dc.graph.js is still experimental but it definitely supports the use case you describe. Please try it out and report any issues or feature requests!