D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
akirchmyer
Full window
Github gist
A Pen by Andrew Kirchmyer.
<div class="wrap"> <img src="data:image/jpeg;base64,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"/></div>