5 ms·
Labella.js – placing labels on a timeline without overlap
- dvh 11y agoLabela.js - placing labels on a timeline without overlap
- insulanian 11y agoThank you.
- dang 11y agoWe'll pinch that if you don't mind.
- scrollaway 11y agoBoy does that freak out with 200+ labels. :) Looks fun, though.
- escherize 11y agoSome wonderfully modern art. I think I'll tweet it :)
- quarterto 11y agoIt actually does look like a piece of art in the Mathematics Department at the University of Warwick: https://upload.wikimedia.org/wikipedia/commons/e/ec/Maths_foyer,_Warwick_University.jpg https://upload.wikimedia.org/wikipedia/commons/e/ec/Maths_fo...
- logicallee 11y agoIt 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 right up! :-D
- scrollaway 11y agoI 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.
- verytrivial 11y agoRapunzel! Rapunzel! Let down your hair beads!
- NicoJuicy 11y agoChange 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 11y ago1 round doesn't give a very good layout, 8-10 rounds seems to be enough for a good layout most of the time
- zjonsson 11y agoFor 200+ labels you can check out the force_labels in d3-plugins, https://github.com/d3/d3-plugins/tree/master/force_labels https://github.com/d3/d3-plugins/tree/master/force_labels. Demo: http://bl.ocks.org/zjonsson/1691430 http://bl.ocks.org/zjonsson/1691430
- thejerz 11y agoIs there a way to lay out the nodes vertically instead of horizontally?
- MWil 11y agoYes, look at the examples page
- xomateix 11y agoThe 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 11y agofixed.
- estefan 11y agoSounds like a disease.
- elcct 11y agorather ladies body part
- gotchange 11y agoAny specific use case for this plugin? What about the restrictions on the height imposed on the labels?
- iheartmemcache 11y agoMan, 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 11y agoIf 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=isch&sa=X&ved=0ahUKEwjcjeua17_JAhUBvBoKHfCqAWAQ_AUIBygB&biw=1280&bih=678 https://www.google.co.uk/search?q=graphviz&source=lnms&tbm=i...
- iheartmemcache 11y agoI'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
- idibidiart 11y agoWHOOPS! 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 11y agoWhy 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.
- evolvedlight 11y agoI 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.
- idibidiart 11y agoIt's terrible UX. Why do I care that the algo is still running while the window is scrolling? Detect the scroll event and pause the algo. Anyway, it's not fit for displaying a a lot of events, so that should be noted. The resulting diagram is incomprehensible. I'm talking data vis basics here, not being clever. C'mon.
- detaro 11y agoEven the demo UI gives you the options to stop it from showing the intermediate steps, so your complaint is mostly that the demo doesn't magically pick the best parameters but lets you play with them?
- mstade 11y agoThis 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.
- macca321 11y agoI 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.
- bakkerthehacker 11y agoneat http://i.imgur.com/0LIwCOO.png http://i.imgur.com/0LIwCOO.png
- dvdplm 11y agoIs this restricted to a straight line or can it be used to label any svg (?) path?
- kristw 11y agoThe 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.
- uptownfunk 11y agoSounds too much like labia which may not be a bad thing.
- jbranchaud 11y agoIt'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.
- chdir 11y agoWouldn'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 11y agoI 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 11y agoThat'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/Renderer.md https://github.com/twitter/labella.js/blob/master/docs/Rende... renderer.getWaypoints(node) will give you the positions on the route and you can draw the connector as you like.
- idibidiart 11y ago"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.
- idibidiart 11y agoWhy is any critical feedback is being down voted? Is HN now just full of myopic mob mentality? Seriously?
- idibidiart 11y agoSo down voting a question about why my critical feedback was being voted down without legitimate argument (or even just an educated one) proves that HN can be a myopic mob sometimes (actually often) I suppose this will be down voted too? Silencing critical feedback feels good, eh?
- jholman 11y agoI will always downvote complaints about downvotes. I do this because * I don't want to see complaints about downvotes * I believe that they are unconstructive 99% of the time * I don't think anyone else wants to see them
- detaro 11y agoHN also has a rule about it: Please resist commenting about being downvoted. It never does any good, and it makes boring reading. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- samuell 11y agoThought 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)
- Ciantic 11y agoHow come the labels are sideways in left/right position? It feels like it defeats the purpose.
- amelius 11y agoEven better: rotate the line by 90 degrees.
- kristw 11y agoThat 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 11y agoHow do you add text to these labels?
- kristw 11y agohttp://twitter.github.io/labella.js/with_text.html http://twitter.github.io/labella.js/with_text.html
- shseham 11y agoHow 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 11y agoDitto. 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
- shseham 11y agoIt is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre https://github.com/cpettitt/dagre
- teleclimber 11y agoWhy 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 11y agoI 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
- haldean 11y agoI 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!
- plaid_dev 11y agoCan 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 11y agoThis 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 11y agoSomeone 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. :)