JSFiddle - React, Tailwind, and code Playground

by gkucmierz

HTML

Lissajous curve

JavaScript

//The data for our line
var lineData = [];

for(var i=0; i < 1000; i++){
	lineData.push({
        "x": 200*Math.cos(21*2*Math.PI*i*1e-3)+200,
        "y": 200*Math.sin(22*2*Math.PI*i*1e-3) +200
    } );
 } 

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

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

//The line SVG Path we draw8
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");