JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="wellguideDiagram" style="height: 700px; width: 700px" ></div>

JavaScript

var limits = {
    depthdefinition: {
        elements: [
            {
                depth: 3,
                value: "oter"
            },
            {
                depth: 30,
                value: "portugeese warship"
            },
            {
                depth: 267,
                value: "Giant Squid"
            },
            {
                depth: 300,
                value: "seabed"
            }
        ]
    },

    tension: {
        "color": "blue",
        elements: [
            {
                depth: 0,
                value: 10
            },
            {
                depth: 100,
                value: 50
            },
            {
                depth: 105,
                value: 30
            },
            {
                depth: 150,
                value: 80
            },
            {
                depth: 250,
                value: 0
            },
            {
                depth: 350,
                value: 100
            },
            {
                depth: 400,
                value: 80
            },
            {
                depth: 500,
                value: 15
            }
        ]
    },
    speed: {
        "color": "red",
        elements: [
            {
                depth: 0,
                value: 5
            },
            {
                depth: 100,
                value: 130
            },
            {
                depth: 105,
                value: 150
            },
            {
                depth: 150,
                value: 250
            }
            ,
            {
                depth: 200,
                value: 200
            },
            {
                depth: 300,
                value: 15
            },
            {
                depth: 350,
                value: 20
            },
            {
                depth: 401,
                value: 200
            }
        ]
    }
}



function WellGuide() {
    var SVG;
    var staticData;
   ...