Data Visualization with JavaScript without D3
dry.ly
dry.ly
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.
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.
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.
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!
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
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
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 :)
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.
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).
Note: I'm a core dev on bokeh.