This is a gist version of the first part of the hanpuku demo. Apologies that this (and hanpuku) still use D3 v3!
In theory, to pull this off without hanpuku, you first would have to run the script with an (almost) empty SVG tag:
<svg width="792" height="612">
<g id="Layer_1"></g>
<g id="Layer_2"></g>
</svg>
If you inspect the result in Chrome's developer tools, you could right-click the SVG tag, choose "Edit as HTML", copy the text, paste it into a file, and then open that file with Illustrator for editing. The really tricky bit is the part where you save the SVG file using Illustrator. It will completely mess up your IDs, class names, and possibly grouping structures that you created with your code (it totally does in this example). If somehow you can sort that part out, you'd paste all the text inline in the HTML file (because you can't manipulate an SVG IMG with D3!).
Of course, in practice, Illustrator messes with things to the point that it's impossible to export an SVG that is still compatible with the script that originally created it.
Data source: http://www.georgelmurphy.com/berrics/
Original template from blockbuilder.org
https://d3js.org/d3.v3.min.js