| license: mit |
Built with blockbuilder.org
forked from scampbell2434's block: hellooooooooo!
forked from scampbell2434's block: hellooooooooo!
forked from scampbell2434's block: french
forked from scampbell2434's block: french 2
forked from scampbell2434's block: french 3
| <!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", 960) | |
| .attr("height", 500) | |
| var gene_Datateach = [{"name":"Gene1","start":50,"end":105, "DNA_sequence":"ACGCTAAGGCTATTA","direction":"forward","function":"function1","fill":"orange","y":100}, | |
| {"name":"Gene2","start":125,"end":200, "DNA_sequence":"ATAGCCATGCAATGCCC","direction":"forward","function":"function2","fill":"green","y":100}, | |
| {"name":"Gene4", "start":250, "end":432, "DNA_sequence": "CTTAGAACCGTTACGTAC","direction":"forward","function":"function4","fill":"red","y":200}, | |
| {"name":"Gene3", "start":159,"end": 281, "DNA_sequence": "GTACCGTAGTCATGCAGTA","direction":"reverse","function":"function3","fill":"blue", "y":100}]; | |
| console.log(gene_Datateach); | |
| svg.selectAll("rect") | |
| .data(gene_Datateach) | |
| .enter() | |
| .append("rect") | |
| .attr("y",function (d){ | |
| if (d.direction == "forward"){ | |
| return 100; | |
| } | |
| else {return 200; | |
| } | |
| }) | |
| .attr("x",function(d){return d.start;}) | |
| .attr("width", function(d){return d.end- d.start}) | |
| .attr("height", 50) | |
| .attr("fill",function (d){ | |
| if (d.direction == "forward"){ | |
| return "red"; | |
| } | |
| else {return "blue"; | |
| } | |
| }) | |
| .attr("opacity", 0) | |
| .attr("stroke","black") | |
| .text(function(d){return d. DNA_sequence}) | |
| .transition() | |
| .duration (1500) | |
| .delay (function (d, i){return i *1000;}) | |
| .attr ("opacity",1) | |
| ; | |
| /* | |
| var blueflag={type:"rectangle",x: "200",y:"100",width:"50",height:"150",color:"blue"} | |
| var redflag= {type:"rectangle",x:"315",y:"100",width:"50",height:"150",color:"red"} | |
| var whiteflag={type:"rectangle",x:"250",y:"100",width:"50",height:"150",color:"white"} | |
| /* | |
| svg.append("rect") | |
| .attr("y", 100) | |
| .attr("x", 200) | |
| .attr("width", 50) | |
| .attr("height",150) | |
| .attr("fill", "blue"); | |
| svg.append("rect") | |
| .attr("y", 100) | |
| .attr("x",250) | |
| .attr("width",50) | |
| .attr("height",150) | |
| .attr("fill","ghostwhite"); | |
| svg.append("rect") | |
| .attr("y", 100) | |
| .attr("x", 315) | |
| .attr("width", 50) | |
| .attr("height",150) | |
| .attr("fill", "red"); | |
| */ | |
| </script> | |
| </body> |