Any specific use case for this plugin?
What about the restrictions on the height imposed on the labels?
Labella.js – placing labels on a timeline without overlap
11–20 of 83 posts
Re: Labella.js – placing labels on a timeline without overlap
#12Man, 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.
Re: Labella.js – placing labels on a timeline without overlap
#13Labela.js - placing labels on a timeline without overlap
Thank you.
Re: Labella.js – placing labels on a timeline without overlap
#14Boy does that freak out with 200+ labels. :) Looks fun, though.
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 r…
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.
Re: Labella.js – placing labels on a timeline without overlap
#15Boy does that freak out with 200+ labels. :) Looks fun, though.
Rapunzel! Rapunzel! Let down your hair beads!
Re: Labella.js – placing labels on a timeline without overlap
#16WHOOPS! 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.
Re: Labella.js – placing labels on a timeline without overlap
#17Earlier quoted context omitted.
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 r…
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.
Re: Labella.js – placing labels on a timeline without overlap
#18This 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.
Re: Labella.js – placing labels on a timeline without overlap
#19I 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.
Re: Labella.js – placing labels on a timeline without overlap
#20Boy does that freak out with 200+ labels. :) Looks fun, though.
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.