Learning D3, Part One: Trial by fire

I’ve been putting off learning D3.js for a while now, primarily because I’ve isolated myself from fun distractions to complete my PhDA story for another day. But there will be one.. Alas, I’ve been on leave for a week, before I start full-time work in 2022. After 3 or 4 days of thesis-induced, delirium-riddled “rest”, I feel slightly renewed. At least enough to where I can face something quasi-adjacent to writing or programming, anyway. Not being one to sit idle for long, I’ve rolled up my sleeves and slowly started peeling back the layers of D3 as my motivation has ebbed and flowed.

I’ve been learning with the help of the Fullstack D3 and Data Visualization course. I bookmarked the course when it was originally released a couple years ago. It’s expensive, but Newline (the course provider) now offers regional pricingCan we please make this something all commercial platforms offer as standard? This would be life-changing for the Third World, where it’s common to earn 25-50% of our first-world counterparts, even in STEM. The course would’ve been a lost-sale, otherwise. Steam is a fantastic example of this model., so it’s much more accessible to me in South Africa than it was previously (around 10% of my monthly income which, while still distressing, is much less piercing than the 25% it would otherwise be). I’m currently two modules deep, and it’s been much better than any other D3 course I’ve tried.

For fun, here I’m sharing the homework for module two of the course: produce your own scatter plot, using one of the suggested “fun” datasets. For whatever reason, the first dataset I reached for was this witch trials dataset, which chronicles various accounts of witch trials in Europe, such as the number “witches” charged and tried, as well as the number sentenced to deathYes, the post’s title is a macabre double entendre. I was clearly in a cheery mood..

As you can see, the 1550-1700 was a frightfully horrendous span of human suffering. The accompanying paper for the dataset makes an interesting argument for why all this took place. In essence, they claim that it was “non-price competition” between the Catholic and Protestant churches vying for religious marketshare. In other words, this was middle-ages marketing dressed as a pious turf war to appeal to the populace. The women accused of witchcraft were merely there to bear the blame. Wild.

The code generating the above plot is available here.

Some comments from my early experience with D3 and the course:

• D3 is a masterclass in API design.
• Creating a dimensions object to hold your various dimensions and margins is really smart tip from the course.
• I like the pattern of fetch data → define dimensions → draw canvas → create scales → draw data → draw peripherals.
• Defining simple “Accessor” functions is also an excellent tip from the course.
• SVG coordinates being (0, 0) top, left is easily managed once you know a few of the common patterns.
• Yes, D3 is verbose, but I understand why – the flexibility is off the charts (pun!).
• Placing the y-axis label is particularly weird, since performing a CSS rotation transform subsequently “swaps” the behaviour of the x and y attributes.
• I wish Javascript wouldn’t silently fail.

Happy new year, Michael.