TheHeasman

Before my current job in data, I was a Data Journalist for 4-5 years. Frustrated by the limitations of Datawrapper and Flourish, I vowed one day to learn D3 so I could create the custom visuals I adored to look at in the wild. Things like scrollable streamgraphs, scrollable charts, and...okay I just liked scrollytelling.

Fast forward some years, and circumstances mean I finally had the chance to learn d3. It's been just over a year. I've hacked together a flourish scrollytelling story, and I recreated some of the flourish template charts I've used in my newsletter in d3... but nothing that had that oomph that I got from reading something from The Pudding or one of The Economist's in-depth essays.

I picked up The Odyssey for another writing project (not related to the movie, but I guess its in the zeitgeist) a few months ago, and while reading and listening to some lectures I was gripped by an essay. I also was gripped by a few cool visual animations I could do in d3 and svg to help tell the story.

A bit of furious coding, tweaking vector graphics, a crash course in animating things with CSS (yes, a bit of LLMs helped with that, but not as much as you think, this is an art project after all), and a bunch of rewrites and e voila - the project I'm most proud of so far.

Aristotle's golden mean.

I stand corrected. Thanks for pointing that out. Learned something new.

Ahhhhh. Thanks man. And totally nerding out here because YES. ANIMATIONS. Animations is why I fell in love with wanting to learn D3 in 2019. You can do things as you transition between data steps, that honestly, has been such a pain in the behind to try with anything else. I'm not a web developer. I'm a data guy.

I'll check that out. At the moment I'm just building up a bunch of template code which I'll re-use. But might check out solid.js.

Yaaasss. I think of it as being able to use a pencil to draw charts (and do creative stuff like Florence Nightingale's original polar area graph), instead of having a stencil that can draw things for you. It's a way to visually manipulate the DOM in a way if you're comfortable with data.

You can simply just use Tableau or Power BI and take screenshots otherwise.

Uh, there are arrow operators in JS. D3.JS in Action Third Edition exclusively uses arrow operators.

(Trust me. I don't know jack about JavaScript, I had to get through the MDN docs to understand what they were, and once I did, made a whole lot more sense).

Agreed. I fudged quite a lot in my post to make it accessible to the layman. Triee to explain to a UX designer I know that "D3 is a library for JavaScript that..." And I saw their brain switch off live in front of me.

Semantics matter more than literals sometimes.

*EDIT: Grammar. I was typing on my phone. Soz.