title: How to draw a matplot lib (python) polar scatter chart in django?
body: <p>I am writing a web application where I have to draw a polar scatter chart(<a href="https://matplotlib.org/examples/pie_and_polar_charts/polar_scatter_demo.html" rel="nofollow noreferrer">https://matplotlib.org/examples/pie_and_polar_charts/polar_scatter_demo.html</a>) in the webpage. The polar scatter chart is generated using python matplotlib and then is converted into JSON format and displayed on the webpage using mpld3 library(<a href="https://mpld3.github.io/install.html" rel="nofollow noreferrer">https://mpld3.github.io/install.html</a>).</p>
  
  <p>Here is my code to show an empty polar scatter chart:</p>
  
  <pre><code>&lt;script src=".../mpld3/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src=".../mpld3/mpld3.v0.3.1.dev1.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="col-sm-7"&gt;
  &lt;div id="fig01"&gt;&lt;/div&gt;
  &lt;script&gt;
     mpld3.draw_figure("fig01",{"id": "el44281963893827960", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}], "height": 480.0, "data": {}, "width": 640.0, "axes": [{"yscale": "linear", "id": "el44281963940408456", "axesbg": "#FFFFFF", "xdomain": [0.0, 6.283185307179586], "images": [], "xlim": [0.0, 6.283185307179586], "axesbgalpha": null, "collections": [], "ydomain": [0.0, 4.0], "markers": [], "texts": [], "xscale": "linear", "lines": [], "sharey": [], "paths": [], "axes": [{"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 8, "position": "bottom", "tickformat": ["3", "2", "1", "8", "7", "6", "5", "4"], "tickvalues": [0.0, 0.7853981633974483, 1.5707963267948966, 2.356194490192345, 3.141592653589793, 3.9269908169872414, 4.71238898038469, 5.497787143782138]}, {"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 4, "position": "left", "tickformat": ["Gen 1", "Gen 2", "Gen 3", ""], "tickvalues": [1.0, 2.0, 3.0, 4.0]}], "zoomable": true, "bbox": [0.22375000000000006, 0.10999999999999999, 0.5774999999999999, 0.77], "sharex": [], "ylim": [0.0, 4.0]}]} );
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem here is that the graph is generated as a normal chart and not as a polar scatter chart which is circular shaped.</p>
  
  <p>Here is that I get after rendering my webpage:</p>
  
  <p><a href="https://i.stack.imgur.com/yVzFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yVzFi.png" alt="enter image description here"></a></p>
  
  <p>Where is this is what I am expecting(generated from matplotlib):</p>
  
  <p><a href="https://i.stack.imgur.com/gTwgb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gTwgb.png" alt="enter image description here"></a></p>
  
  <p>Any idea on how to get this round chart in my webpage? All suggestions will be highly appreciated.</p>