

Data Visualization with JavaScript without D3 - foxbarrington
http://dry.ly/data-visualization-with-javascript-without-d3

======
rtpg
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.

~~~
foxbarrington
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.

~~~
capkutay
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!

------
danso
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](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

~~~
adeaver
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 :)

~~~
danso
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).

~~~
paddy_m
Have you looked at bokeh?
[http://bokeh.pydata.org/plot_gallery/burtin_example.html](http://bokeh.pydata.org/plot_gallery/burtin_example.html)

Note: I'm a core dev on bokeh.

~~~
danso
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"

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

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

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

