5 ms·

Data Visualization with JavaScript without D3

48 points by foxbarrington 13y ago

rtpg 13y ago
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 13y ago
  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.
  - tphummel 13y ago
    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.
  - rtpg 13y ago
    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.
  - capkutay 13y ago
    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 13y ago
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 13y ago
  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 :)
  - saraid216 13y ago
    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.
indubitably 13y ago
Surely a bar chart could be made to work in Firefox…
- foxbarrington 13y ago
  Today's the day I learn that FF doesn't have event.toElement. Fixed.
  - indubitably 13y ago
    I believe .toElement is deprecated, the spec says event.relatedTarget.

48 points by foxbarrington 13y ago

rtpg 13y ago

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 13y ago
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.
- tphummel 13y ago
  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.
- rtpg 13y ago
  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.
- capkutay 13y ago
  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 13y ago

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 13y ago
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 :)
- saraid216 13y ago
  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.

indubitably 13y ago

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

foxbarrington 13y ago
Today's the day I learn that FF doesn't have event.toElement. Fixed.
- indubitably 13y ago
  I believe .toElement is deprecated, the spec says event.relatedTarget.