5 ms·

Rickshaw: A JS interactive charting library based on D3

135 points by idan 14y ago

pooriaazimi 14y ago
(Completely irrelevant, but 2 minutes ago I found out that 'gnuplot' has a 'canvas' terminal. Check the demoes here: http://gnuplot.sourceforge.net/demo_canvas_4.6 http://gnuplot.sourceforge.net/demo_canvas_4.6 - Not as pretty as Richshaw or D3, but very helpful if you don't have time to convert your plots to the new syntax)
eric_bullington 14y ago
Well-done! I was wondering when someone would do this. d3 is brilliant -- I use it and find it incredibly powerful -- but it's fairly low level (although Mike Bostock may disagree). I'm happy someone put together a higher-level interface. My only suggestion would be to revisit some of the colors used in your visualizations. Obviously, we all have different opinions about color, and you may be perfectly content with your choices. But if you ever revisit your color schemes, some useful resources to consider are: http://colorbrewer2.org/ http://colorbrewer2.org/ http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp
- indubitably 14y ago
  To be fair, Mike has repeatedly talked about the importance of higher-level charting libraries in the d3 Google group.
swah 14y ago
This looks very nice, but I have to say its a little bit slow here (last Chrome, low-end comupter but not worse than users computer).
- douglashunter 14y ago
  That's surprising. Is it the example here (http://code.shutterstock.com/rickshaw/examples/extensions.html http://code.shutterstock.com/rickshaw/examples/extensions.ht...) that is slow? How is it slow (when you click on controls to customize the view, drag a slider, mouse over plots)? When it's slow for you is there something else on your computer chewing up a bunch of CPU? A lot of the hard work is being done by d3, which is pretty well optimized for the tasks its doing. I'd be surprised, even on a 4-5 year old commodity desktop, to see laggy or jumpy behavior with fewer than a million or so plot points.
  - cscheid 14y ago
    > fewer than a million or so plot points. If you're using an SVG renderer, you'll get significant slowdown with many fewer than 10^6 points. It's not D3's fault. SVG backends build a complete DOM for the representation (so using JS with it is trivially simple), but browsers do not appear optimized for million-node trees. In my experience, you'll see noticeable slowdowns starting with ~30k points or so. If you're using canvas, that's an altogether different story. (But then you're stuck doing object location yourself, for example)
douglashunter 14y ago
[full disclosure, I used to work with the fine folks at Shutterstock, who created Rickshaw] Rickshaw has been talked about here before, when it was released (original thread: http://news.ycombinator.com/item?id=3340089 http://news.ycombinator.com/item?id=3340089) It's nice to see Rickshaw getting some love with the new scatterplot renderer based a subclassable base renderer, a test suite, and an updated home page. Nice work!
viandante 14y ago
This looks good, what about the non standard browsers (IE<9, what did you think?)? I have been looking into d3 a lot lately, but if there is no good support for IE, then no way this can be used for business apps.
- snorkel 14y ago
  Agree. I'm not seeing any graphs in IE8. Graphs is for business, and businesses love their bad browsers.
  - viandante 14y ago
    Graphs is for business Agree on this. Especially the shiny and good looking ones. For a technical crowd you can stick with a black line. For business the format is as important as the substance. Therefore, I can't see lots of applications for graphs libraries that don't support that piece of work that is IE.
  - kausikram 14y ago
    From what i read rickshaw is based on d3. So if rickshaw essentially works as a high level wrapper around d3, then there is a possibility that we can get it working on older IEs with the usual d3 hacks.
    - viandante 14y ago
      A link to some of those hacks?
- willwagner 14y ago
  D3 doesn't support IE (or at least it didn't 6 months ago when we looked into using it).
fomojola 14y ago
Entirely random question, but is the CSS used to generate the homepage completely custom, or off a preset like Bootstrap? Looks quite nice.
- Zikes 14y ago
  I just did a view source to see if I could determine that and found some interesting results. It does appear to be custom CSS, and very minimal, but what surprised me was that the HTML was as minimal as possible as well. There are no HTML, HEAD, or BODY tags. Maybe not technically valid, but an interesting way to save a few bytes.
  - orftz 14y ago
    It is valid HTML5. <html>, <head> and <body> will be inserted by any HTML5-compliant browser while constructing the DOM. However, it'll result in a broken page if parsed by an old browser. See http://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags http://stackoverflow.com/questions/5641997/is-it-necessary-t...
  - jurre 14y ago
    As mentioned by orftz it is valid HTML5, but what I did find interesting is that the footer is being inserted with javascript, does anyone know the reason for that?
    - Zikes 14y ago
      My best guess is that it becomes a client-side include, making it easier to change one file and propagate out to all the pages without any server-side processing. Seems a bit silly for so small a thing, though.
    - deleted 14y ago
      [deleted]
mburshteyn 14y ago
Would love to see some animation options.
jurre 14y ago
This looks really great, I've been looking for a fast charting library for my current project. I had been using flot but it's just a little too limiting. I was looking into building something like this http://square.github.com/crossfilter/ http://square.github.com/crossfilter/, but I guess now I won't have to. I'll look into adding the handlebars that they have there to filter though, that's the one thing that's missing from Rickshaw imo.
cmaxwell 14y ago
Using jquery on my current project throughout the site. For this reason I choose flot for my graphs...if I was to switch to rickshaw then I would need to use D3 + Rickshaw + Jquery. That is a lot of javascript library overhead. :-/
- indubitably 14y ago
  What you get for the amount of code that makes up d3 is a bargain in my book.

