title: How to make a d3 pie chart responsive?
body: <p>I have a PIE chart. And it works okay but I can't make it work to be responsive and resizable . I need it to be compatible for a mobile browser and Ipad etc. </p>
  
  <pre><code>  &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
      &lt;div id="pie"&gt;&lt;/div&gt;
      &lt;button id="addData"&gt; Add Data &lt;/button&gt;
  
      &lt;script src="http://d3js.org/d3.v4.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script   src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="https://raw.githubusercontent.com/benkeen/d3pie/0.2.1/d3pie/d3pie.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var data = [
                { label: "1", value: 1 },
                { label: "2", value: 4 },
                { label: "3", value: 3 }
              ];
  
              var pie = new d3pie("pie", {
                data: {
                  content: data
                }
              });
  
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt; 
  </code></pre>
  
  <p>I tried to wrap it to bootstrap but this doesn't make it fully resizable </p>
  
  <p>How can I make it resizable depending on mobile device or desktop  ?  </p>
  
  <p>(PS: I'm using an example from here <a href="https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie" rel="nofollow noreferrer">https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie</a>) </p>