Built with blockbuilder.org
xxxxxxxxxxgenome browser 2/1<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_data = [{"name": "1", "start": 100, "end": 200, "Direction":"F","Function":"Function 1"}, {"name": "2", "start": 300, "end":400,"Direction":"F","Function":"Function 2"}, {"name": "3", "start": 500, "end":600, "Direction":"R","Funtion":"Function 3"}, {"name":"4", "start": 700,"end":800,"Direction":"F","Function": "Function 4"}]; var ruler_100 = []; var ruler_500 = []; var ruler_1000 = []; var numbers = d3.range(10000); for (i in numbers) {if (i % 1000 == 0){ruler_1000.push(numbers[i]);} else if(i % 500 == 0){ruler_500.push(numbers[i]);} else if(i % 100 == 0){ruler_100.push(numbers[i]);}} console.log(gene_data); /*svgEnter = svg.selectAll("rect") .data(gene_data) .enter()*/ svg.selectAll("rect") .data(gene_data) .enter() .append("rect") .attr("y", function(d) {if (d.Direction =="F") {return 125;} else{return 39;}}) .attr("x", function(d) {if (d.direction == "F"){return -75;} else {return 497;}}) .attr("width", function(d) {return d.end-d.start}) .attr("height", 50) .attr("opacity",0) .attr("stroke", "black") .attr("fill", function(d) {if (d.Direction=="R") {return "red";} else if (d.Direction=="F") {return "green"}}) .transition() .duration(1000) .delay (function(d,i){return i * 1000;}) .attr("opacity",50) .attr("x", function(d){if (d.Direction=="F") {return d.end} else if (d.Direction=="R"){return d.end}}); svg.selectAll("text") .data(gene_data) .enter() .append("text") .attr("text-anchor","middle") .attr("alignment-baseline","middle") .attr("opacity",0) .attr("fill","black") .attr("x", function(d) {return ((d.start + d.end)/2)+100}) .attr("y", function(d) {if (d.Direction =="F") {return 153} else {return 65}}) .text(function (d) {return d.name}) .attr("font-size", 25) .attr("font-family", "monospace") .attr("opacity",0) .transition() .duration(500 + (gene_data.length * 1000)) .delay (function (d,i) {return i * 1000;}) .attr("opacity",1);; svg.selectAll(".rect1000") .data(ruler_1000) .enter() .append("rect") .classed("rect1000", true) .attr("fill","black") .attr("width",3) .attr("height",28) .attr("y", 93) .attr("x",function(d) {return d/10}) svg.selectAll(".rect500") .data(ruler_500) .enter() .append("rect") .classed("rect500", true) .attr("fill","black") .attr("width",3) .attr("height",20) .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",.4) .attr("height",25) .attr("y",95) .attr("x", function(d){return d/ 10}); svg. append("rect") .attr("y",90) .attr("x",0) .attr("width",1000) .attr("height",35) .attr("stroke","black") .attr("fill-opacity",0) .attr("stroke-opacity",1) </script></body> https://d3js.org/d3.v4.min.js