Built with blockbuilder.org
forked from greenmna's block: Fake Genes and animation with numbers
Created
February 8, 2018 16:03
-
-
Save greenmna/449188b8e544dbfb76c0e3a4fd1a6f13 to your computer and use it in GitHub Desktop.
Fake Genes and animation with numbers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| var genemap= [{"name": "1", "start": 50, "end": 100, "direction":"F", "function": "function 1", },{"name": "2", "start": 180, "end": 300, "direction":"F", "function": "function 2", },{"name": "3", "start": 260, "end": 400, "direction":"R", "function": "function 3", },{"name": "4", "start": 380, "end": 600, "direction":"F", "function": "function 4", },] | |
| svg.selectAll("rect") | |
| .data(genemap) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d) {if (d.direction=="F") {return 0-(d.end-d.start);} else{return 1000;}}) | |
| .attr("width", function(d) {return d.end - d.start;}) | |
| .attr("y", function(d) {if (d.direction =="F") {return 100;} else{return 200;}}) | |
| .attr("height", 50) | |
| .attr("fill", function(d) {if (d.direction=="F") {return "cyan";} else{return "pink";}}) | |
| .attr("stroke", "black") | |
| .transition() | |
| .duration(2000) | |
| .delay (function (d, i) {return i *1000}) | |
| .attr("x", function(d) {return d.start;}) | |
| svg.selectAll("text") | |
| .data(genemap) | |
| .enter() | |
| .append("text") | |
| .text(function(d) {return d.name}) | |
| .attr("font-size", 20) | |
| .attr("font-family", "Times New Roman") | |
| .attr("x", function(d) {if (d.direction=="F") {return 0-(d.end-d.start);} else{return 1000;}}) | |
| .attr("y", function(d) {if (d.direction =="F") {return 130;} else{return 230;}}) | |
| .transition() | |
| .duration(2000) | |
| .delay (function (d, i) {return i *1000}) | |
| .attr("x", function(d) {return d.start;}) | |
| //.attr("fill", function(d) {if (d.direction=="F", d.name=="1") {return "green";} else if(d.name=="2") {return "yellow";} else if(d.name=="4") {return "purple";} else {return "blue"}}) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment