Old school D3 from simpler times

All examples By author By category About

asminja

Full window Github gist

Rectangles for Chromosomes USING CSV

Built with blockbuilder.org

forked from KunnyKou's block: Rectangles for Chromosomes

<!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>

var svg = d3.select("body").append("svg")
      .attr("width", 7000)
      .attr("height", 5000)
    
   d3.csv("spacingchip.csv", function(err, data)
         {
    var g = d3.select("svg").selectAll("g")
      .data(data)
      .enter()
      .append("g")
      g.append("rect")
        .attr("transform", function(d) {
         {
          return "translate(0,"+-(d.Spacing/10)+")";
        }
      })
      .attr("x", function(d) {
            if (d.Chromosome == "1")
              return 20;
        else if (d.Chromosome == "2")
              return 150;
        else if (d.Chromosome == "3")
          		return 280;
        else if (d.Chromosome == "4")
          		return 410;
        else if (d.Chromosome == "5")
          		return 540;        
               })
        .attr("y", function(d) {
             if (d.Chromosome == "1")
             return 440;
        else if (d.Chromosome == "2")
              return 440;
        else if (d.Chromosome == "3")
          		return 440;
        else if (d.Chromosome == "4")
          		return 440;
        else if (d.Chromosome == "5")
          		return 440;
               })
      
      .attr("width", 100)
        .attr("height", function(d)
              {return d.Interval_length/10} )
.attr("fill", function(d) {
             if (d.Chromosome == "1")
              return "#abbbf4";
             else if (d.Chromosome == "2")
              return "#adf7f1";
             else if (d.Chromosome == "3")
              return "#e0b8e9";
             else if (d.Chromosome == "4")
              return "#f9efa8";
             else if (d.Chromosome == "5")
              return "#b5f6ab"})
   })

</script>
</body>

https://d3js.org/d3.v4.min.js