Global Heat Map - A simple project with D3 & React on CodePen

Interesting. I've recently started using d3 for a work project and one thing that's really bugging me is that the markup generation feels really clunky. It's like going back to the dark days of jQuery with chained methods adding attributes etc. and it's not necessary when you already have a framework available to do it for you.

So instead I've just been using d3 methods where they're useful (mostly in terms of shaping data into an appropriate structure) and writing markup directly in template code. The main downside to this approach is that documentation, examples and tutorials tend to use the ugly syntax. The advantage is that I don't import code I don't need; I'm reducing direct DOM manipulation; I'm using a consistent approach for markup generation across the project and it's far easier to see what the markup is doing, so it's easier to work with.

I'd recommend trying this out ;)