Thought I read "lalibela" first :) (Those famous buildings carved out of rocks, a loooong time ago, in Ethiopia https://en.wikipedia.org/wiki/Lalibela)
Labella.js – placing labels on a timeline without overlap
41–50 of 83 posts
Re: Labella.js – placing labels on a timeline without overlap
#42Earlier quoted context omitted.
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 image…
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…
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. :)
Re: Labella.js – placing labels on a timeline without overlap
#43Boy does that freak out with 200+ labels. :) Looks fun, though.
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
Re: Labella.js – placing labels on a timeline without overlap
#44Earlier quoted context omitted.
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…
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…
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.
Re: Labella.js – placing labels on a timeline without overlap
#45"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…
Why is any critical feedback is being down voted? Is HN now just full of myopic mob mentality? Seriously?
Re: Labella.js – placing labels on a timeline without overlap
#46How come the labels are sideways in left/right position? It feels like it defeats the purpose.
Re: Labella.js – placing labels on a timeline without overlap
#47How do you add text to these labels?
Re: Labella.js – placing labels on a timeline without overlap
#48Wouldn'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.
Re: Labella.js – placing labels on a timeline without overlap
#49How come the labels are sideways in left/right position? It feels like it defeats the purpose.
Even better: rotate the line by 90 degrees.
Re: Labella.js – placing labels on a timeline without overlap
#50How 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