JSFiddle - React, Tailwind, and code Playground

by theneuralbit

HTML

<svg></svg>

JavaScript

//The data for our line
var lineData = Array();


var color = d3.interpolateLab("#ccddff", "#003399");

for(var i=0; i < 360; i++){
	lineData.push(i);
}
function get_rand() {
  return Math.round(Math.random()*9 + 0.5);
}
var a = get_rand();
var b = get_rand();

//This is the accessor function we talked about above
function lineFunction(delta_x, delta_y) {
  return d3.svg.line()
         .x(function(d) { 
            return 100*Math.cos(a*2*Math.PI*d/180 + delta_x) + 125; 
         })
         .y(function(d) { 
           return 100*Math.sin(b*2*Math.PI*d/180 + delta_y) + 125; 
         })
         .interpolate("basis");
}

function randomLineFunction(lineData) {
	return lineFunction(randomOdd(), randomOdd())(lineData);
}

//The SVG Container
var svgContainer = d3.select("svg")
                     .attr("width", 300)
                     .attr("height", 300);

//The line SVG Path we draw8
var lineGraph = svgContainer.selectAll('line')
                            .data(sortByZ(digrams(sample(lineFunction(0, 0)(lineData), 8))))
                            .enter().append('line')
                            .attr("stroke", function(d) {return color(Math.cos(2*Math.PI*d.t*1000/180)/2 + 1/2);})
                            .attr("stroke-width", 2)
                            .attr("fill", "none")
                            .attr('r', 2)
                            .attr('x1', function(d) { return d[0][0]; })
                            .attr('y1', function(d) { return d[0][1]; })
                            .attr('x2', function(d) { return d[1][0]; })
                            .attr('y2', function(d) { return d[1][1]; })
           
function sortByZ(data) {
	data.sort(function(a, b) { return Math.cos(2*Math.PI*a.t*1000/180) - Math.cos(2*Math.PI*b.t*1000/180); });
  return data;
}           

function digrams(data) {
	return d3.range(data.length - 1).map(function(i) {
    var a = [data[i], data[i+1]];
    a.t = (data[i].t + data[i+1].t)/2;
    return a;
  });
}

//...