Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Labella.js – placing labels on a timeline without overlap

twitter.github.io

Post reply on HN
Print view View original

51–60 of 83 posts

Re: Labella.js – placing labels on a timeline without overlap

#51

Post by m4tthumphrey »

shseham wrote: post #50

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.…

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.

Here it is: http://codepen.io/Pestov/pen/BLpgm

Re: Labella.js – placing labels on a timeline without overlap

#52

Post by idibidiart »

idibidiart wrote: post #45
idibidiart wrote: post #40

"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…

Why is any critical feedback is being down voted? Is HN now just full of myopic mob mentality? Seriously?

So 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?

Re: Labella.js – placing labels on a timeline without overlap

#53

Post by shseham »

m4tthumphrey wrote: post #51
shseham wrote: post #50

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.…

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. Here it is: http://codepen.io/Pestov/pen/BLpgm

It is awesome. Thanks for sharing. Wish I had this a year before. We ended up using this library - https://github.com/cpettitt/dagre

Re: Labella.js – placing labels on a timeline without overlap

#54

Post by j_s »

iheartmemcache wrote: post #12

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…

Try http://gephi.org/features/

Re: Labella.js – placing labels on a timeline without overlap

#55

Post by harlanlewis »

idibidiart wrote: post #40

"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…

I didn't downvote, but isn't this comment just rearranged copy/paste from your previous comments?

Re: Labella.js – placing labels on a timeline without overlap

#56

Post by teleclimber »

m4tthumphrey wrote: post #51
shseham wrote: post #50

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.…

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. Here it is: http://codepen.io/Pestov/pen/BLpgm

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.

Re: Labella.js – placing labels on a timeline without overlap

#58

Post by shseham »

teleclimber wrote: post #56
m4tthumphrey wrote: post #51

Earlier quoted context omitted.

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. Here it is: http://codepen.io/Pestov/pen/BLpgm

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 givi…

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

Re: Labella.js – placing labels on a timeline without overlap

#59

Post by u02sgb »

idibidiart wrote: post #45
idibidiart wrote: post #40

"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…

Why is any critical feedback is being down voted? Is HN now just full of myopic mob mentality? Seriously?

Your tone I suspect.

Re: Labella.js – placing labels on a timeline without overlap

#60

Post by detaro »

idibidiart wrote: post #35
evolvedlight wrote: post #24

Earlier quoted context omitted.

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?
Post reply on HN