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", 960) .attr("height", 500) var gene = [{"name":"L","start": 50,"end":100, "length":50, "direction": "forward", "function": "1"},{"name": "K", "start":110, "end":200, "length":90, "direction": "reverse", "function": "2"},{"name": "W", "start": 250, "end": 350,"length":100, "direction": "forward", "function": "3"},{"name": "O", "start": 400, "end": 550,"length": 150, "direction": "forward", "function": "4"}]svg.append("rect") .attr("y",135) .attr("x", -64) .attr("width", 877) .attr("height",70) .attr("fill","white") .attr("stroke","black")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]);}} svg.selectAll(".rect1000") .data(ruler_1000) .enter() .append("rect") .classed("rect1000", true) .attr("fill", "black") .attr("width", 3) .attr("height", 50) .attr("y", 150) .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", 150) .attr("x", function(d) { return d/10 }); svg.selectAll(".rect100") .data(ruler_100) .enter() .append("rect") .classed("rect100", true) .attr("fill", "black") .attr("width", 3) .attr("height", 20) .attr("y", 180) .attr("x", function(d) { return d/10 }); console.log(gene) svgEnter = svg.selectAll(".gene") .data(gene) .enter(); svgEnter.append ("rect") .classed ("gene", true) .attr("y", function(d) {if (d.direction == "forward"){return 100;} else {return 200;}}) .attr("x", function(d) { if (d.direction == "forward") { return 0 -(d.length); } else { return 960; } }) .attr("width", function(d) {return d.end - d.start;}) .attr("height", 50) .attr( "stroke", "black") .attr("fill", function(d) {if (d.direction == "forward") {return "green";} else {return "red";}}) .attr ("opacity", 0).transition().duration(1500).delay(function(d, i){return i *1000;}).attr ("opacity", 1).attr("x", function (d) { return d.start; }) svgEnter.append ("text") .text (function (d) {return d.name}) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-size", 26) // .attr("opacity", 0) .attr("font-family", "monospace") .attr ("y", function (d) { if (d.direction == "reverse") { return 220 +5;} else {return 100 +25;}}) .attr ("x", function (d) { return (d.start + d.end)/2;}) .transition() .delay(250 + (gene.length * 1000)) .duration(500) .attr("opacity", 1) </script></body> https://d3js.org/d3.v4.min.js