text: /**
   * Created by Dewan Sarwar on 14/01/2018.
   */
  var svgPlatform = function (svg, newg, height, width, w, h, markerWidth, markerHeight) {
  
      console.log("svgPlatform function");
  
      var newgdefs = svg.append("g");
      newgdefs.append("defs")
          .append("pattern")
          .attr("id", "basicPattern")
          .attr("patternUnits", "userSpaceOnUse")
          .attr("width", 4)
          .attr("height", 4)
          .append("circle")
          .attr("cx", "0")
          .attr("cy", "0")
          .attr("r", "1.5")
          .attr("stroke", "#6495ED")
          .attr("stroke-width", 1.5);
  
      var dragrect = newg.append("rect")
          .attr("x", function (d) {
              return d.x;
          })
          .attr("y", function (d) {
              return d.y;
          })
          .attr("width", width)
          .attr("height", height)
          .attr("rx", 10)
          .attr("ry", 20)
          .attr("fill", "white")
          .attr("stroke", "url(#basicPattern)")
          .attr("stroke-width", 25);
  
      // Extracellular rectangle
      var extracellular = newg.append("rect")
          .attr("id", luminalID)
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", w / 3 - 30)
          .attr("height", h)
          .attr("stroke", function (d) {
              svg.append("text")
                  .style("font", "16px sans-serif")
                  .attr("stroke", "purple")
                  .attr("opacity", 0.5)
                  .attr("x", 960)
                  .attr("y", 70)
                  .text("Luminal Compartment");
  
              return "purple";
          })
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      // Intracellular rectangle
      var intracellular = newg.append("rect")
          .attr("id", cytosolID)
          .attr("x", w / 3 + 30)
          .attr("y", height / 3 + 20)
          .attr("width", width - 60)
          .attr("height", height - 40)
          .attr("stroke", function (d) {
              svg.append("text")
                  .style("font", "16px sans-serif")
                  .attr("stroke", "blue")
                  .attr("opacity", 0.5)
                  .attr("x", 960)
                  .attr("y", 95)
                  .text("Cytosol Compartment");
  
              return "blue";
          })
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      // Interstitial fluid rectangle
      var interstitial = newg.append("rect")
          .attr("id", interstitialID)
          .attr("x", w / 3 + width + 30)
          .attr("y", 0)
          .attr("width", w - (w / 3 + width + 30))
          .attr("height", h)
          .attr("stroke", function (d) {
              svg.append("text")
                  .style("font", "16px sans-serif")
                  .attr("stroke", "teal")
                  .attr("opacity", 0.5)
                  .attr("x", 960)
                  .attr("y", 120)
                  .text("Interstitial Fluid");
  
              return "teal";
          })
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      // Blood capillary rectangle
      var bloodcapillary = newg.append("rect")
          .attr("id", bloodCapillary)
          .attr("x", w + 20 + 40)
          .attr("y", 0)
          .attr("width", 70)
          .attr("height", h)
          .attr("stroke", function (d) {
              svg.append("text")
                  .style("font", "16px sans-serif")
                  .attr("stroke", "red")
                  .attr("x", 960)
                  .attr("y", 145)
                  .text("Blood Capillary");
  
              return "red";
          })
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      // Paracellular rectangle
      var paracellular = newg.append("rect")
          .attr("id", paracellularID)
          .attr("x", w / 3 - 10)
          .attr("y", height / 3 + height + 30)
          .attr("width", width + 20)
          .attr("height", height / 3)
          .attr("stroke", function (d) {
              svg.append("text")
                  .style("font", "16px sans-serif")
                  .attr("stroke", "violet")
                  .attr("opacity", 0.5)
                  .attr("x", 960)
                  .attr("y", 170)
                  .text("Paracellular Pathway");
  
              return "violet";
          })
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      // Paracellular rectangle
      var paracellular2 = newg.append("rect")
          .attr("id", paracellularID)
          .attr("x", w / 3 - 10)
          .attr("y", 0)
          .attr("width", width + 20)
          .attr("height", height / 3 - 30)
          .attr("stroke", "violet")
          .attr("stroke-width", 1)
          .attr("fill", "white");
  
      var px = 265, py = height / 3 + height + height / 3 + 60; // 720
      // Neighbour epithelial cell
      newg.append("polygon")
          .attr("transform", "translate(" + px + ", " + py + ")")
          .attr("points", "0,0 0,100 0,0 300,0 300,100 300,0")
          .attr("fill", "white")
          .attr("stroke", "url(#basicPattern)")
          .attr("stroke-linecap", "round")
          .attr("stroke-linejoin", "round")
          .attr("stroke-width", 25);
  
      // build the start arrow.
      svg.append("svg:defs")
          .selectAll("marker")
          .data(["start"])      // Different link/path types can be defined here
          .enter().append("svg:marker")    // This section adds in the arrows
          .attr("id", String)
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 1)
          .attr("refY", -0.25)
          .attr("markerWidth", markerWidth)
          .attr("markerHeight", markerHeight)
          .attr("orient", "180")
          .append("svg:path")
          .attr("d", "M0,-5L10,0L0,5");
  
      // build the starttop arrow.
      svg.append("svg:defs")
          .selectAll("marker")
          .data(["starttop"])      // Different link/path types can be defined here
          .enter().append("svg:marker")    // This section adds in the arrows
          .attr("id", String)
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 1)
          .attr("refY", -0.25)
          .attr("markerWidth", markerWidth)
          .attr("markerHeight", markerHeight)
          .attr("orient", "270")
          .append("svg:path")
          .attr("d", "M0,-5L10,0L0,5");
  
      // build the end arrow.
      svg.append("svg:defs").selectAll("marker")
          .data(["end"])      // Different link/path types can be defined here
          .enter().append("svg:marker")    // This section adds in the arrows
          .attr("id", String)
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 1)
          .attr("refY", -0.25)
          .attr("markerWidth", markerWidth)
          .attr("markerHeight", markerHeight)
          .attr("orient", "auto")
          .append("svg:path")
          .attr("d", "M0,-5L10,0L0,5");
  };