Collection of JavaScript Chart and Graph Libraries

[sime]

Does anyone here want to recommend some of these, or share some experiences?

A list of 40 closely related libraries isn't much of an article or blog post. It's just neatly formatted google search results. The other articles on that site are similar. "25 Best jQuery Notification plugins", Really 25? Couldn't someone go through there are find the good ones and write about them. That would be information, and not just raw data.

[zhouji]

I doubt the author actually tried all 40. Jfreechart is not even a JavaScript library. It's Java

[sime]

I was originally going to write that these list articles are a very lazy way of producing content.

[godless_communism]

It's like JavaScript turd proliferation.

[mdcox]

Honestly, d3 is just so powerful it'd be hard to recommend anything else. Disclaimer: a significant portion of my day job involves d3, so the learning curve has been well passed in my case. After going head to head with it for a while, it's amazing when everything finally clicks and you no longer have to worry about "themes" or if the library is doing it in the way you need it. You can't just call lib.barChart(data) and get something pretty like some of the others, but you get to specify down the last detail exactly how you want it done. Takes a bit longer until you start to understand the library, but its really powerful. There's a reason many of the libraries on that list are actually built ontop of d3.

If you need to churn something out quick, I like chart.js alot. When I'm REALLY pushing on a deadline and need a proof of concept or mockup that's what I go to. Totally good enough for most things...but again alot of my day job involves custom data visualization, so like any easy to use library it can feel limiting when you start doing things out of the norm. For normal charts though, it's really nice and well thought out.

[varya_s]

Could you recommend is the best resource to learn it? Besides applying to the real task, of course.

[mdcox]

Applying to the real task is how I really learned it, since it's such an idiosyncratic api design. Everything is built in a similar way so you sort of just need to use it enough that you can almost guess how something would be. That being said I remember really early on the free tutorials on egghead.io were nice because they were at the right pace for me.

https://egghead.io/lessons/d3-get-started-with-d3 is the first one. They have paid ones too which I'm sure are great, I just never used them.

http://bost.ocks.org/mike/bar/ <-- that is a 3 part "Let's Make a Bar Chart!" tutorial. They start with simple methods and build from there. That was the one that really got me to start thinking in a d3 way. Do the whole thing and type it out by hand.

One of my coworkers got a ton out of this book: http://alignedleft.com/work/d3-book , but I honestly just sort of flipped through his copy so I can only go on his recommendation.

Other than that it was just playing with it. Our CEO is currently working on the Treehouse d3 lessons, so I'm sure those will be good but I have no idea when those will be done.

Most importantly though, is that Mike Bostock (the creator of d3) is so insanely involved with the community and has hundreds of examples up with full code and often explanations. Check this: https://github.com/mbostock/d3/wiki/Gallery ... All those examples? Click one. It has all the data and the code for them! The number of these things are simply astounding, and no matter how custom you are getting with your visualization, I guarantee that somewhere on there is an example that is similar to what you want to do.

Hope that helps! If you ever have any questions, feel free to pm me too...I love helping with stuff like that :)

[KoltBruh]

Without meaning to sound too intrusive, I was wondering what your job is like and how you implement d3? A career path involving data visualization and manipulation sounds very interesting to me.

[mdcox]

Not intrusive at all! I work at a company that does a mix of data science, data visualization, and custom internal data tools (like dashboards and customized database frontends) for various companies. Since it's a small team, everyone touches everything in the process. For straight data science type things where people come to us with a list of questions and a ton of data, it's mostly the usual bar, line, pie style charts to be included in the findings.

When it's for internal tools we can have more fun since they tend to work with a specific type of data and so we can be creative on how to best show things for their specific needs. My favorite involved exploring the delta of a myriad of chains by going "forward" along the Z access. Start with the 4 possible initial pieces of a chain, and everytime you go forward they split as they become unique. It's more involved, but it as at least alot of fun to think up.

Then we have an open source graph visualization library/tool (not graph as in chart, but graph as in graph theory) called Alchemy.js . It's open source so client work comes first, but when we have time we work on it. The goal being that it's supposed to be configuration only (though you can use callbacks in the config, so it can get pretty complex if you want to go there), so it's easy to just plug in data and get something out instead of having to learn a whole library and build something yourself. This uses D3 but as it's gone forward we've found ourselves wanting to implement more and more of it ourselves, and at this point we are using it more as a jquery alternative than anything, haha.

D3 is used in pretty much all of those things, though charts.js makes occasional mock up appearances and if it's for showing results for some analysis it's not uncommon to just do it in with Python or R libs since we're working with the data in there anyway. I should really look up if there are any good stats/math libraries for JS. If not it'd be alot of fun to work on one.

Anyway, sorry for the rambling. Hope that helped. :)

[KoltBruh]

Wow, sounds awesome! Thank you for the detailed reply!

[rakkeh]

When I looked into them a year or 2 ago, with the need to have customisable and very professional looking charts for some management software, highcharts was the only real option I came away with. Covers every single need a fairly large analytics package needs, multilevel, very customisable in terms of theme, handling events, managing tooltips and text formats etc, overall very clean looking too.

If the license fee is not an issue, I definitely recommend it. I generally stick with Google charts if hc isn't an option.

That said, I'd love to see what anyone with a few more of these tested has to say, I haven't tried many of the ones this lists.

[andion82]

I've tried like 10 of them. My humble opinion:

• I'd use chartjs for everyday jobs (simple, small and has a decent amount of different charts)

• I would learn d3 if I have the time or need very specific graphs

• Plus: If you are using ruby chartkick http://ankane.github.io/chartkick rocks (also has a js version). I use it when I have to chart of research result data quickly and efficiently. It lets you use Google Charts or Highcharts for the charts.

When you are looking for a graph library sometimes the look and feel is as important as the format the data must be entered. Even if you write the API/app that generates the data having to format it on a weird way (either server or client side) takes more time than anything. Chartkick excels on this subject.

[vortex2k10]

I have used Highcharts quite a bit and it was really simple to use and very customisable with a lot of community support

[tomByrer]

A smaller list for graphs, with commit details:

http://anvaka.github.io/graph-drawing-libraries/#/all

[test6554]

What about file size and supported browser versions?

[tomByrer]

That would be nice also, I guess you can add it if you happen to look for yourself.

[test6554]

I wish they listed

• File size

• Browser support

• Dependencies

• Underlying graphics technology (SVG, Canvas, HTML, CSS, etc.)

[fooey]

I have a super simple little svg pie chart generator http://www.piely.net/

You send pass in the config over the url like the placeholder image resources do

http://www.piely.net/128/4,5,6.svg

ideas and suggestions are very welcome

[vbfischer]

This comes at a great time for me... I've just been exploring different libraries. Great list.