Built with blockbuilder.org
xxxxxxxxxx<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", 2000) .attr("height", 1000) /* svg.append("text") .text("Edit the code below to change me!") .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") */ var genes=[{"name": "1", "start": 50, "end":150, "direction": "F", "function":"function1", "fill": "turquoise"}, {"name": "2", "start": 160, "end":300, "direction": "F", "function":"Function 2", "fill": "skyblue"}, {"name": "3", "start": 250, "end":420, "direction": "R", "function": "Function 3", "fill": "teal"}, {"name": "4", "start": 400, "end":500, "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(ruler_1000) console.log(genes); svg.selectAll("rect") .data(genes) .enter() .append("rect") .attr("y", function(d) {if (d.direction =="F") { return 100;} else {return 250;}}) .attr("x", function(d) {if(d.direction=="F") {return 0 - (d.end - d.start);} else{return 2000;}}) .attr("width", function(d) {return d.end-d.start}) .attr("height", 30) .attr("fill", function (d) {if(d.direction=="F") {return "turquoise";} else{return "salmon";}}) /* .transition() .duration(1500) .attr("height", 30) */ .attr("opacity", 1) /* .transition() .duration(1000) .delay(function (d, i) {return i * 1000}) .attr("opacity", 1) */ .transition() .duration(2000) .attr("x", function (d) {return d.start}) svg.selectAll("text") .data(genes) .enter() .append("text") .attr("y", function(d) {if (d.direction =="F") {return 100 + 15;} else {return 250 + 15;}}) .attr("x", function(d) {if(d.direction=="F") {return 0 - (d.end - d.start);} else{return 2000;}}) .text(function(d) {return d.name}) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-size", 20) .attr("font-family", "courier") .attr("fill", "white") .transition() .duration(2000) .attr("x", function (d) {return (d.start+d.end)/2}) svg.selectAll(".rect1000") .data(ruler_1000) .enter() .append("rect") .classed("rect1000", true) .attr("fill", "black") .attr("width", 1) .attr("height", 30) .attr("y", 160) .attr("x", function(d) {return d/10}); svg.selectAll(".rect500") .data(ruler_500) .enter() .append("rect") .classed("rect500", true) .attr("fill", "black") .attr("width", 1) .attr("height", 15) .attr("y", 160) .attr("x", function(d) {return d/10}); svg.selectAll(".rect100") .data(ruler_100) .enter() .append("rect") .classed("rect100", true) .attr("fill", "black") .attr("width", 1) .attr("height", 5) .attr("y", 180) .attr("x", function(d) {return d/10}) ; //ttr("fill", function(d) {return d.fill}) //.attr("stroke", "black"); </script></body> https://d3js.org/d3.v4.min.js