JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<div  id="Scatterplot"></div>

CSS

#Scatterplot{
    float:left;
    height:470px;
    width:23%;
    padding:0 10px;
    padding-top: 100px;
}

JavaScript

var data=[
 {
   "FIELD1": 0,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.035912,
   "y1": 0.853846
 },
 {
   "FIELD1": 1,
   "x": 0.22845,
   "y": 0.047411,
   "x1": 0.11326,
   "y1": 0
 },
 {
   "FIELD1": 2,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.270718,
   "y1": 0.923077
 },
 {
   "FIELD1": 3,
   "x": 0.869632,
   "y": 0.000005,
   "x1": 1,
   "y1": 0.284615
 },
 {
   "FIELD1": 4,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.331492,
   "y1": 0.94359
 },
 {
   "FIELD1": 5,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.046961,
   "y1": 0.907692
 },
 {
   "FIELD1": 6,
   "x": 0.850662,
   "y": 0.000008,
   "x1": 0.842541,
   "y1": 0.092308
 },
 {
   "FIELD1": 7,
   "x": 0.11383,
   "y": 0.366338,
   "x1": 0,
   "y1": 0.120513
 },
 {
   "FIELD1": 8,
   "x": 0.262372,
   "y": 0.028224,
   "x1": 0.162983,
   "y1": 0.012821
 },
 {
   "FIELD1": 9,
   "x": 0.320131,
   "y": 0.012584,
   "x1": 0.281768,
   "y1": 0.1
 },
 {
   "FIELD1": 10,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.035912,
   "y1": 0.882051
 },
 {
   "FIELD1": 11,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.168508,
   "y1": 0.820513
 },
 {
   "FIELD1": 12,
   "x": 0.089362,
   "y": 0.560382,
   "x1": 0.024862,
   "y1": 0.25641
 },
 {
   "FIELD1": 13,
   "x": 0.140832,
   "y": 0.220301,
   "x1": 0.008287,
   "y1": 0.046154
 },
 {
   "FIELD1": 14,
   "x": 0.158449,
   "y": 0.158308,
   "x1": 0.162983,
   "y1": 0.241026
 },
 {
   "FIELD1": 15,
   "x": 0.160692,
   "y": 0.151875,
   "x1": 0.11326,
   "y1": 0.15641
 },
 {
   "FIELD1": 16,
   "x": 0.058866,
   "y": 0.827107,
   "x1": 0.259669,
   "y1": 1
 },
 {
   "FIELD1": 17,
   "x": 0.854181,
   "y": 0.000008,
   "x1": 0.936464,
   "y1": 0.230769
 },
 {
   "FIELD1": 18,
   "x": 0.128142,
   "y": 0.280184,
   "x1": 0.038674,
   "y1": 0.133333
 },
 {
   "FIELD1": 19,
   "x": 0.100372,
   "y": 0.4665,
   "x1": 0.071823,
   "y1": 0.284615
 },
 {
   "FIELD1": 20,
   "x": 0.780099,
   "y": 0.000034,
   "x1": 0.798343,
   "y1": 0.192308
 },
...