Search code examples
javascripthtmld3.jsdata-visualizationvenn-diagram

Visualizing data techniques for groups of data using d3.js


I have a list of applications and the servers that are providing access to these applications, there are a large number of crossovers, For Example:

Servers 01-09 provide App A, App, B
Servers 05-09 provide App C
Servers 10-14 also provide App A

Currently I have drawn on a sheet of paper a lot of boxes with the list of servers and their apps, grouped into servers running the same app. using the example above: A box labelled 01-09 with App A and App B written inside and overlapping another box labelled 05-09 with App C written in it.

I wanted to transfer this into a visualization provided by d3 (I am also learning d3) that I can show on a website. I had in mind a kind of super venn diagram or something? The goal is to easily see the groups of servers running the same applications.

Has anyone else had this kind of visualization problem - what techniques did you use? what does d3 have built in that could be used in this instance?


Solution

  • For me, the easiest way to do this is in a table because you have only two dimensions:

    | Server | App A | App B | App C |
    |--------------------------------|
    | 01     |   X   |       |       |
    | 02     |       |       |       |
    etc
    

    If you're set on d3.js (quite reasonable), I would use a Co-occurrence graph with servers vertically and apps horizontally.

    Alternatively, you could try labelled force with apps having one shape and servers having another. I don't think that's as readable as a table!