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:-6; } </style></head><body> <script> var svg = d3.select("body").append("svg") .attr("width", 919) .attr("height",662); var four_genes = [{"name":"Gene 1","fill": "aquamarine", "direction":"F", "function":"function 1", "start":50, "end":163}, {"name":"Gene 2","fill": "coral", "direction":"F", "function":"function 2", "start":181, "end":313}, {"name":"Gene 3","fill": "darkseagreen", "direction":"R", "function":"function 3", "start":267, "end":400}, {"name":"Gene 4","fill": "darkcyan", "direction":"F", "function":"function 4", "start":370, "end":595}]; //you can add more data here, instead of adding a whole new svg.append command like before console.log(four_genes) svgEnter = svg.selectAll("rect") //pulls directions from designated svg file .data(four_genes) //data binding .enter() // Every time there is no flag data when going through the svg file, it does the command svgEnter.append("rect") .attr("x", function(d) {if (d.direction == "F") {return 0 - (d.end -d.start);} else{return 1083;}}) .attr("y", function(d) {if (d.direction =="F") {return 8;} else {return 184;}}) .attr("width", function (d) {return d.end-d.start;}) //gene width proportional to gene size .attr("height",50) .attr("fill", function (d) {if (d.direction =="F") {return "cadetblue";} else {return "lightgreen";}}) .attr("name", function (d) {return d.name;}) .attr("stroke", "black") .attr("opacity", 0) .transition() //adding animation and delay .duration(1500) .delay(function(d,i) {return i*1000; }) .attr("opacity", 1) .attr("x", function(d) {return d.start;}) svg.append("rect") .attr("width", 700) .attr("height", 50) .attr("y",100) .attr("x",0) .attr("fill", "blanchedalmond") .attr("stroke","black") //adding ruler var ruler_100 = [];var ruler_500 = [];var ruler_1000 = []; var numbers = d3.range(7027); 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",2) .attr("height", 50) .attr("y",100) .attr("x", function(d) {return d/10}) svg.selectAll(".rect500") .data(ruler_500) .enter() .append("rect") .classed("rect500", true) .attr("fill","black") .attr("width",2) .attr("height", 36) .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",2) .attr("height", 23) .attr("y",100) .attr("x", function(d) {return d/10})console.log("1000:",ruler_1000) console.log("500:", ruler_500)console.log("100:", ruler_100) //adding names svgEnter.append("text") .text(function(d) {return d.name}) .attr("text-anchor", "middle") .attr("alignment-baseline","middle") .attr("opacity",0) .attr("font-size", 25) .attr("font-family","monospace") .attr("x", function(d) {return (d.start + d.end)/2;}) .attr("y", function(d) {if (d.direction =="F") {return 8+25} else {return 184+25}}) .transition() .delay(250 + four_genes.length*1000) .duration(500) .attr("opacity",1) /* svg.append("rect") .attr("height", 127) .attr("width", 200) .attr("x", 400) .attr("y", 200) .attr("fill","darkturquoise") .attr("stroke","black") svg.append("rect") .attr("height", 40) .attr("width", 200) .attr("x", 400) .attr("y", 242) .attr("fill","gold") .attr("stroke","black") svg.append("polygon") .attr("points","396,198 397,328 490,264") */ </script></body> https://d3js.org/d3.v4.min.js