How to render a general lattice with D3JS?

Question

I am looking to an algorithm or layout to be implemented in D3JS to render a graph of a "general" lattice, a lattice that is not (necessarily) binomial.

An example of the kind of result I would like to obtain is:

I want to visualize the lattice as a hierarchy from the bottom to the top, similar to a tree-styled structure.

I tried to adapt a force layout, but this worked badly, especially because it was hard to locate the levels of the hierarchy properly.

I don't have any constraint about the form of the input, that it can be the more appropriate for the procedure.

Answer 1

You could do something like this, but I'm not sure how useful it would be. It makes use of the cola.js library.

// Sample data set
        var json = {
            nodes: [
                    { "name": 'Beverage' },
                    { "name": 'nonAlcoholic' },
                    { "name": 'sparkling' },
                    { "name": 'alcoholic' },
                    { "name": 'hot' },
                    { "name": 'caffeinic' },
                    { "name": 'MineralWater' },
                    { "name": 'madeFromGrain' },
                    { "name": 'madeFromGrapes' },
                    { "name": 'HerbTea' },
                    { "name": 'Coffee' },
                    { "name": 'Cola' },
                    { "name": 'Beer' },
                    { "name": 'Wine' },
                    { "name": 'Champagne' },
                    { "name": '' }
                   ],
            links: [
                    { "source": 0, "target": 1},
                    { "source": 0, "target": 2},
                    { "source": 0, "target": 3},
                    { "source": 1, "target": 4},
                    { "source": 1, "target": 5},
                    { "source": 1, "target": 6},
                    { "source": 2, "target": 6},
                    { "source": 2, "target": 7},
                    { "source": 2, "target": 14},
                    { "source": 3, "target": 7},
                    { "source": 3, "target": 8},
                    { "source": 4, "target": 9},
                    { "source": 4, "target": 10},
                    { "source": 5, "target": 10},
                    { "source": 5, "target": 11},
                    { "source": 6, "target": 11},
                    { "source": 7, "target": 12},
                    { "source": 8, "target": 13},
                    { "source": 8, "target": 13},
                    { "source": 13, "target": 14},
                    { "source": 10, "target": 15},
                    { "source": 11, "target": 15},
                    { "source": 12, "target": 15},
                    { "source": 14, "target": 15},
                   ]
        };
  
        var width = 800, height = 600, n = 10000;
  
        var svg = d3.select('#vis').append('svg').attr('width', width).attr('height', height);

        var force = cola.d3adaptor()
                        .linkDistance(80)
                        .size([width, height])
                        .nodes(json.nodes)
                        .links(json.links)
                        .flowLayout("y", 25)
                        .on("tick", tick)
                        .start();
  
        var node = svg.selectAll("circle.node")
                       .data(json.nodes)
                     .enter().append("circle")
                       .attr("class", "node")
                       .attr("r", 5);

        var text = svg.selectAll("text.label")
                       .data(json.nodes)
                     .enter().append("text")
                       .attr("class", "label")
                       .text(function(d) { return d.name; });

        var link = svg.selectAll("line.link")
                       .data(json.links)
                     .enter().append("line")
                       .attr("class", "link");

        function tick() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });

            text.attr("x", function(d) { return d.x + 8; })
                .attr("y", function(d) { return d.y; });
        }

        function hover(d) {
            switch(d3.event.type) {
                case "mouseover": var tip = svg.append("g")
                                               .attr("class", "tip")
                                               .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
                                  var rect = tip.append("rect")
                                                .attr("fill", "white");
                                  var text = tip.append("text")
                                                .text(d.name);
                                  var bounds = text.node().getBBox();
                                  rect.attr("x", bounds.x)
                                      .attr("y", bounds.y)
                                      .attr("width", bounds.width)
                                      .attr("height", bounds.height);
                                  
                                  break;
                case "mouseout":  svg.selectAll("g.tip")
                                      .remove();
                                  break;
                default: break;
            }
        }

        text {
            font: 10px sans-serif;
        }

        line {
            stroke: #000;
            stroke-width: 1.5px;
        }

        circle {
            stroke: #fff;
            stroke-width: 1.5px;
        }

