JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

HTML

<svg height="300" width="300"></svg>

JavaScript

var classComplDiagram = function()
{
	this.diagramBox = {
		height: 900,
  	width: 600,
    widthCompl: 300,
    heightCompl: 900,
    x0:0,
    y0:0
	},
	this.d3 = {},
  this.wellName = "US-159",
  this.wellPad = "K11",
  this.totalDepth = {
  	MD: 2942.7,
    TVDSS: 2511.2,
    units: "m"
  }, 
  this.date = "2014/02/25",
  this.shoe = {
  	diameter: {
    	value: 177.8,
      units: "mm"
    } 
  },
  this.casings = [
  	{
    	type: "liner",
      name: "Liner",
      horizontal: true,
      topArcDepth:{
    	  	MD: 2540,
      	  TVDSS: 2311.4,
        	units: "m"        	
        },
      botArcDepth:{
    	  	MD: 2540,
      	  TVDSS: 2311.4,
        	units: "m"        	
        },
			topDepth: {
    	  	MD: 2402,
      	  TVDSS: 2230,
        	units: "m"        	
        },
			depth: {
    	  	MD: 2942.7,
      	  TVDSS: 2511.2,
        	units: "m"
      	},  
      outerDiam: {
    		value: 114,
      	units: "mm"
    	},
      innerDiam: {
    		value: 99,
      	units: "mm"
    	},
      minHFrac: 0.2
    },
    {
				type: "casing",
        name: "Prod Casing",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },
				depth: {
    	  	MD: 2439.5,
      	  TVDSS: 2263.2,
        	units: "m"
      	},
      outerDiam: {
    		value: 177.8,
      	units: "mm"
    	},
      innerDiam: {
    		value: 159.4,
      	units: "mm"
    	},
    },
    {
				type: "casing",
        name: "Interm Liner",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },    	
      depth: {
      	MD: 665.5,
        TVDSS: 769.8,
        units: "m"
      },
      outerDiam: {
    		value: 244.5,
      	units: "mm"
    	},
      innerDiam: {
    		value: 226.7,
      	units: "mm"
    	},
    },
    {
				type: "casing",
        name: "Conductor",
        topDepth: {
    	  	MD: 0,
      	  TVDSS: 74.9,
        	units: "m"        	
        },    	
      depth: {
      	MD: 254.1,
        TVDSS:...