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