<div id="vis"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>

Using cola.js you can specify additional constraints to assist with laying things out correctly. As it stands, the only constraint that I've placed on it is a flowLayout parameter. The good thing about this is the layout is repeatable and achieving a similar result with a d3 force layout may be quite difficult (although, in fairness, it's not really intended to be used that way).

I wouldn't claim that this is a great result, but short of manually determining node positions, or accepting a standard d3 force layout, this might be among the easiest and quickest methods to get something approaching what you're after.

Edit: showing how the hover was used.

// Sample data set
        var json = {
            nodes: [
                    { "name": 'Beverage' },
                    { "name": 'nonAlcoholic' },
                    { "name": 'sparkling' },
                    { "name": 'alcoholic' },
                    { "name": 'hot' },
                    { "name": 'caffeinic' },
                    { "name": 'MineralWater' },
                    { "name": 'madeFromGrain' },
                    { "name": 'madeFromGrapes' },
                    { "name": 'HerbTea' },
                    { "name": 'Coffee' },
                    { "name": 'Cola' },
                    { "name": 'Beer' },
                    { "name": 'Wine' },
                    { "name": 'Champagne' },
                    { "name": '' }
                   ],
            links: [
                    { "source": 0, "target": 1},
                    { "source": 0, "target": 2},
                    { "source": 0, "target": 3},
                    { "source": 1, "target": 4},
                    { "source": 1, "target": 5},
                    { "source": 1, "target": 6},
                    { "source": 2, "target": 6},
                    { "source": 2, "target": 7},
                    { "source": 2, "target": 14},
                    { "source": 3, "target": 7},
                    { "source": 3, "target": 8},
                    { "source": 4, "target": 9},
                    { "source": 4, "target": 10},
                    { "source": 5, "target": 10},
                    { "source": 5, "target": 11},
                    { "source": 6, "target": 11},
                    { "source": 7, "target": 12},
                    { "source": 8, "target": 13},
                    { "source": 8, "target": 13},
                    { "source": 13, "target": 14},
                    { "source": 10, "target": 15},
                    { "source": 11, "target": 15},
                    { "source": 12, "target": 15},
                    { "source": 14, "target": 15},
                   ]
        };
  
        var width = 800, height = 600, n = 10000;
  
        var svg = d3.select('#vis').append('svg').attr('width', width).attr('height', height);

        var force = cola.d3adaptor()
                        .linkDistance(80)
                        .size([width, height])
                        .nodes(json.nodes)
                        .links(json.links)
                        .flowLayout("y", 25)
                        .on("tick", tick)
                        .start();
  
        var link = svg.selectAll("line.link")
                       .data(json.links)
                     .enter().append("line")
                       .attr("class", "link");

          var node = svg.selectAll("circle.node")
                       .data(json.nodes)
                     .enter().append("circle")
                       .attr("class", "node")
                       .attr("r", 10)
                       .on("mouseover", hover)
                       .on("mouseout", hover);



        function tick() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });


        }

        function hover(d) {
            switch(d3.event.type) {
                case "mouseover": 
                    console.log(d3.event);
                    var tip = svg.append("g")
                                               .attr("class", "tip")
                                               .attr("transform", "translate(" + d3.event.clientX + "," + d3.event.clientY + ")");
                                  var rect = tip.append("rect")
                                                .attr("fill", "white");
                                  var text = tip.append("text")
                                                .text(d.name);
                                  var bounds = text.node().getBBox();
                                  rect.attr("x", bounds.x)
                                      .attr("y", bounds.y)
                                      .attr("width", bounds.width)
                                      .attr("height", bounds.height);
                                  
                                  break;
                case "mouseout":  svg.selectAll("g.tip")
                                      .remove();
                                  break;
                default: break;
            }
        }

text {
            font: 10px sans-serif;
        }

        line {
            stroke: #000;
            stroke-width: 1.5px;
        }

        circle {
            stroke: #fff;
            stroke-width: 1.5px;
        }

<div id="vis"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>