JSFiddle - React, Tailwind, and code Playground

by JohnFish

HTML

<div id="grid">
</div>
<br />

<span>Max-x: </span>
<input id="maxX" placeholder="Enter a maximum x-value (Default is 500)."></input>
<br />

<span>Max-y: </span>
<input id="maxY" placeholder="Enter a maximum y-value (Default is 300)."></input>
<br />

<button id="set">Set</button>

<p>For every data point, enter the values in "x" and "y" and press "plot".</p>

<span>x: </span>
<input id="x" placeholder="Enter an x-value between 0 and 500."></input>
<br />

<span>y: </span>
<input id="y" placeholder="Enter a y-value between 0 and 300."></input>
<br />

<button id="plot">Plot</button>

CSS

#grid {
    position: absolute;
    background: #fcfcfc;
    width: 500px;
    height: 300px;
    top: 250px;
}
#yaxis {
    left: -2px;
    height: 100%;
    position: absolute;
    background: black;
    width: 2px;
}
#xaxis {
    bottom: -2px;
    width: 100%;
    position: absolute;
    background: black;
    height: 2px;
}
input {
    width: 500px;
}
span {
    width: 100px;
    display: block;
    float: left;
}
#point {
    display: block;
    background: #06a;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    position: absolute;
}
#line {
    position: absolute;
    width: 1px;
    background-color: #06a;
    z-index: 100;
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

JavaScript

var x, y, x1, x2, y1, y2, dx, dx, xs, ys, xAxis, yAxis; //Define all the stupid variables - perhaps narrow these down.
xAxis = 500;
yAxis = 300;
$(document).ready(function(){
    var createYAxis = $(document.createElement('div')).appendTo('#grid').attr('id', 'yaxis');
    var createXAxis = $(document.createElement('div')).appendTo('#grid').attr('id', 'xaxis');
});
$("#x").on("keyup change", function () { //Change everytime the text field is changed and/or a keypress
    x = this.value + 'px'; //Used to represent x value, just as a string
    xs = this.value; //Int x value
});

$("#y").on("keyup change", function () {
    y = 298 - this.value + 'px'; //298 is just height of container-1/2 of the height of each individual point
    ys = this.value;
});

$('#plot').click(function () { //Happening everything you hit "Plot"
    var point = $(document.createElement('div')).appendTo('#grid').attr('id', 'point'); //Create div #point appended to #grid
    point.css('top', y) //Top margin
    .css('left', x); //Left margin
    var pointAmount = $("#grid div").length; //See how many divs within #grid
    if (pointAmount > 2) { //If there are more than 2 points, then set our first set of numbers to be the old second set of numbers
        x1 = x2;
        y1 = y2;
    }
    if (pointAmount === 1) { //If there is only one point, set our first set of numbers to be the raw data
        x1 = xs;
        y1 = ys;
    } else { //Otherwise, set our second set of numbers to be the raw data
        x2 = xs;
        y2 = ys;
    }

    if (pointAmount != 1) { //If there is more than one point, draw a line
        dx = x2 - x1; //Used to make less calculations later on
        dy = y2 - y1; // ""
        var line = $(document.createElement('div')).attr('id', 'line').appendTo('#grid'); //Create the line
        var length = Math.sqrt(dx * dx + dy * dy); //Pythagorean theorum (a^2+b^2=c^2) so we know our hypotenuse length
        var angle = 180 / 3.1415 * Math.acos((y2 - y1) / length);...