genemapping

<!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 svg = d3.select("body").append("svg")
    .attr("width",1000)
    .attr('height',1000)
   
    
	 d3.json("data.json",function (error, data){
 // create an element that creates groups based on the data you have
   var group =  d3.select("svg").selectAll("g")
   	.data(data)
   	.enter()
    .append("g");
//for each group create a rectangle that represents each set of data
     group.append("rect")
   	.attr("height", 50)
   	.attr("width",function(d){ return d.stop-d.start})
   	.attr("stroke","#4d00c1")
   	.attr("stroke-width",2.50)
   	.attr('y',function(d)
          {if (d.orientation=="forward")
            {return 200}
          else
            {return 250}
          })
   	.attr("x",function(d){return d.start})
    .attr('fill', function(d)
          {if  (d.orientation=="forward")
          {return "#9987ff"}
          else 
          {return "#63ffea"}
            })
// for each group assign the appropriate gene lable from the data
  group.append("text")
  	 .text(function (d){return d.name})
  	 .attr("y", function(d)
           {if(d.orientation=="forward")
          {return 230}
          else 
          {return 280}
            }) 
  	 .attr("x", function (d){return (d.start+d.stop)/2})
  	 .attr("text-anchor","middle")
     .attr("alignment-baseline", "central")
  	 .style("font-family", "verdana") 
  	 .style ("font-weight","bold")
   
  	
   });
  </script>
</body>

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