JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<div id="circle">
</div>

<div id="container">
  <div id="sea"></div>
  <div id="land"></div>
</div>

CSS

#circle {
    width:200px;
    height:200px;
    float:left;
    padding:10px;
    background: #ccc;
    border-radius: 50%;
}
#container {
    width:200px;
    height:200px;
    float:left;
    padding:10px;
}
#sea {
    background-color:#1B75BC;
    width:200px;
    height:150px;
    float:left;
    padding:10px;
}
#land {
    background-color:#996633;
    width:200px;
    height:50px;
    float:left;
    padding:10px
}

JavaScript

document.getElementById('sea').style.height = '100px';
document.getElementById('land').style.height = '100px';

$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#circle"), [ d1, d2, d3 ]);
});