135 points by idan 14y ago

(Completely irrelevant, but 2 minutes ago I found out that 'gnuplot' has a 'canvas' terminal. Check the demoes here: http://gnuplot.sourceforge.net/demo_canvas_4.6 http://gnuplot.sourceforge.net/demo_canvas_4.6 - Not as pretty as Richshaw or D3, but very helpful if you don't have time to convert your plots to the new syntax)

eric_bullington 14y ago

Well-done! I was wondering when someone would do this. d3 is brilliant -- I use it and find it incredibly powerful -- but it's fairly low level (although Mike Bostock may disagree). I'm happy someone put together a higher-level interface. My only suggestion would be to revisit some of the colors used in your visualizations. Obviously, we all have different opinions about color, and you may be perfectly content with your choices. But if you ever revisit your color schemes, some useful resources to consider are: http://colorbrewer2.org/ http://colorbrewer2.org/ http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp

indubitably 14y ago
To be fair, Mike has repeatedly talked about the importance of higher-level charting libraries in the d3 Google group.

swah 14y ago

This looks very nice, but I have to say its a little bit slow here (last Chrome, low-end comupter but not worse than users computer).

douglashunter 14y ago
That's surprising. Is it the example here (http://code.shutterstock.com/rickshaw/examples/extensions.html http://code.shutterstock.com/rickshaw/examples/extensions.ht...) that is slow? How is it slow (when you click on controls to customize the view, drag a slider, mouse over plots)? When it's slow for you is there something else on your computer chewing up a bunch of CPU? A lot of the hard work is being done by d3, which is pretty well optimized for the tasks its doing. I'd be surprised, even on a 4-5 year old commodity desktop, to see laggy or jumpy behavior with fewer than a million or so plot points.
- cscheid 14y ago
  > fewer than a million or so plot points. If you're using an SVG renderer, you'll get significant slowdown with many fewer than 10^6 points. It's not D3's fault. SVG backends build a complete DOM for the representation (so using JS with it is trivially simple), but browsers do not appear optimized for million-node trees. In my experience, you'll see noticeable slowdowns starting with ~30k points or so. If you're using canvas, that's an altogether different story. (But then you're stuck doing object location yourself, for example)

douglashunter 14y ago

[full disclosure, I used to work with the fine folks at Shutterstock, who created Rickshaw] Rickshaw has been talked about here before, when it was released (original thread: http://news.ycombinator.com/item?id=3340089 http://news.ycombinator.com/item?id=3340089) It's nice to see Rickshaw getting some love with the new scatterplot renderer based a subclassable base renderer, a test suite, and an updated home page. Nice work!

viandante 14y ago

This looks good, what about the non standard browsers (IE<9, what did you think?)? I have been looking into d3 a lot lately, but if there is no good support for IE, then no way this can be used for business apps.

snorkel 14y ago
Agree. I'm not seeing any graphs in IE8. Graphs is for business, and businesses love their bad browsers.
- viandante 14y ago
  Graphs is for business Agree on this. Especially the shiny and good looking ones. For a technical crowd you can stick with a black line. For business the format is as important as the substance. Therefore, I can't see lots of applications for graphs libraries that don't support that piece of work that is IE.
- kausikram 14y ago
  From what i read rickshaw is based on d3. So if rickshaw essentially works as a high level wrapper around d3, then there is a possibility that we can get it working on older IEs with the usual d3 hacks.
  - viandante 14y ago
    A link to some of those hacks?
willwagner 14y ago
D3 doesn't support IE (or at least it didn't 6 months ago when we looked into using it).

fomojola 14y ago

Entirely random question, but is the CSS used to generate the homepage completely custom, or off a preset like Bootstrap? Looks quite nice.

Zikes 14y ago
I just did a view source to see if I could determine that and found some interesting results. It does appear to be custom CSS, and very minimal, but what surprised me was that the HTML was as minimal as possible as well. There are no HTML, HEAD, or BODY tags. Maybe not technically valid, but an interesting way to save a few bytes.
- orftz 14y ago
  It is valid HTML5. <html>, <head> and <body> will be inserted by any HTML5-compliant browser while constructing the DOM. However, it'll result in a broken page if parsed by an old browser. See http://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags http://stackoverflow.com/questions/5641997/is-it-necessary-t...
- jurre 14y ago
  As mentioned by orftz it is valid HTML5, but what I did find interesting is that the footer is being inserted with javascript, does anyone know the reason for that?
  - Zikes 14y ago
    My best guess is that it becomes a client-side include, making it easier to change one file and propagate out to all the pages without any server-side processing. Seems a bit silly for so small a thing, though.
  - deleted 14y ago
    [deleted]

mburshteyn 14y ago

Would love to see some animation options.

jurre 14y ago

This looks really great, I've been looking for a fast charting library for my current project. I had been using flot but it's just a little too limiting. I was looking into building something like this http://square.github.com/crossfilter/ http://square.github.com/crossfilter/, but I guess now I won't have to. I'll look into adding the handlebars that they have there to filter though, that's the one thing that's missing from Rickshaw imo.

cmaxwell 14y ago

Using jquery on my current project throughout the site. For this reason I choose flot for my graphs...if I was to switch to rickshaw then I would need to use D3 + Rickshaw + Jquery. That is a lot of javascript library overhead. :-/

indubitably 14y ago
What you get for the amount of code that makes up d3 is a bargain in my book.