
Ask HN: DAG Layout Using HTML and CSS - ColinWright
For some years now I&#x27;ve been using a visualisation tool to help me keep track of long running, widely branching discussions on Twitter and elsewhere.  A small example is here:<p>https:&#x2F;&#x2F;www.solipsys.co.uk&#x2F;Chitter&#x2F;1199951849769574400.png<p>I&#x27;ve been trying to work out how to use HTML and CSS to create a similar effect, but I&#x27;ve drawn a blank.  It would seem to me to be a commonly needed thing, but I&#x27;ve not found anything on the web that meets my need, despite several hours of searching.<p>So I must be missing something.  My gut tells me this should be a common thing, but all my search terms have failed.  I&#x27;d really appreciate a pointer.<p>The layout doesn&#x27;t need to be dynamic, but it would be a useful thing if it was.  The nodes don&#x27;t need to be clickable, but it would be a useful thing if they were.<p>Just ... anything to semi-automatically layout a tree or DAG of nodes with text and the arrows between them.<p>TIA.
======
skibz
Here are a few that I found:

\- [http://sigmajs.org/](http://sigmajs.org/) \-
[https://js.cytoscape.org/](https://js.cytoscape.org/) \-
[https://visjs.org/](https://visjs.org/)

Sorry for the poor formatting. I don't know how to make the links appear as a
newline delimited list.

~~~
ColinWright
Re formatting:

* put blank lines between entries;

* start each line with a splat or dash;

* don't try to be too clever;

* full extent of formatting is here: [https://news.ycombinator.com/formatdoc](https://news.ycombinator.com/formatdoc)

Now I'm off to check out your suggestions ... thank you!

 _(... later ...)_

I've gone to check out your three suggestions, and I can't find anything in
any of them that looks anything like the linked image. Either I'm missing
something, or those suggestions aren't what I'm looking for. They are graphics
libraries, yes, but none of the examples seem to do what I'm trying to do.

So I'm still lost, and still looking for more concrete suggestions.

I'm beginning to think no one has done this, and maybe HTML/CSS/js can't
actually do it without programming everything "by hand".

~~~
detaro
Just looking through the examples on the visjs page, it can do the style of
nodes and it can do hierarchical tree layout, which seems to be the display
you want. But it renders to canvas, is that what you don't like?

Graphviz tools also can output SVG with nested HTML if you prefer that to
canvas rendering. HTML/CSS alone aren't great to do this kind of thing.

~~~
ColinWright
> ... visjs ... can do the style of nodes and it can do hierarchical tree
> layout, ...

Thanks for the reply ...

I can't see anywhere on that site examples of nodes with text and hierarchical
tree layout, so I guess I'm just not understanding the information that's
there.

I've got this:

[https://visjs.github.io/vis-
network/examples/network/basicUs...](https://visjs.github.io/vis-
network/examples/network/basicUsage.html)

But that's not hierarchical.

What am I missing?

For reference, I'm new to all this. I'm a big-iron back-end algorithms person,
and I find the documentation ... bewildering. I've tried reading it line by
line and constructing examples as I go, but it always uses terms and phrases
that don't seem to be defined anywhere. Colour me frustrated.

~~~
detaro
Sorry for replying so late!

I went mostly by their example page [https://visjs.github.io/vis-
network/examples/](https://visjs.github.io/vis-network/examples/) \- the
hierarchical layout + e.g. the HTML node style seemed like they'd probably do
the trick.

------
ColinWright
Clickable:

[https://www.solipsys.co.uk/Chitter/1199951849769574400.png](https://www.solipsys.co.uk/Chitter/1199951849769574400.png)

------
thomas536
Graphviz is a solid tool for this sort of thing

~~~
ColinWright
Yes it is, and the image I link to was created with GraphViz. I don't seem to
be able to make it create an HTML5/CSS layout, though.

Which is what I'm asking for.

Searching for GraphViz and HTML, or searching for HTML in the GraphViz
documentation, gives results for the _content_ of nodes, and not rendering the
layout via HTML. So I can't how it can be made to work.

If you can provide suggestions on how to make GraphViz do this I would be
ecstatic, because I use GV all the time - it is usually my tool of choice.

Thanks.

 _(... edit ...)_

Here's the "raw" output from using GraphViz:

    
    
      X_1220658902322307072 \
        [ fillcolor="#f2cffff92",
          height=2.4028,
          label="label 1",
          pos="768,477",
          shape=rectangle,
          style=filled,
          width=3.0278 ];
    
      X_1220659282338811906 \
        [ fillcolor="#f2cffff92",
          height=2.4028,
          label="label 2",
          pos="768,267",
          shape=rectangle,
          style=filled,
          width=3.0278 ];
    
      X_1220658902322307072 -> \
        X_1220659282338811906 \
        [ pos="e,768,353.51 768,390.5 768,381.62 768,372.56 768,363.59" ];
    

If you can help me lay that out in HTML/CSS then I'd be done.

Cheers!

~~~
phillipseamore
Export as SVG and use that in HTML

~~~
ColinWright
Thanks for the reply ... it serves to reinforce that I've not been entirely
stupid so far, because I've tried that, and it achieves half of what I want.
The problem is that I want links in the nodes - that's why I'm asking for HTML
specifically.

I know I'm at risk here of asking for Y when actually I want to achieve Z and
the best way is to use X, but seriously, if the nodes are HTML then I can do
things in them already, but if they are SVG then I need to re-learn all the
capabilities in a new language, and not leverage what I already know.

I want to have boxes with arrows between them. I want them laid out semi-
automatically in a hierarchical fashion. The boxes should contain HTML, so I
can put text and links in them.

However ...

It's looking like I need to generate SVG. I can generate plain SVG using
DOT/GraphViz, but then I can't put links in the nodes. So I need to parse and
post-process the SVG to insert the links, and it all just seems too hard.

I'm not saying it should be easy, but it should be easier than this. Someone
_must_ have done something similar, there _must_ be a library. The art _must_
have progressed beyond he graphical equivalent of machine code, but it seems
not even to have got as far as assembly language.

I can't believe people assemble these sorts of displays by hand ...

Am I asking the wrong question?

~~~
phillipseamore
You don't need to learn much about SVG. I found some SVG output from GraphViz
and simply put some <a> links around groups in the SVG.

[https://codepen.io/phillipseamore/pen/OJPqorm](https://codepen.io/phillipseamore/pen/OJPqorm)

~~~
ColinWright
That's fine for small graphs constructed by hand, but I need to construct
graphs with a few hundred nodes, and editing by hand to put the URLs into them
isn't feasible.

However, progress has been made, I may have a solution that's "Good
Enough(tm)" for my needs. I hope to post about it later.

