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

NVD3.js: re-usable charts for d3.js

novus.github.com

Post reply on HN
Print view View original

41–50 of 50 posts

Re: NVD3.js: re-usable charts for d3.js

#41

Post by TeMPOraL »

bobmonteverde wrote: post #22
TeMPOraL wrote: post #18

Very nice, I'll be definitely looking into it closer. [1] seems to have a bug. When you disable a particular line by clicking it on the graph legend, if you attempt to disable another line you end up re-enabling the first one. http://novus.github.com/nvd3/ghpages/line.html

Not a bug, I did this by design. When you try to disable the last series, all series become enabled. There's no point, IMO, of disabling all series.

There's no point in keeping all series disabled, though I can imagine it being useful as an intermediate step.

Let's say I play around with some series A, B, C and D. I disable all except B and then realize that I want to see only A instead. So now I have two options, that IMO should lead to the same final state: I can either disable B and enable A, or enable A and disable B. In current implementation, the first option leads to re-enabling all series, while second option leads to desired state of having only series A visible. Now one of those two proposed actions may seem redundant until you realize that the choice between them depends on subconsciously analyzed things like mouse position ("is my mouse closer to series A or series B?") and having both available would, in my opinion, help in keeping user in the flow.

I understand it's only a minor issue. Current implemetation is more complex in philosophical sense that it does Surprising Magic instead of the Obvious Thing, and that bugs me just a little.

Or maybe I'm just whining because I got used to how HighCharts.js does this. ;).

Re: NVD3.js: re-usable charts for d3.js

#42

Post by bobmonteverde »

TeMPOraL wrote: post #41
bobmonteverde wrote: post #22

Earlier quoted context omitted.

Not a bug, I did this by design. When you try to disable the last series, all series become enabled. There's no point, IMO, of disabling all series.

There's no point in keeping all series disabled, though I can imagine it being useful as an intermediate step. Let's say I play around with some series A, B, C and D. I disable all except B and then realize that I want to see only A instead. So now I have two options, that IMO should lead to the same final state: I can either disable B and enable A, or enable A and disable B. In current implementation, the first opti…

Understandable, but not something I'll be implementing (though would be pretty easy to fork and edit.. that piece of code is VERY straight forward).. but would be too much of a pain in the ass to me, when the user could easily in A (after just having B enabled) then disable B.

Like you said, you're jsut used to high charts.... by no means was this project designed after high charts (in fact haven;t looked at high charts in over a year). Working off of d3 examples, Tufte principles, and whatever my gut decides makes sense at the time.

Re: NVD3.js: re-usable charts for d3.js

#43

Post by katabatic »

bobmonteverde wrote: post #40
katabatic wrote: post #35

Earlier quoted context omitted.

I recently evaluated lots of them for a dashboard project, and settled on flot. I built alternate working implementations in Flotr2 and Rickshaw, and less thoroughly evaluated Dygraphs, Envision, RGraph, elycharts, grafico, AwesomeChartJS, Morris.js, and Highcharts. Highcharts is very nice, but commercial (although there's a free license for non-commerical work available). I settled on flot eventually because it has…

We were using flot when I started. As soon as I found out about protovis I redid all our charts (and boy was everyone happy with that improvement). Shortly after that, d3 came out, in which case I ported all the protovis charts to d3. NVD3 is my second go at a collection of charts for d3.js... it was re-done from the ground up, and hopefully is much more true to d3's style than my previous attempt.

I might have used protovis for my first iteration, if not for the fact that I discovered it just as d3 was introduced :)

I'm normally a server guy, but needed a good dashboard for our OpenTSDB metrics project, so I started diving into client-side JS -- going whole-hog on d3 without a good chart lib on top of it seemed to be a bit too steep of a learning curve. But I do love the possibility of open-ended charts, where we can dip into the power of d3 at will when we need something more custom.

Like DiabloD3 commented below, I feel like doing an end-zone victory dance :). Nice work.

Re: NVD3.js: re-usable charts for d3.js

#44

Post by rurounijones »

boothead wrote: post #10
rurounijones wrote: post #6

They look great and we can never have enough cool JavaScript graphing technologies. However the performance of these graphs is currently too slow for me. When I hover my mouse over a line the response is very stuttery while flot and highcharts are smooth as silk.

This must be something to do with the way they've set the transitions up (i.e. they've built in some delay). I've had no performance problems with d3. Do you mean when the tooltip fades in or something else?

Yes, it is the transitions of the tooltips, the circles that appear when you hover over a datapoint and the colour changes.

