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.
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. <a href="http://bl.ocks.org/mbostock/4339184" rel="nofollow">http://bl.ocks.org/mbostock/4339184</a>
Thought I read "lalibela" first :) (Those famous buildings carved out of rocks, a loooong time ago, in Ethiopia <a href="https://en.wikipedia.org/wiki/Lalibela" rel="nofollow">https://en.wikipedia.org/wiki/Lalibela</a>)
Can someone briefly explain, at a high level, the positioning algorithm that one would use to solve a problem like this?<p>Reingold–Tilford was referenced below but doesn't seem applied in this case.<p>I've attempted to look through the code here but comments are limited and it is pretty imperative.
Someone sent me a direct link and I had no idea what "Labels should be beautiful" meant.<p>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 <a href="http://haldean.org/hooke" rel="nofollow">http://haldean.org/hooke</a> if people are interested!
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).<p>The current version is artsy. Thanks for sharing this though. Looks very cool.
The simple example link from the github page (<a href="http://twitter.github.io/labella.js/easy.html" rel="nofollow">http://twitter.github.io/labella.js/easy.html</a>) is a 404.
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.<p>You need something better than a linear progression of ticks if you want to track and label lot of events that have happened.
"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.<p>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.