title: Live animated Line or Area graph in a circula canvas viewport
body: <p>I am fairly new to Javascript / HTML5 front end programming. I am wondering how to have a circular canvas view within which there is a live graph.</p>
  
  <p>I have looked at D3.js and cubism for graphing and I have a brief understanding of using canvas for animation etc. Usually the graphs are displayed in a rectangular view, within which the graph is displayed.</p>
  
  <p>Please see the image that I have attached. I have looked around and didn't find any libraries that would do it, so have decided to do it myself but need some points on how to go about it in an efficient manner.</p>
  
  <p>So basically some form of masking as shown in the following image</p>
  
  <p><img src="https://i.stack.imgur.com/dXO0Q.jpg" alt="enter image description here"></p>
  
  <p>resulting in the following type of graph</p>
  
  <p><img src="https://i.stack.imgur.com/ZtyCr.jpg" alt="http://i.stack.imgur.com/ZtyCr.jpg"></p>