I recently finished an in house visualization project in which the original spec called for D3 to be used. This is no particular fault of D3, but for whatever reason, the d3 visualizations that our freelancer built (mostly simple chart types) was not only not working on pre-IE8 (which was to be expected), but was iffy in certain edge cases for IE 10.

So in a panic, I rewrote half of the suite in Google interactive charts, my goto solution for quick easy interactive charts. It was ok, except that GCharts has always had an awkward API, but even worse, was very hard to customize.

So in another fit of panic, I tried out Highcharts

http://www.highcharts.com

In a single day, I was able to rewrite all of our visualization code AND make them look like the photoshop specs...and the charts worked flawlessly across browser testing and apparently will work with IE 6.

I've known about highcharts for awhile, but have never seriously used them. Maybe it's because I'm an elitist douche who finds their homepage to be too reminiscent of early-2000s PowerPoint and Excel design...yet in terms of software, I could not be any more pleased with them.

Again, not a knock against D3, which I will continue to learn for the bespoke stuff I want to build. But in terms of interactive common charts, Highcharts is pretty slick...I'll likely never use Google Charts again.

edit: I should emphasize...the problems we had with D3 were not inherent to d3. But as you probably know, D3 is not well suited for common charts out of the box. I am only saying that if the situation does not call for D3, then Highcharts may work just fine for you right out of the box. Highcharts also has an extensive API for bespoke work but I did not venture into it

I cannot recommend highcharts enough. The API is extremely easy to use, and the documentation is excellent. Basically, each time I was wondering whether I could customize some feature, not only was highcharts able to do it, but I found it in the docs extremely quickly. Building a great looking custom graph takes very little time. It can't do too many super fancy things, but i still like it.

Just a caveat: we were using Highcharts for a prototype data analysis tool with sensitive data; unbeknownst to us, the export/print feature builtin to Highcharts actually ships the data back to highcharts.com to be rendered into the final output. Big no-no with the data we were dealing with, we ended up having to disable that feature.

That's interesting. I have yet to have any issues with D3 working in IE8 and above. Don't really care about anything below that but so long as it support SVG I would imagine it works.

And I've also found HighCharts extremely limiting. I ended up having to break things in HighCharts to meet some requirements. Granted that's a project problem not a HC problem, but D3 made much more sense for me.

To each their own :)

Let me be clear...for my own personal projects and works, D3 is the way to go. It makes the most sense for the crazy ideas I have, and from my limited perspective, just seems to be the best API among all viz libraries.

But in the domain of common chart type that areperfectly serviceable, clear, and customizable...there's not much choice. Google Charts seems like an easy win because hey, it's Google. It'll definitely be around for at least a few years, as it seems to be the dogfood tool for Fusion tables and other Google products.

But other than that, there's not much else that seems to be widely adopted. Raphael is more of a visualization library and seems to be going by the wayside after D3. Highcharts, in this context, seems to be an all-out winner compared to Google Charts, and against most of the D3-chart-wrappers that I've seen so far (Rickshaw, nvd3, etc).

Have you looked at bokeh? http://bokeh.pydata.org/plot_gallery/burtin_example.html

Note: I'm a core dev on bokeh.

I've heard of it but thought it was for the domain of python development...which is not a downside, per se, but doesn't always fit the project requirements of "here's some data, now throw some javascript on a page and show that data"

Highcharts is ideal if you don't have anything fancy going on anywhere close to your charts. The moment you do, it starts to go to pieces.

Also, the source code feels like an Escher painting. :( That was actually the first time I started wondering if I should find an IDE for Javascript.

There's nothing wrong with that at all. d3 is a visualization library, and if you want common charts, there are many options available. Personally I'm into nvd3 these days for my chart needs.

This is all fine and good because the data isn't changing, but what about when you decide to have updating data?

d3's "main" feature is data-binding, i.e. it associates a set of data to a set of DOM elements, and when the data changes, d3 figures out which DOM elements correspond to disappeared data, which data elements are new to the set , so that you can create new DOM elements, etc.

Ironically in this example, if you were to use d3 it wouldn't really change that much.

Actually, I can think of more common/simpler reasons to use D3 (axis and scaling helpers come to mind).

For updating data, the simplest (not most elegant) way to do it would be to just re-render the whole thing on data change -- which would be trivial to add.

The article isn't advocating not using D3. The point is to learn the concepts with mostly vanilla JS so that one can better utilize a tool like D3 and appreciate the things it gives you, like data-binding.

For updating data, the simplest (not most elegant) way to do it would be to just re-render the whole thing on data change

You are right that it is the simplest way to deal with updating data. But one of the nice parts of D3 is the built in transitions. They make for some eye-popping real-time visualizations!

I agree. This approach with vanilla JS acts as a good bridge to a library like D3. For me, D3 took a little effort to get off the ground but contains some very powerful features.

oh right, those are some pretty strong features too.

I guess it's more that at first glance this seems to be a trivialization of d3's feature-set, which isn't just "some almost finished graphs". I can appreciate something trying to teach people how to do it "by hand" too though.

Surely a bar chart could be made to work in Firefox…

Today's the day I learn that FF doesn't have event.toElement. Fixed.

I believe .toElement is deprecated, the spec says event.relatedTarget.