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.
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.
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
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. :)
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.
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 right up! :-D
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.
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. http://bl.ocks.org/mbostock/4339184
Ditto. 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.
Why 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.
I 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
The max width parameter is optional. I am not sure what are you trying to do with the graphs though. This library is not for graphs or trees. It's for points on single axis.
One way to add more text is to use the labels as buttons/links. Have a text box adjacent (above, below, to the side). Have the text in the text box change based on which label you click.
This 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.
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 http://haldean.org/hooke 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).
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.
The 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.
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.
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.
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.
That describes just about every high ranking regular on this site. It's a circle of big headed fellows who pat each other on the back, if you're in said circle, or down vote to eternity if you're not.
Positioning algo is dumb if it doesn't take UX into account. 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.
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.
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.
It'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.
Even 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?
That wasn't obvious from first use and at any rate the resulting diagram for anything above a trivial number of labels is incomprehensible. So magucally arranging labels is not really scalable. You need a differemt visualization model. That should be stated and made clear up front.
"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.
I 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
Your comments have repeatedly broken the HN guidelines by being both uncivil and unsubstantive. We ban accounts that do that, so please (re-)read the guidelines and follow them from now on.
