JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<h2>Limaçon (<a href="http://mathworld.wolfram.com/Limacon.html">MathWorld</a>)</h2>
<div ng-app ng-init="px=25;" ng-controller="Controller">
<input type="range" min="-100" max="100" step="1" ng-model="px">
<div class="limacon"></div>
</div>

CSS

body {font-family: Helvetica;}

JavaScript

function Controller($scope){
    $scope.$watch("px",function(){
        d3.select('svg').remove();
        var limacon = d3.select(".limacon").append("svg");

x0 = 250;
y0 = 200;

r = 50;
px = $scope.px;

limacon.append("circle")
    .attr("cx", x0)
    .attr("cy", y0)
    .attr("r", r)
    .attr("stroke", "#FFCC66")
    .attr("stroke-width", 2)
    .attr("fill", "none");

for (var k = 0; k < 20; k++) {
    limacon.append("circle")
        .attr("cx", x0 + r * Math.cos(2 * Math.PI * 0.05 * k))
        .attr("cy", y0 + r * Math.sin(2 * Math.PI * 0.05 * k))
        .attr("r", r * Math.sqrt(Math.sin(2 * Math.PI * 0.05 * k) * Math.sin(2 * Math.PI * 0.05 * k) + (Math.cos(2 * Math.PI * 0.05 * k) - px / r) * (Math.cos(2 * Math.PI * 0.05 * k) - px / r)))
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1)
        .attr("fill", "none");
}

limacon.append("circle")
    .attr("cx", x0 + px)
    .attr("cy", y0)
    .attr("r", 1)
    .attr("stroke", "#66CC66")
    .attr("stroke-width", 2)
    .attr("fill", "#66CC66");
    });
    
}