Ask HN: DAG Layout Using HTML and CSS | Hacker News Reader

Ask HN: DAG Layout Using HTML and CSS

5 pointsColinWright13 comments

For some years now I'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:

https://www.solipsys.co.uk/Chitter/1199951849769574400.png

I've been trying to work out how to use HTML and CSS to create a similar effect, but I've drawn a blank. It would seem to me to be a commonly needed thing, but I've not found anything on the web that meets my need, despite several hours of searching.

So I must be missing something. My gut tells me this should be a common thing, but all my search terms have failed. I'd really appreciate a pointer.

The layout doesn't need to be dynamic, but it would be a useful thing if it was. The nodes don't need to be clickable, but it would be a useful thing if they were.

Just ... anything to semi-automatically layout a tree or DAG of nodes with text and the arrows between them.

TIA.

View on HN

Here are a few that I found:

- http://sigmajs.org/ - https://js.cytoscape.org/ - https://visjs.org/

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

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

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".

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.

> ... 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...

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.

Sorry for replying so late!

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

Clickable:

https://www.solipsys.co.uk/Chitter/1199951849769574400.png

Graphviz is a solid tool for this sort of thing

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!

Export as SVG and use that in HTML

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?

Ah interesting.

There are URL attributes that you can set to make the whole node clickable [1].

Do you need only one link per node or do you want the node's text to be fully blown/rendered html (i.e. multiple links per node)?

[1] https://www.graphviz.org/doc/info/attrs.html#d:URL

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

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.

Reply on news.ycombinator.com