genemapping animated

forked from BrieLewis's block: 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")
   .attr("transform", function (d) {
          if (d.orientation === 'forward') {
		        return "translate(" + -(d.start - d.stop)+ ",100)";
          }
          else {
		        return "translate(" + 960 + ",)";
          }
      	});
      group.transition()
			 .duration(1000)
        .attr("transform", function (d) {
          if (d.orientation === 'forward') {
		        return "translate(" + d.start + ",100)";
          }
          else {
		        return "translate(" + d.start + ",125)";
          }
      	});

//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('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 160}
          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