Create filled circle to visualize data using svg

10 years ago, November 29, 2013
Reading time: 2 mins
Here is how to tutorial on creating filled circle to visualize data using svg and tiny bit of javascript.
Use Two circles one above another in a <g> tag.
Fill one with the color you wish and another with white or may be your background color just to make it look like its empty in there.
Then clip the later one using <clippath> with rectangle in it, assign radius few pixel less than the earlier circle.
Place clip path at the top left .. assign width equal to the diameter of the circle and height will be defined by your data.
The data will act reversible to the filling so you may subtract the actual data from your max. EG: if data is 20/100 do 100-20 so u ll get 80 in this way the empty part will be 80 and filled will be 20.
You may switch between height or width to switch between vertical or horizontal filling axis.
The HTML should look like this.


<svg height="200">
<g transform="translate(100,100)">
<circle fill="#f60" r="50"></circle>

<clippath id="g-clip">
<rect height="50" id="g-clip-rect" width="100" x="-50" y="-50">
<circle clip-path="url(#g-clip)" fill="#fff" r="47"></circle>


I have created a jsfiddle to illustrate this at:

Sajin Maharjan Freestyle Go Go Go Lyrics
Using gradient stops and transparency to dynamically fill circle partially in svg using d3js