Built with blockbuilder.org
forked from TylerVaughan's block: fresh block
forked from TylerVaughan's block: genome browser
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", 1000) .attr("height", 400) var gene_data = [{"name": "Gene 1", "start": 25, "end": 100, "direction": "F", "function": "function 1"}, {"name": "Gene 2", "start": 120, "end": 220, "direction": "F", "function": "function 2"}, {"name": "Gene 3", "start": 250, "end": 350, "direction": "R", "function": "function 3"}, {"name": "Gene 4", "start": 375, "end": 450, "direction": "F", "function": "function 4"}]; console.log(gene_data) svgEnter = svg.selectAll(".genes") .data(gene_data) .enter(); svgEnter.append("rect") .attr("x", function (d) {if (d.direction == "F") {return 0-(d.end-d.start)} else if (d.direction == "R") {return 700}}) .attr("width", function(d) {return d.end-d.start}) .attr("height", 50) .attr("y", function(d) {if (d.direction=="F") {return 100} else {return 250}}) .attr("fill", function(d) {if (d.direction == "F") {return "#556b2f";} else if (d.direction == "R") {return "#800020";} }) .attr("opacity", 0) .attr("stroke", "black") .transition() .duration(1500) .attr("opacity", 1) .delay(function(d, i) { return i * 1000; }) .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", 14) .attr("font-family", "monospace") .attr("y", function(d) {if (d.direction=="F") {return 125} else {return 275}}) .attr("x", function (d){return (d.start+d.end)/2}) .attr("opacity", 0) .transition() .delay(4000) .duration (2500) .attr("opacity", 1) svg.append("rect") .attr("x", 0) .attr("y", 175) .attr("height", 50) .attr("width", 1000) .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", 2) .attr("height", 50) .attr("y", 175) .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", 25) .attr("y", 175) .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", 10) .attr("y", 215) .attr("x", function(d) {return d/10}) </script></body> https://d3js.org/d3.v4.min.js