Labella.js – placing labels on a timeline without overlap
21–30 of 83 posts
Re: Labella.js – placing labels on a timeline without overlap
#22Man, 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…
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.
EDIT: Some inspiration of what's possible: https://www.google.co.uk/search?q=graphviz&source=lnms&tbm=i...
Re: Labella.js – placing labels on a timeline without overlap
#23WHOOPS! 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.
Re: Labella.js – placing labels on a timeline without overlap
#24WHOOPS! 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 simpl…
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.
Re: Labella.js – placing labels on a timeline without overlap
#25WHOOPS! 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 simpl…
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.
Re: Labella.js – placing labels on a timeline without overlap
#26Boy 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.
1 round doesn't give a very good layout, 8-10 rounds seems to be enough for a good layout most of the time
Re: Labella.js – placing labels on a timeline without overlap
#27WHOOPS! 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 simpl…
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.
Re: Labella.js – placing labels on a timeline without overlap
#28Is this restricted to a straight line or can it be used to label any svg (?) path?
Re: Labella.js – placing labels on a timeline without overlap
#29Man, 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…
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 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
Re: Labella.js – placing labels on a timeline without overlap
#30Sounds like a disease.
rather ladies body part