96 well plate design with reagent usage table

forked from grybnicky's block: 96 well plate design

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    //Sets distance from edge of canvas
    var xborder = 10
    var yborder = 100
    
    //Set distance of selectors from plate
    var selectorDist = 650
    
    //Sets number of rows and columns for plate
    var plateRows = 8
    var plateCols = 12

//Variable that changes depending on DNA selected. Default is white (no DNA)
    var currentColor = "white"

//Variable to store plate row labels
    var letterLabels =[
      {
        position: 0,
        label: "A"
      }, 
      {
        position: 1,
        label: "B"
      }, 
      {
        position: 2,
        label: "C"
      }, 
      {
        position: 3,
        label: "D"
      }, 
      {
        position: 4,
        label: "E"
      }, 
      {
        position: 5,
        label: "F"
      }, 
      {
        position: 6,
        label: "G"
      }, 
      {
        position: 7,
        label: "H"
      }
    ];
    
    //Variable to store plate row labels
    var numLabels =[];
    
    //Generator for row labels
    for(var i = 0; i < 12; i++) {
        numLabels.push({
            position: i
        });
    };
    
    //Variable to store data about each well in plate
    var myPlate =[];
    
    //Generator for myPlate array
    for(var i = 0; i < 96; i++) {
        myPlate.push({
            position: i,
          	x: (xborder + 75 + (50*(Math.floor(i / plateRows)))),
            y: (yborder+75+(50*(Math.floor(i % plateRows)))),
            color: "white"
        });
    };
    
    //Variable to staore data about DNA choices
    var colorPallette =[
      {
        position: 0,
        color: "black",
        fill: "white",
        DNA: "None"
      },
      {
        position: 1,
        color: "#A569BD",
        fill: "#A569BD",
        DNA: "mCherry"
      },
      {
        position: 2,
        color: "#C21B5A",
        fill: "#C21B5A",
        DNA: "mRFP1"
      },
      {
        position: 3,
        color: "#EA6020",
        fill: "#EA6020",
        DNA: "dTomato"
      },
      {
        position: 4,
        color: "#F5B041",
        fill: "#F5B041",
        DNA: "mOrange"
      },
      {
        position: 5,
        color: "#F4D03F",
        fill: "#F4D03F",
        DNA: "YPet"
      },
      {
        position: 6,
        color: "#56EE19",
        fill: "#56EE19",
        DNA: "sfGFP"
      }
      
    ];
    
    //Create SVG canvas
    var svg = d3.select("body").append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
    
    //Generate rectangle that outlines plate
   	svg.append("rect")
      .attr("fill", "white")
    	.attr("stroke", "black")
      .attr("width", 700)
      .attr("height", 500)
    	.attr("x", xborder)
    	.attr("y", yborder)
    	.attr("rx", 12)
    	.attr("ry", 12)
    
    //Bind data from labelLetters to row labels
    rowLabels = svg.selectAll("t")
    	.data(letterLabels)
    	.enter()
    
    //Generate text to label rows
    rowLabels.append("text")
    	.attr("fill",function(d){return "black"})
    	.attr("x", xborder+25)
      .attr("y", function(d){return 180+(50*d.position)})
    	.text(function(d){return d.label})
    	.attr("text-anchor", "middle")
    	.attr("font-family","sans-serif")
    
    //Bind data from numLabels to col labels
    colLabels = svg.selectAll("t")
    	.data(numLabels)
    	.enter()
    
    //Generate text to label columns
    colLabels.append("text")
    	.attr("fill",function(d){return "black"})
    	.attr("x", function(d){return xborder+73+(50*d.position+1)})
      .attr("y", 140)
    	.text(function(d){return d.position+1})
    	.attr("text-anchor", "middle")
    	.attr("font-family","sans-serif")
    
    //Bind data from myPlate to wells
    wells = svg.selectAll("g")
    	.data(myPlate)
    	.enter()
    	.append("g")
    
    //Generate circles to represent wells in plate
    wells.append("circle")
    	.attr("class", "well")
    	.attr("fill", function(d){return d.color})
      .attr("stroke", "black")
    	.attr("r", 25)
    	.attr("cx", function(d){return d.x})
    	.attr("cy", function(d){return d.y})
    	.on("click", function(d){
      	myPlate[d.position].color = currentColor;
      	d3.select(this)		
     		.attr("fill", currentColor)
    			})
    	.on("mouseover", function(d){
      d3.select(this)
      .attr("stroke-width", 5)
    })	
    	.on("mouseout", function(d){
      d3.select(this)
      .attr("stroke-width", 1)
    })

