JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzMnLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>

JavaScript

//movement and controls
var stepLR = 30;
var controller;
var speed = 0.007;

//pendulum vertical
var cx = 609, cy = 0;
var radius = 350; // cm
var g = 981; // cm/s^2
var angle = Math.PI/8; // radians
var vel = 0; // cm/s
var dx = 0.02; // s
var acc, vel, penx, peny;

//svg and d3.js
var sphere;
var string;
var string2;
var sphere2;

//timing
var start;

$( document ).ready(function() {
  start = (new Date()).getTime(); //start time on page load

  var svg = d3.select("body")
            .append("svg")
            .attr("width", '100%')
            .attr("height", '600px')
            .call(d3.zoom().on("zoom", function () {
            d3.event.transform.k = 0.8; // set k value here
            svg.attr("transform", d3.event.transform);
        }))
        .append("g");

            var viewport = svg.append('g')

            var layer1 = viewport.append('g');
            var layer2 = viewport.append('g');

            sphere = layer2.append("circle")
                         .attr("cx", 30)
                         .attr("cy", 30)
                         .attr("r", 20)
                         .attr('fill', '#FF0000');

            string = layer1.append("rect")
                          .attr("x", 27)
                          .attr("y", 0)
                          .attr("width", 6)
                          .attr("height", 10);

            //The vertical pendulum
            sphere2 = layer2.append("circle")
                         .attr("cx", 609)
                         .attr("cy", 300)
                         .attr("r", 20)
                         .attr('fill', '#FF0000');

            string2 = layer1.append("line")
                        .attr("x1", 609.5)
                        .attr("y1", 0)
                        .attr("x2", 609.5)
                        .attr("y2", 310)
                        .attr("stroke-width", 4)
                        .attr("stroke", "black");

            var roof = layer1.append("rect")
                         ...