D3 Examples - 02/08/18

xxxxxxxxxx
 
<!DOCTYPE html>
<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": 50, "end": 100, "direction": "F", "function": "function 1"},
            {"name": "2",  "start": 110, "end": 200, "direction": "F", "function": "function 2"},       {"name": "3",  "start": 250, "end": 350, "direction": "R", "function": "function 3"},
      {"name": "4",  "start": 400, "end": 600, "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("1000:", ruler_1000);
//console.log("500:", ruler_500);
//console.log("100:", ruler_100);
    
svg.selectAll(".rect1000")
        .data(ruler_1000)
        .enter()
            .append("rect")
            .classed("rect1000", true)
            .attr("fill", "black")
            .attr("width", 3)
            .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", 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", 3)
            .attr("height", 20)
            .attr("y", 130)
            .attr("x", function(d) { return d/10 });
​
    svgEnter = svg.selectAll("rect")
        .data(gene_data)
        .enter();
    
    svgEnter.append("rect")
        .attr("y", function (d) { 
        if ( d.direction == "F") { 
          return 100;
        }
        else { 
            return 200; 
        }
        })
        .attr("x", function (d) { 
      if ( d.direction == "F") { 
          return 0 - (d.end - d.start);
        }
        else { 
            return 960; 
        }
        })
            .attr("width", function(d) { return d.end - d.start; })
        .attr("height", 50)
        .attr("stroke-width", 1)
        .attr("stroke", "black")
        .attr("fill", function (d) { 
        if ( d.direction == "F") { 
          return "green";
        }
        else { 
            return "red"; 
        }
        })
        
        .transition()
        .duration(1500)
        .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", 26)
        .attr("opacity", 0)
        .attr("font-family", "Calibri Light")
            .attr("y", function (d) { 
        if ( d.direction == "F") { 
          return 100 + 25;
        }
        else { 
            return 200 + 25; 
        }
        })
        .attr("x", function (d) { 
          return (d.start + d.end)/2;
        })
        .transition()
        .delay(250 + (gene_data.length * 1000))
        .duration(500)
        .attr("opacity", 1)
    ;
  </script>
</body>
    