Update D3 example with improved version

[JonnyBurger]

From message posted on Discord by d3ch0

Ok, here is the updated version, cleaned up and added a couple of comments. When rendered, both the original and refactored version of the video output a file with the exact same sha256 sum:

a4051dbc731baebcd896b6ec6182750012dfbe5e14ad6ddd99f2c6220363b02b

https://gist.github.com/virtuallyunknown/27d19f38dccb9e19245a9bcd2a95f447

Cheers!

[JonnyBurger]

Done https://github.com/remotion-dev/d3-example/commit/09f767a585c2c1099a5bb086a043de8909e7e8c7

[virtuallyunknown]

Great stuff @JonnyBurger, and I'm happy if you found this helpful!

Also, just want to put this here in case someone discovers it later, but last week I also found this can be further optimized and instead of doing if checks like these:

if (!svg.select('.x-axis').node()) {  }
if (!svg.select('.y-axis').node()) {  }

We could just create these elements in advance within the JSX itself:

return (
    <svg ref={svgRef}>
        <g className='x-axis'></g>
        <g className='y-axis'></g>
    </svg>
);

Then we no longer use d3.append but d3.select:

g.select<SVGGElement>('g.x-axis')
    .call(d3
        .axisBottom<Date>(scaleX)
    );

This might have some performance implications, but I really doubt it would make noticeable difference in most cases. Anyway, further details can be found in this article.