D3 Examples - genome browser

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {
      margin:67;
      position:relative;
      top:80;
      right:0;
      bottom:0;
      left:0;
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var genomelength = 7800;
    
    var tickMarks = {thousand: [], fivehundred: [], onehundred: []};
    
        var genome_positions = [];
        for (var i = 1; i <= genomelength; i++) {
        genome_positions.push(i);
        }
    
    genome_positions.forEach(function(currentValue, index, myArray){
      if (currentValue % 1000 === 0) {
        tickMarks.thousand.push(currentValue);
      }
      else if (currentValue % 500 === 0) {
        tickMarks.fivehundred.push(currentValue);
​
      }
      else if (currentValue % 100 === 0) {
        tickMarks.onehundred.push(currentValue);
      }
    });    
    var svg = d3.select("body").append("svg").attr({width:genomelength});
    svg.append("rect")
      .attr({x: 0, y: 10, width: (genomelength) / 10, height: 30})
        .style({"stroke-width": "2px", "fill": "white", "stroke": "black"});
      //.style({ fill: "#a72d1a"})
      //.transition().duration(3000).ease("bounce")
      //.style({ fill: "#5db9e3"})
    
    console.log(tickMarks);
    
        var group = svg.selectAll(".a")
      .data(tickMarks.thousand)
      .enter()
        .append("g");
    group.append("rect")
        .style({"fill": "black"})
      .attr({x: 0, y: 10, width: "1px", height: 30})
            .transition().duration(3000)
        .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
        var group2 = svg.selectAll(".b")
      .data(tickMarks.fivehundred)
      .enter()
        .append("g");
    group2.append("rect")
        .style({"fill": "black"})
      .attr({x: 0, y: 10, width: "1px", height: 16})
        .transition().duration(2000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
        var group3 = svg.selectAll(".c")
      .data(tickMarks.onehundred)
      .enter()
        .append("g");
    group3.append("rect")
        .style({"fill": "black"})
      .attr({x: 0, y: 24, width: "1px", height: 16})
        .transition().duration(1000)
      .attr("transform", function (d) { return "translate(" + d/10 + ",0)"; });
​
var spaceCircles = [30, 70, 110];
​
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 1108)
                                    .attr("height", 535);
 
var circles = svgContainer.selectAll("circle")
                           .data(spaceCircles)
                           .enter()
                           .append("circle");
var genes = [
  { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
  { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
  { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
    
var circleAttributes = circles
                       .attr("cx", function (d) { return d; })
                       .attr("cy", function (d) { return d; })
                       .attr("r", function (d) { return d; })
                       .style("fill", function(d) {
                         var returnColor;
                         if (d === 30) { returnColor = "green";
                         } else if (d === 70) { returnColor = "purple";
                         } else if (d === 110) { returnColor = "red"; }
                         return returnColor;
                            });
​
  </script>
</body>
​
    