In my previous article, Meet D3: Data Driven Documents, I discussed my experience learning D3, in particular, discovering what D3 is not: it is not, strictly speaking, a SVG library. You will not find a function in the library to draw a circle or rectangle. Instead, you use its powerful selections interface to manipulate the DOM.
For example, assuming the DOM contains this element:
If we want to add a green circle with radius 10px at point (100,100), there is no draw-a-circle function in D3. Instead we do this:
After the above, the DOM will look like this:
<circle cx="100" cy="100" r="10" fill="green"></circle>
What I found confusing (and countless questions on the internets suggest I was not alone) was all the functions in the D3 library under the
d3.svg namespace. What do you mean
d3.svg.line doesn’t draw a line? It isn’t until you fully grok D3’s powerful data binding paradigm that those functions begin to make sense.
Looking at traffic to our site, it’s fascinating to see that this series of posts by Vlad on Angular.js continues to be among the most-read posts we’ve ever published. If you missed them the first time, do check them out.
AngularJS is a sweet web app framework. It comes with decent official documentation and samples, it looks superior among a large number of frameworks in an almost-real-world application test (the famous TodoMVC project), and there are cool presentations and screencasts about it all over the web.
The frustrating thing, I guess, is that all of us who make software want to make great software. Maybe there are exceptions to that deep down in the guts of some development shop in a government bureaucracy or the kind of Enterprise Development with Capital Letters shop that gives that world a bad name, I don’t know. The problem is that there are decades of experience on making great code, but much less so on how to make software that is great for our users.
It’s made worse by the fact that for most of us, the code is invisible to our bosses/clients, but as soon as you can see or touch or use something, everyone thinks that they’re an expert on How Things Should Be Done (and often decisions are made not on the basis of expertise or empirical data but by HIPPO). (more…)
A Horrifying Vision
I’m back in the office today after two days at an Internet of Things Expo in Manhattan. We’re clearly at a weird state where everyone in the world knows that something big is about to happen, but no one has any idea where or how. Lots of people were expressing frustration that there are no clear standards yet. COAP? MQTT? Turns out that there are already startups doing their best to sell services that will abstract away pesky details like underlying wire protocols. I even brought home a brochure from a company that’s claiming that they’ll be able to implement your entire IoT product vision without any software development effort at all! I think I’ve posted here before about how many times in my career as a developer I’ve seen this wave of ‘Programming without Programmers’ snake oil come back to life.
One panelist commented that it felt a lot like the early days of the internet all over again.
During another presentation, I saw how right he was. (more…)
There are many tutorials on the web to get one started using D3. Links to some of these works will follow later in this article. While they are all wonderful (and I thank each author for getting me over the steep D3 learning curve), most of these tutorials assume you know what D3 is, know you want to use it, and jump into the heart of D3 (data joins), which is kind of mind blowing and hard to wrap your head around.
Being on the flip-side of the learning curve, I look back at these tutorials and understand why the learning curve was so steep: D3 is not what you think it is (i.e, it’s not an SVG library), but is exactly as its name implies, a tool to drive data through your documents. D3’s heart is a mechanism to bind data to the DOM, including tools for handling deltas in a changing stream of data, which makes it a powerful tool for managing, in particular, visualizations. And that means dynamic, interactive SVG.
But even now I’m getting ahead of myself. I’m going to start from the beginning…