title: Text along circles in a D3 circle pack layout
body: <p>I am trying to label some circles in a <code>circle pack layout</code> with text that flows along the circle itself. </p>
  
  <p>Here is one experimental <a href="http://jsfiddle.net/VividD/At7p2/" rel="nofollow noreferrer">jsfiddle</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/6Ybqz.png" alt="enter image description here"></p>
  
  <p>As you can see, it is possible to render text along the circle, centered at its top. Though browser's rendering of curved SVG text is terrible. But let's say we don't care about it.</p>
  
  <p>Here is another <a href="http://jsfiddle.net/VividD/Es9N5/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/as0I8.png" alt="enter image description here"></p>
  
  <p>I would like to place curved labels on this graph, under these conditions:</p>
  
  <ul>
  <li>The circle represents a province (only depth==1) (BRITISH COLUMBIA, ALBERTA, and so forth)</li>
  <li>The sum of sizes of all children (in other words, number of parliament seats allotted) of the province is greater than 5.</li>
  <li>The name of the province should be all UPPERCASE.</li>
  </ul>
  
  <p>You can see some of my attempts in the code itself. I have been trying for hours. My main problem is that circles in the circle are now somewhere in X Y space, whereas, in the first jsfiddle, all circles have centers in coordinate system origin.</p>
  
  <p>Maybe you can help me by taking a fresh look at this.</p>
  
  <p>Underlying data is based on this table:</p>
  
  <p><img src="https://i.stack.imgur.com/Q2bJZ.png" alt="enter image description here"></p>
  
  <p><em>(NOTE: This is somewhat related to the question <a href="https://stackoverflow.com/questions/21231919/circle-packs-as-nodes-of-a-d3-force-layout">'Circle packs as nodes of a D3 force layout'</a> I asked the other day, however this is an independent experiment.)</em></p>
  
  <p>I decided to use regular SVG arcs instead of d3.svg.arc(). I still think it is a right decision. However, here is what I have now: :) <a href="http://jsfiddle.net/VividD/2hM3s/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/buWVV.jpg" alt="enter image description here"></p>