All of these stutter sometimes, especially if you are moving your mouse to a point and happen to trigger a few other events on the way.

Firefox 13.0, Kubuntu 10.04 Intel Xeon CPU X3450 @ 2.67GHz 4 core 16GB RAM

Re: NVD3.js: re-usable charts for d3.js

#45

Post by [deleted] »

j4mie wrote: post #11
kfk wrote: post #7

Somebody has to really manage to make d3 run on 7<=IE<10. This is a powerful technology for businesses, it may even replace Power Point (the famous software for torture) for some things (especially those that are updated often since you still do this manually in PP). But it needs to run decently and painlessly in IE.

It would be great to actually figure out the steps required to make this happen. I'm not familiar with D3's code at all, but I know that it renders to SVG. Would it be possible to easily "plug in" Raphael's SVG/VML abstraction?

[deleted]

Re: NVD3.js: re-usable charts for d3.js

#46

Post by angusgr »

bobmonteverde wrote: post #22
TeMPOraL wrote: post #18

Very nice, I'll be definitely looking into it closer. [1] seems to have a bug. When you disable a particular line by clicking it on the graph legend, if you attempt to disable another line you end up re-enabling the first one. http://novus.github.com/nvd3/ghpages/line.html

Not a bug, I did this by design. When you try to disable the last series, all series become enabled. There's no point, IMO, of disabling all series.

I found this counter-intuitive as well, for the little it's worth. My intuition was "Wow, there's a lot of lines on this graph. I'll clear everything off and then add things one at a time to see how they compare. Click, click, click wait, what happened there?"

I get that it's just a demo though, not behaviour the end developer has to put in their app. It's a really nice set of demos overall. :)

Re: NVD3.js: re-usable charts for d3.js

#47

Post by jackta101 »

bobmonteverde wrote: post #42
TeMPOraL wrote: post #41

Earlier quoted context omitted.

There's no point in keeping all series disabled, though I can imagine it being useful as an intermediate step. Let's say I play around with some series A, B, C and D. I disable all except B and then realize that I want to see only A instead. So now I have two options, that IMO should lead to the same final state: I can either disable B and enable A, or enable A and disable B. In current implementation, the first opti…

Understandable, but not something I'll be implementing (though would be pretty easy to fork and edit.. that piece of code is VERY straight forward).. but would be too much of a pain in the ass to me, when the user could easily in A (after just having B enabled) then disable B. Like you said, you're jsut used to high charts.... by no means was this project designed after high charts (in fact haven;t looked at high cha…

I would argue this has nothing to do with being used to highcharts and in fact is how a user would think. A chart library that follows anything from Edward Tufte should allow a user to make the chart as simple as they require it.

If a user has 10 series, and disables all but 1 to look at it and then decide to look at another in isolation, he would, in his naivety as a user, perhaps disable the one he's looking at before enabling the one he wishes to look at. After-all, he's looking at one at a time, so having two on at once could seem wrong to him for his current process. Disabling that one isn't disabled, nor does it blank the chart. Instead it does something completely unexpected, and is in no way predictable. It enables all 10 series again.

If you're designing a charting library that you want to be usable then it should follow user expectation. And no user will expect that turning off all series will in fact re-enable them all. It would make more sense to disable turning off all the series and requiring one on at any one time.

Re: NVD3.js: re-usable charts for d3.js

#48

Post by rkthkr »

SkyMarshal wrote: post #19
rkthkr wrote: post #13

Anyone got any examples using NVD3.js or d2.js to render charts from constantly updating data? Like reading a websocket stream or query a json source every 2s and updating chart.

What is this d2.js? I'm finding nothing about it on Google or Github...

d3.js! 2 is too close to 3 :)

Re: NVD3.js: re-usable charts for d3.js

#49

Post by rkthkr »

yesbabyyes wrote: post #15
rkthkr wrote: post #13

Anyone got any examples using NVD3.js or d2.js to render charts from constantly updating data? Like reading a websocket stream or query a json source every 2s and updating chart.

This tutorial guides you step by step through a bar chart with dynamic updates (the link is to part 2, which deals with the updating): http://mbostock.github.com/d3/tutorial/bar-2.html

Perfect, thanks!

Re: NVD3.js: re-usable charts for d3.js

#50

Post by bobmonteverde »

OK, I should be allowed to post again (At least I hope so).

Let me know if you guys have any questions and/or feature requests. If I like the feature, I will implement it right away.. or if its a very bug feature, I'll at least put it in the TODO list.

Also would love to hear things people don't like about the library... that will be much more useful than what people like. No promises that I'll listen.. but I'll try to.

Post reply on HN