Using SVG Circles For Charting
summary
Builds circular progress indicators with plain SVG and CSS using stroke widths and stroke-dasharray math, not JavaScript, and demonstrates live edits. Uses formula 2πr with a worked example: radius 10 and stroke-width 10 gives circumference 62.8318 so half a circle is 31.4159. Shows inner and outer donuts, tweaks dash offsets, and recovers from a broken live demo to render correct halves and gaps.
AI-written summary · about
related talks
27mSVG charts and graphics with Ruby
39mSVG Charts and Graphics with Ruby
12mBattle-Tested Techniques for Animation & Data Viz
29mSVGs beyond mere shapes
47mSVGs beyond mere shapes
29m"Hand Coded Artisanal Data-Visualization"
24mBeyond the bar graph: Creative visualization with D3.js
51mD3 js: Easy and flexible data visualisation using Web standards