Gene Map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var inputhandle = open("data.json")
		
    var data_json = [{'stop': 250, 'orientation': 'forward', 'start': 49, 'name': '1'}, {'stop': 305, 'orientation': 'forward', 'start': 265, 'name': '2'}, {'stop': 440, 'orientation': 'forward', 'start': 361, 'name': '3'}, {'stop': 620, 'orientation': 'forward', 'start': 500, 'name': '4'}] 
    var length = (data_json.stop - data_json.start)
    var stop = data_json.stop
    var start = data_json.start
    d3.json("data.json", function (error, json){
     var p = d3.select("body").selectAll("p")
      .data(data_json)
      .enter()
      .append("p")
      .text(function (d) {return d.text;})
    });
   
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("text")
      .text("Gene Map")
      .attr("y", 100)
      .attr("x", 350)
      .style("font-size", 40)
      .style("Times New Roman", "monospace")
    svg.append("rect")
    	.attr("y", 200)
    	.attr("x", start)
    	.attr("height", 30)
    	.attr("width", length)
    svg.append("rect")
    	.attr("y", 200)
    	.attr("x", 265)
    	.attr("height", 30)
    	.attr("width", 40)
    svg.append("rect")
    	.attr("y", 200)
    	.attr("x", 361)
    	.attr("height", 30)
    	.attr("width", 79)
    svg.append("rect")
    	.attr("y", 200)
    	.attr("x", 500)
    	.attr("height", 30)
    	.attr("width", 120)
    svg.append("line")
      .attr("x1",0 )
      .attr("y1", 215)
      .attr("x2", 700)
      .attr("y2", 215)
  		.attr("stroke-width", 2)
      .attr("stroke", "black");

</script>
</body>

https://d3js.org/d3.v4.min.js