
Labella.js – placing labels on a timeline without overlap - callumlocke
http://twitter.github.io/labella.js/
======
jbranchaud
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.

~~~
thirdsun
Yes, I thought I was missing something.

~~~
kristw
Here it is.
[http://twitter.github.io/labella.js/with_text.html](http://twitter.github.io/labella.js/with_text.html)

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

~~~
kcorbitt
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/](http://www.graphviz.org/)

EDIT: Some inspiration of what's possible:
[https://www.google.co.uk/search?q=graphviz&source=lnms&tbm=i...](https://www.google.co.uk/search?q=graphviz&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjcjeua17_JAhUBvBoKHfCqAWAQ_AUIBygB&biw=1280&bih=678)

~~~
iheartmemcache
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](https://bloerg.net/2014/09/20/a-modern-beamer-theme.html)

~~~
kcorbitt
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. :)

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

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

Looks fun, though.

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

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

------
shseham
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](http://bl.ocks.org/mbostock/4339184)

~~~
m4tthumphrey
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](http://codepen.io/Pestov/pen/BLpgm)

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

~~~
shseham
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](https://github.com/mbostock/d3/issues/1992)

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

------
bakkerthehacker
neat [http://i.imgur.com/0LIwCOO.png](http://i.imgur.com/0LIwCOO.png)

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

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

------
vlad
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. :)

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

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

------
haldean
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](http://haldean.org/hooke) if people are interested!

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

~~~
kristw
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](http://twitter.github.io/labella.js/with_text.html)

------
maneesh
How do you add text to these labels?

~~~
kristw
[http://twitter.github.io/labella.js/with_text.html](http://twitter.github.io/labella.js/with_text.html)

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

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

~~~
kristw
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...](https://github.com/twitter/labella.js/blob/master/docs/Renderer.md)

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

------
gotchange
Any specific use case for this plugin?

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

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

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

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

~~~
kristw
fixed.

------
estefan
Sounds like a disease.

~~~
elcct
rather ladies body part

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

~~~
MWil
Yes, look at the examples page

------
dvh
Labela.js - placing labels on a timeline without overlap

~~~
insulanian
Thank you.

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

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

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

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

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

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

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

