JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<body>
<div id="chart">

</div>
</body>

CSS

path.spiral {
        fill: none;
        stroke: lightslategray;
        stroke-width: 1px;
      }
      
      circle.tick {
        fill: none;
        stroke: #000;
      }

JavaScript

var width = 400,
    height = 430,
    axes = 12,
    tick_axis = 9,
    start = 0,
    end = 2.25;

var theta = function(r) {
  return 2*Math.PI*r;
};

var angle = d3.scale.linear()
	.domain([0, axes]).range([0, 360])

var r = d3.min([width,height])/2-40;
var r2 = r;

var radius = d3.scale.linear()
  .domain([start, end])
  .range([0, r]);

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width/2 + "," + (height/2+8) +")");

var points = d3.range(start, end+0.001, (end-start)/1000);

var spiral = d3.svg.line.radial()
  .interpolate("cardinal")
  .angle(theta)
  .radius(radius);
 
var path = svg.selectAll(".spiral")
    .data([points])
  .enter().append("path")
    .attr("class", "spiral")
    .attr("d", spiral)
   
  
  var z = d3.scale.category20();
  
var circles = svg.selectAll('.circle')
	.data(points);
  
/*  circles.enter().append('circle')
  			.attr('r', 5)
        .attr('transform', function(d) { return 'translate(' + d + ')'})
        .style('fill', function(d) { return z(d); });
        
    */  
    
    var circle = svg.append("circle")
    .attr("r", 13)
    .attr("transform", "translate(" + points[0] + ")");
    
      var movingCircle = circle.transition().duration(4000)
      										.attrTween('transform', translateAlongPath(path.node()))
//		  	.attr('cx', function(d) { return radius(d) * Math.cos(theta(d))})
  //    	.attr('cy', function(d) { return radius(d) * Math.sin(theta(d))})

        
function translateAlongPath(path){
	var l = path.getTotalLength();
  	return function(d, i, a) {
    	return function(t) {
     
      	var p = path.getPointAtLength(t * l);
        //console.log(p)
      	return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

function pathXY(path) {
	var l = path.getTotalLength();
  var start = 0;
  
/*  for(i=start; i<l; i++) {
  	var point = path.getPointAtLength(i);
   ...