twitter / labella.js Goto Github PK

https://github.com/twitter/labella.js/blob/master/docs/Renderer.md: the example link in the Constructor table.

I only use the force layout and the node generator, I don't use the render or the line drawing. If you could expose the individual functions so I could import only the functions I wanted like so:

import { forceLayout, nodeGenerator } from "labella"

That would make the library more efficient for integration into other libraries.

As far as I can tell nodes() will return its results in sorted position order, rather than the order the nodes were originally supplied in. This seems a little unexpected, and makes it hard to collate between the nodes and other lists (e.g. two separate label computations on both sides of a slope chart) or do things like draw in some original priority order. Am I interpreting the results right? Would it make sense to include sort: false as a possible option, so the order can be stable?

I think the latest version moved the phantom dependencies from devDependencies to dependencies (20b25d1) - was this intentional?

Awesome module!

This might go beyond your intended scope (and is definitely more computation/configuration intensive) but it would be awesome if this API could be extended to include 2d force labeling (for scatter plots etc.). Do you have any plans in this direction?

I know that optimal graph labeling is a hard problem (that increases exponentially with dimension) and I wonder if you have any thoughts after having developed this.

My use case requires that labels not be placed in any out of a set of rectangular areas. I don't see a way of doing that with the current API, but I would assume it shouldn't be difficult to add since that kind of computation is already done amongst the label rectangles themselves. Is this easy to add?

Hey Krist,

I love Labella and now I'm wondering if I can use it for something it wasn't meant for. This is a (currently hideous) network diagram of nodes that will always appear in one of three (or maybe more) horizontal layers:

I might be able to assure that links only occur between items in adjacent layers, but would prefer not to.

So, I'd love to be able to build off of Labella somehow rather than trying to construct a lot of similar functionality myself (splitting one of my layers into multiple layers as needed, distributing the labels, and making the links curve around objects) -- which I suspect I'm not smart enough to construct anyway.

...Hmm...as I write this I'm starting to think it might be possible without really changing the Labella code: I could attach all the top layer nodes as labels to an invisible 'timeline' above and erase their links. Then build another invisible timeline for the second layer where the time points are centered on the labels from the first layer...etc. If one of my layers ends up getting split into multiple Labella layers, I'll ... no, this isn't going to work. My 'labels' can have multiple parents.

I would need, first, to let nodes have a fixed target point with x,y coordinates in addition to an idealPos.

I haven't figured out how the code works, but my guess is that when the distributor puts the nodes in layers, it leaves nodes with parents (stubs?) at each layer above, and the renderer uses these parents to generate the waypoints for drawing the curvy links.

So maybe I would just need to insert some extra parent stubs to get the link to extend further up to the appropriate node on the preceding 'timeline'. Perhaps, as a naive first pass, at a point like https://github.com/twitter/labella.js/blob/master/examples/js/demo.js#L59, I could take the nodes returned by force.nodes() and give them each a root stub based on the node they connect to in the preceding 'timeline'. (If that timeline had multiple layers, the link might pass through some labels, but this would get me close.)

What do you think? Am I approaching this the right way? Would this constitute an impracticable and unconscionable abuse of your beautiful library?

Thanks!

You see this type of timeline quite often i would say, where you have a "centered" timeline and the labels are positioned left and right of it. Now with many lables one could utilize the same algorithms currently available just for both sides*, so that even then could have more labels than fit on both sides rendered.

*= I guess the naive solution would be to just calculate the algorithms independly for both sides, but maybe later it might be good to have an algorithm that tries to optimize the space globally.

When I add for example 250 nodes, and I make the canvas 250 times the size of the labels, the visualization starts acting strange. The set seems to be split up. The bottom nodes are completely off the canvas (like on the image):

The dy coordinates of the nodes are extremely large (up to 50.000 sometimes):

Do you have an explanation for this behavior? Is it to be expected somehow?

Can you introduce some functionality to tell labella that after a certain point it can overflow into beyond the set size rather than just stacking the points?

I can understand it would probably completely change the algorithms to allow variable label height. But maybe to have the ability to say that all labels should be 3em high, vertically center text in them, and for labels with lots of text, allow vertical scrolling within the label. I suppose tooltips might be more effective than scrolling within labels, but before choosing a solution myself I wanted to ask what's possible now or easy to add as a new feature.

Oh, just realized, these are SVG text elements. So to do what I want would have to allow HTML foreignObject instead of text in addition to being able to set label height.

On https://github.com/twitter/labella.js/blame/85d17f0a1e095c5646b62806173a1caff4ff599a/README.md#L18 the simple example link leads results into a 404 page.

Hi all,

First of all, labella.js is amazing. Just found labella.js is built upon d3 v3.4.13. Like to ask, is there any plan to upgrade to d3 v4? Or any guides on how to do that?
Thanks in advance.

Thanks,
Jinxin

It would be nice if we can make these labels clickable sort of like link to another page or action.

is there any implications like performance .. when using labella for cordova apps. ??

@kristw @BrunoQC @jmeas @nathanielw

When I clump a bunch of entry times together this pushes some of the labels off the bottom:

const data = [
    { time: new Date(1977, 4, 25), episode: 4, name: "A New Hope" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" },
    { time: new Date(2015, 11, 18), episode: 7, name: "The Force Awakens" }
];

Result:

Is there any way to avoid this happening?

Ideally I'd like it to look something like this (courtesy of my amazing paint skills):

Is this possible?

Demo code based on d3kit-timeline example:
https://github.com/kristw/d3kit-timeline/blob/6ba58c19af9a8790afe37105de270830815b0a71/examples/src/main.js#L7-L15

I am really interested in using Labella, but I need to create a horizontal timeline with text inside the labels. You show a vertical example (labella.js/examples/with_text.html), but for the life of me I can't seem to get a the horizontal version to show data (labella.js/examples/basic_down.html).

Any help would be appreciated