Labella.js – placing labels on a timeline without overlap | Hacker News Reader

Labella.js – placing labels on a timeline without overlap

twitter.github.io

375 pointscallumlocke77 comments

It'd be cool if the creator used some filler text on the labels generated on the home page so that we could see what it looks like that way.

Yes, I thought I was missing something.

Here it is. http://twitter.github.io/labella.js/with_text.html

Nice idea. Will try to add that when I have time.

Man, I've been searching for a way to do this (generate declaratively images for flow-charts, graphs, etc) which are aesthetically pleasing enough to embed into case studies and white-papers for ages. DIA is functionally sufficient but aesthetically awful when you end up embedding it into a nicely styled InDesign, LaTeX, or Quark publication. I'm going to be pairing this with PhantomJS and making a command-line front-end -> svg over the weekend.

If you're looking for more general flow-chart/graph functionality, check out Graphviz[1]. It's open source and has bindings in many languages (I've used it with Ruby and Python). There are a number of layout algorithms to choose from, and I've found that for most topologies it does a great job of layout. Admittedly the default styling isn't that pretty, It's also easy to style with colors, fonts and custom node images.

[1] http://www.graphviz.org/

EDIT: Some inspiration of what's possible: https://www.google.co.uk/search?q=graphviz&source=lnms&tbm=i...

I've been using GV for coming up on a decade and it has the same problem that Dia has - you can tell it was made by engineers. In the same way you can look at code written by a UX guy and just know it wasn't written by someone formally educated in CS, the converse applies when engineers try to do UI.* Engineers historically just cared about the functionality - e.g., "Does this UML depict the information as precisely as possible? OK. Good. Next problem."

You saw the same problems with XFree86 WM/DEs. I spent months trying to get XFCE to be perfect in the late '00s, but it just always looked off. I'm a keyboard-consoler 98% of the time anyways, so staying in my `screen' instance was fine (in fact preferable,)with a nicely configured Konsole (or was it aterm, or did E17 have it's own Term? One of those..) full-screened. But such is the folly of projects like DIA and GV. It's getting better as NYT and all end up hiring people who have multi-disciplinarian abilities (I think Square or AirBNB open-sourced their dashboard which has a lot of good vis tools) but I really just want a standard, declarative language I can embed in Pandoc that looks good whether I export to PDF, HTML or print it.

*LaTeX not withstanding. Knuth brilliantly applied mathematical rules to typesetting and I maintain it still beats out InDesign in certain scenarios, granted I've heard many-a-grad-student's yells of frustration as they try to embed their results into a .tex, so YMMV. Look at this TeX and I defy anyone to tell me it's not pretty: https://bloerg.net/2014/09/20/a-modern-beamer-theme.html

I've been cleaning up Graphviz in Illustrator for awhile, and having pretty good success. If you're careful about the styling, it works pretty well.

The defaults are pretty wretched.

FWIW, you can import some graphviz diagrams in OmniGraffle and they instantly become beautiful :)

Sadly, osx only I think.

Sure, but that's like saying "you can tell HTML was made by engineers". In both cases the defaults with 0 styling applied aren't pretty. But also like HTML, Graphviz gives you the tools to customize the colors, fonts, edge and node styles and pretty much anything visual using style attributes, and just let GraphViz deal with its core competency of node layout. It takes some work up front to get a style template that you like and works for the type of display you're going for, but once you've figured out a palette and the shapes you want you can apply them to any Graphviz graph.

It would be nice though if someone made a "Twitter Bootstrap for Graphviz" that at least starts you off with some prettier defaults. :)

That's true, but saying "It's fully customizable, so you should still be able to do whatever you want with GraphViz" is like saying "it's a Turing-complete language, so you should still be able to do whatever you want with $PROGRAMMING_LANGUAGE" - technically true, but in practice, not so much.

Try http://gephi.org/features/

Boy does that freak out with 200+ labels. :)

Looks fun, though.

Some wonderfully modern art. I think I'll tweet it :)

It actually does look like a piece of art in the Mathematics Department at the University of Warwick: https://upload.wikimedia.org/wikipedia/commons/e/ec/Maths_fo...

It doesn't, it looks great! You try labelling 200 points right next to each other.

As an exercise, set it to 200 points, wait for it to generate (will take a while), pick a point and find its label visually. It's surprisingly easy. I was able to do it.

Of course, the difference is, this isn't a physical ribbon cable you're breaking out - online, you should just be able to hover over the point and have the label pop right up! :-D

I don't know about your machine, but on mine (8 core high end rig) it repaints horizontally in rows of 20 pixels, veeeery slowly. The end result is fine, but it definitely freaks out for a solid 3 minutes.

With the `simple` algorithm (arguably better, at least I can read the lines more easily then), 200 labels, and `rounds/tick` set to `100` or so it completes in just a few seconds on my laptop.

Yeah, 'simple' seems to be much more robust

Rapunzel! Rapunzel! Let down your hair beads!

Change the Rounds/Tick + Max Round to 1 instead of 5 and 100. It makes the script much faster.

And for a clearer layout ( on a lot of labels), change the min-width and max-width for a "better" overview.

1 round doesn't give a very good layout, 8-10 rounds seems to be enough for a good layout most of the time

For 200+ labels you can check out the force_labels in d3-plugins, https://github.com/d3/d3-plugins/tree/master/force_labels. Demo: http://bl.ocks.org/zjonsson/1691430

How complex would it be to do it without taking in the min/max width parameters? It soon becomes insanely complex when you want draw a graph with nodes of variable width and height. Say for example if you wanted to add text inside the boxes and you want the box width to be determined based on the text. I have previously tried to adapt the default tree layout algorithm (Reingold–Tilford?!) in D3 and failed miserably. http://bl.ocks.org/mbostock/4339184

Ditto. I don't think d3 is best suited for tree diagrams with dynamic values and data. I ended up stumbling across an awesome example on codepen explaining how todo it with just CSS, I modified it slightly and it's now used in one of our production projects.

Here it is: http://codepen.io/Pestov/pen/BLpgm

It is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre

Why do you think D3 is not well suited to this task? Given all the amazing layouts it can manage very well this is surprising.

Naturally you wouldn't be able to use their default tree layout because it assumes identically sized nodes but creating your own layout should be doable. If I remember correctly D3's tree layout code is 200LOC.

I am heading down this path now so I'm sorry to see both you and poster above giving up on D3 for this.

I am not giving up on D3. I just wanted to point out the limitation in the default tree layout and the complexity around it. In fact there was a discussion about variable sized nodes in GH and a plugin is in place now. Might be useful for you if you are heading down the same path - https://github.com/mbostock/d3/issues/1992

One way to add more text is to use the labels as buttons/links. Have a text box adjacent (above, below, to the side). Have the text in the text box change based on which label you click.

This example has text inside the boxes. I use svg's .getBBox() to obtain width/height for each label.

http://twitter.github.io/labella.js/with_text.html

The max width parameter is optional. I am not sure what are you trying to do with the graphs though. This library is not for graphs or trees. It's for points on single axis.

Thought I read "lalibela" first :) (Those famous buildings carved out of rocks, a loooong time ago, in Ethiopia https://en.wikipedia.org/wiki/Lalibela)

neat http://i.imgur.com/0LIwCOO.png

Can someone briefly explain, at a high level, the positioning algorithm that one would use to solve a problem like this?

Reingold–Tilford was referenced below but doesn't seem applied in this case.

I've attempted to look through the code here but comments are limited and it is pretty imperative.

This is not reingold-tilford. The algorithm has two parts. The first part is a heuristic to distribute nodes into multiple layers when it won't fit in one. Then for each layer, it is a physics simulation with the labels. Each label has attraction force to the desired position, but they also push each other.

Someone sent me a direct link and I had no idea what "Labels should be beautiful" meant.

The slogan should be changed to "Labels on a timeline without overlap", just like the hacker news thread title. :)

I would like something like this for things placed anywhere on a screen. The use case is hitting the alt key and displaying labels with the keyboard shortcuts for buttons.

This looks really good. I wonder, how well would it work with a network rather than just a single line? I'm thinking about something like a git network graph.

I wrote a simple thing to do a similar operation for photos that are in-line with text on my website; I wrote a little bit about it at http://haldean.org/hooke if people are interested!

How come the labels are sideways in left/right position? It feels like it defeats the purpose.

Even better: rotate the line by 90 degrees.

That was to showcase that you can render it in any orientation.

This example might be a more likely use case for left/right (all labels usually have same height)

http://twitter.github.io/labella.js/with_text.html

How do you add text to these labels?

http://twitter.github.io/labella.js/with_text.html

Wouldn't it look more readable if the connectors are straight lines with 90 degree bends instead of curves (like a neatly laid out circuit or wire diagram or tube network).

The current version is artsy. Thanks for sharing this though. Looks very cool.

I am not sure it would although that was also my first thought.

The problem with the 90 degrees bends might be that they might look too similar and you end up a spaghetti monster where it's hard to see what line leads to were.

I need to look into this a little more.

That's how I felt with the 90 degrees bends.

However, you have the choice to draw it your own way. https://github.com/twitter/labella.js/blob/master/docs/Rende...

renderer.getWaypoints(node) will give you the positions on the route and you can draw the connector as you like.

Any specific use case for this plugin?

What about the restrictions on the height imposed on the labels?

Is this restricted to a straight line or can it be used to label any svg (?) path?

The intention of this work was to find ways to put labels on any axis (1D). So if you want to use this to label peaks of area chart you can run labella to get the x position and then figure out y position by yourself.

But it won't support placing label on a zigzag path.

The simple example link from the github page (http://twitter.github.io/labella.js/easy.html) is a 404.

fixed.

Sounds like a disease.

rather ladies body part

Is there a way to lay out the nodes vertically instead of horizontally?

Yes, look at the examples page

Labela.js - placing labels on a timeline without overlap

Thank you.

We'll pinch that if you don't mind.

WHOOPS! Set Labels to 200 instead of 20 and click Generate Labels. The diagram is not only incomprehensible, it actually wobbles, flickers and shakes as you scroll.

You need something better than a linear progression of ticks if you want to track and label lot of events that have happened.

Why am i being down voted for reporting that it wobbles, flickers and shakes (on latest Chrome) when you scroll with a large number of points? I should be up voted because this is something that needs to be pointed out to anyone who wishes to use this library. And 200 points aren't a lot of points when it comes to presenting data. It just that this attempts with futility to work with any number of points and it simply can't without changing how data is presented, definitely not a linear progression of ticks on a line.

I think you're being downvoted because this is when the placing algorithm is still running - it's going down the diagram and using what looks like a genetic algorithm to determine the best placing for the labels.

It's terrible UX. Why do I care that the algo is still running while the window is scrolling? Detect the scroll event and pause the algo. Anyway, it's not fit for displaying a a lot of events, so that should be noted. The resulting diagram is incomprehensible. I'm talking data vis basics here, not being clever. C'mon.

Even the demo UI gives you the options to stop it from showing the intermediate steps, so your complaint is mostly that the demo doesn't magically pick the best parameters but lets you play with them?

That wasn't obvious from first use and at any rate the resulting diagram for anything above a trivial number of labels is incomprehensible. So magucally arranging labels is not really scalable. You need a differemt visualization model. That should be stated and made clear up front.

Are you sure that wasn't the algorithm making it's multiple passovers to better position the labels? Under the default settings and 200 labels it takes a while to finish positioning the labels. Try changing the Max. Round and Algorithm values to 1 and see if it still flickers/moves as you experienced before.

It's probably to do with the snark - intentional or otherwise - in your leading "Whoops!" - it comes across as "hey, everyone, I'm really clever because I found a flaw" which a) several other people found anyway b) you didn't actually report accurately; as others point out, the 'wobbling' is the positioning algorithm still running, nothing to do with scrolling c) is an edge-case; no matter what your claim that "200 points aren't a lot", most timelines I've ever seen online have had nowhere near 200 points. It's also painfully obvious before you even begin that 200 labels won't fit at all sensibly in the given width, so nobody using this library would actually make such a blundering mistake.

Positioning algo is dumb if it doesn't take UX into account. it should pause while the user is scrolling. Also, it is a futile to suggest that automatically placing labels is scalable for any number of labels beyond 40 or so.

That describes just about every high ranking regular on this site. It's a circle of big headed fellows who pat each other on the back, if you're in said circle, or down vote to eternity if you're not.

"Shakes, wobbles and flickers" when user is scrolling while algo is running with 200 points, which isn't a huge number of points if you consider other means of showing time series data. Positioning algo is dumb if it doesn't take UX into account when number of points is relatively large. It should pause while the user is scrolling.

Also, it is a futile to suggest that automatically placing labels is scalable for any number of labels beyond 40 or so. The resulting diagram beyond 40 or so points is incomprehensible. I tried 200, but 50 or 70 would also most likely result in messy diagram.

I didn't downvote, but isn't this comment just rearranged copy/paste from your previous comments?

Yes because the original got muted for no just reason and with no explanation. Are you able to follow this logic?

Reply on news.ycombinator.com