Genome-2/10

forked from annalabrozzi's block: fresh block

<!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:-6; }
  </style>
</head>

<body>
  <script>
    
var svg = d3.select("body").append("svg")
      .attr("width", 919)
      .attr("height",662);
    var four_genes = [{"name":"Gene 1","fill": "aquamarine", "direction":"F", "function":"function 1", "start":50, "end":163},
                        {"name":"Gene 2","fill": "coral", "direction":"F", "function":"function 2", "start":181, "end":313},
                        {"name":"Gene 3","fill": "darkseagreen", "direction":"R", "function":"function 3", "start":267, "end":400},
                     {"name":"Gene 4","fill": "darkcyan", "direction":"F", "function":"function 4", "start":370, "end":595}];

//you can add more data here, instead of adding a whole new svg.append command like before

console.log(four_genes)
    
svgEnter = svg.selectAll("rect") //pulls directions from designated svg file
  	.data(four_genes) //data binding
    .enter() // Every time there is no flag data when going through the svg file, it does the command 
      
      
    
svgEnter.append("rect")
      .attr("x", function(d) {if (d.direction == "F") {return 0 - (d.end -d.start);} else{return 1083;}})
    	.attr("y", function(d) {if (d.direction =="F") {return 8;} else {return 184;}})
      .attr("width", function (d) {return d.end-d.start;}) //gene width proportional to gene size
      .attr("height",50)
      .attr("fill", function (d) {if (d.direction =="F") {return "cadetblue";} else {return "lightgreen";}})
			.attr("name", function (d) {return d.name;})
    	.attr("stroke", "black")
    	.attr("opacity", 0) 
      .transition() //adding animation and delay
      .duration(1500)
    	.delay(function(d,i) {return i*1000; })
      .attr("opacity", 1)
    	.attr("x", function(d) {return d.start;})  
       
svg.append("rect")
	.attr("width", 700)
	.attr("height", 50)
	.attr("y",100)
	.attr("x",0)
	.attr("fill", "blanchedalmond")
	.attr("stroke","black")    
    
//adding ruler

svg.selectAll(".rect1000")
		.data(ruler_1000)
		.enter()
		.append("rect")
		.classed("rect1000", true)
		.attr("fill","black")
		.attr("width",2)
		.attr("height", 50)
		.attr("y",100)
		.attr("x", function(d) {return d/10})
    
svg.selectAll(".rect500")
		.data(ruler_500)
		.enter()
		.append("rect")
    .classed("rect500", true)
		.attr("fill","black")
		.attr("width",2)
		.attr("height", 36)
		.attr("y",100)
		.attr("x", function(d) {return d/10})

svg.selectAll(".rect100")
		.data(ruler_100)
		.enter()
		.append("rect")
    .classed("rect100", true)
		.attr("fill","black")
		.attr("width",2)
		.attr("height", 23)
		.attr("y",100)
		.attr("x", function(d) {return d/10})

console.log("1000:",ruler_1000) 
console.log("500:", ruler_500)
console.log("100:", ruler_100)   
			
//adding names    
svgEnter.append("text")
	.text(function(d) {return d.name})
	.attr("text-anchor", "middle")
	.attr("alignment-baseline","middle")
	.attr("opacity",0)
	.attr("font-size", 25)
	.attr("font-family","monospace")
	.attr("x", function(d) {return (d.start + d.end)/2;})
  .attr("y", function(d) {if (d.direction =="F") {return 8+25} else {return 184+25}})
	.transition()
	.delay(250 + four_genes.length*1000)
	.duration(500)
	.attr("opacity",1)

/*  
  svg.append("rect")
      .attr("height", 127)
      .attr("width", 200)
      .attr("x", 400)
      .attr("y", 200)
    	.attr("fill","darkturquoise")
    	.attr("stroke","black")  
	svg.append("rect")
      .attr("height", 40)
      .attr("width", 200)
      .attr("x", 400)
      .attr("y", 242)
    	.attr("fill","gold")
  		.attr("stroke","black")
  svg.append("polygon")
  		.attr("points","396,198 397,328 490,264")
 */
  
  
  </script>
</body>

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