Gene Visualization

<!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>

// first, make a general svg:
    var svg = d3.select("body").append("svg")
    	.attr("width", 1000)
    	.attr("height", 1000);
    
// next, read in the data from the json file:
    d3.json("data.json", function(error,Data) {
  
// then, create a group and append it to the svg 
      var Group = d3.select("svg").selectAll("g")
    	.data(Data)
    	.enter()
      .append("svg:g")
      
// then, add a rectangle for each data element to the group (in the svg)
      Group.append("rect")
    		.attr("x", function(d) {return d.start})
    		.attr("y", function(d) {
      		if (d.orientation == "fwd") {return 400;}
            else if (d.orientation == "rev") {return 440} })
    		.attr("width", function(d) {return d.stop - d.start} )
    		.attr("height", 50)
      	.attr("stroke", "black")
      	.attr("stroke-width", "2")
      	.attr("fill", function(d) {
      		if (d.orientation == "fwd") {return "navy";}
            else if (d.orientation == "rev") {return "skyblue"}; })
      
// finally, add a gene label to the gene in the group 
      Group.append("text")
      	.text(function(d) {return d.gene})
      	.attr("height", 50)
      	.attr("width", 50)
      	.attr("y", function(d) {
      		if (d.orientation == "fwd") {return 435;}
            else if (d.orientation == "rev") {return 475}; })
      	.attr("x", function(d) {return (d.start + (d.stop - d.start)/2)-8})
      	.style("font-size", 30)
      	.style("fill", "white")
    });

</script>
</body>

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