title: generate clipPaths for multiple elements in d3.js
body: <p>I am trying to create partially filled circles like the ones in the final NYT political convention visualization: <a href="http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html" rel="nofollow noreferrer">http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html</a> </p>
  
  <p><img src="https://i.stack.imgur.com/rUmoM.png" alt="enter image description here"></p>
  
  <p>The two clearest code examples I've found for clipPaths in d3 ( <a href="https://gist.github.com/1067636" rel="nofollow noreferrer">https://gist.github.com/1067636</a> and <a href="http://bl.ocks.org/3422480" rel="nofollow noreferrer">http://bl.ocks.org/3422480</a>) create individual div elements with unique ids for each clip-path and then apply these paths to single elements.</p>
  
  <p>I can not figure out how to go from these examples to a visualization with a unique circular clipPath for each element in a set of elements based on data values so that I can create my effect.</p>
  
  <p>Here is what I have <em>so far</em>:</p>
  
  <p>Given data with the following structure:</p>
  
  <pre><code>data = [        
      {value: 500, pctFull: 0.20, name: "20%"}, 
      {value: 250, pctFull: 0.75, name: "75%"},
      {value: 700, pctFull: 0.50, name: "50%"},        
  ]
  </code></pre>
  
  <p>1) Create a force diagram with a circle for each object in the dataset. The area of the circle is derived from the objects value.</p>
  
  <p>2) Calculate k (and h) from a proportion (pctFull) for each datapoint using the algorithm from the mbostock example <a href="http://bl.ocks.org/3422480" rel="nofollow noreferrer">http://bl.ocks.org/3422480</a></p>
  
  <p>3) Use k to generate a rect for each datapoint that covers the appropriate area of the circle.</p>
  
  <p>I think the illustration would be done if I could limit the visibility of each rect to its respective circle but this is where I am stuck.  I've tried a bunch of things, none of which have worked.</p>
  
  <p>Here's the jsfilddle: <a href="http://jsfiddle.net/G8YxU/2/" rel="nofollow noreferrer">http://jsfiddle.net/G8YxU/2/</a></p>
  
  <p><img src="https://i.stack.imgur.com/9Rb8M.png" alt="enter image description here"></p>