//Bind data from colorPallette to DNA selector
    selectDNA = svg.selectAll("t")
    	.data(colorPallette)
    	.enter()
   
   //Generate rectangles to select DNA
    selectDNA.append("rect")
    	.attr("fill",function(d){return d.fill})
      .attr("rx", 6)
    	.attr("ry", 6)
      .attr("x", function(d){if (d.position <4){
      								return 175+ (d.position*150)
    }
                             else{
                      return 250+ ((d.position-4)*150)        
                             }
    })
    	.attr("y", function(d){if (d.position <4){
      								return selectorDist+20
    }
                             else{
                      return selectorDist+95        
                             }
    })
    	.attr("height", 50)
    	.attr("width", 100)
    	.attr("stroke", "black")
      .text(function(d){return d.DNA})
    //Click event to change currentColor
      .on("click", function(d){
       currentColor = colorPallette[d.position].fill
    })	
    	.on("mouseover", function(d){
      d3.select(this)
      .attr("stroke-width", 3)
    })	
    	.on("mouseout", function(d){
      d3.select(this)
      .attr("stroke-width", 1)
    })
    
   //Generate text to select DNA
    selectDNA.append("text")
    	.attr("fill",function(d){return "black"})
      .attr("x", function(d){if (d.position <4){
      								return 225+ (d.position*150)
    }
                             else{
                      return 300+ ((d.position-4)*150)        
                             }
    })
    	.attr("y", function(d){if (d.position <4){
      								return (selectorDist +50)
    }
                             else{
                      return selectorDist+125        
                             }
    })
    	.attr("text-anchor", "middle")
    	.attr("font-family","sans-serif")
      .text(function(d){return d.DNA})
    //Click event to change currentColor
      .on("click", function(d){
       currentColor = colorPallette[d.position].fill
    })
   
    //Generate a button for "Clear Plate"
    svg.append("rect")
    	.attr("x", 300)
    	.attr("y", selectorDist+175)
    	.attr("height", 50)
    	.attr("width", 300)
    	.attr("stroke", "black")
    	.attr("fill", "white")
    	.attr("rx", 6)
    	.attr("ry", 6)
    	.on("click", function(){
       for (i = 0; i < myPlate.length; i++) {
    			myPlate[i].color = "white";
         	d3.selectAll(".well").attr("fill", "white");
         console.log(myPlate[i].color)
       }
    })
    	.on("mouseover", function(d){
      d3.select(this)
      .attr("stroke-width", 3)
    })	
    	.on("mouseout", function(d){
      d3.select(this)
      .attr("stroke-width", 1)
    })
    
    //Generate a text for "Clear Plate"
    svg.append("text")
    	.attr("x", 450)
    	.attr("y", selectorDist + 205)
    	.text("Clear Plate")
    	.attr("text-anchor", "middle")
    	.attr("font-family","sans-serif")
    	.on("click", function(){
       for (i = 0; i < myPlate.length; i++) {
    			myPlate[i].color = "white";
         	d3.selectAll(".well").attr("fill", "white");
         console.log(myPlate[i].color)
       }
    })
    
    svg.append("text")
    	.text("Select DNA")
      .attr("x", 450)
    	.attr("y", selectorDist)
      .attr("text-anchor", "middle")
    	.attr("font-family","sans-serif")
    	.style("font-size", "24px")
    
    svg.append("rect")
    	.attr("height",2)
    	.attr("width", 350)
    	.attr("fill", "black")
    	.attr("x", 30)
    	.attr("y", selectorDist-10)
    
    svg.append("rect")
    	.attr("height",2)
    	.attr("width", 350)
    	.attr("fill", "black")
    	.attr("x", 520)
    	.attr("y", selectorDist-10)
    
  </script>
</body>

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