Built with blockbuilder.org
xxxxxxxxxx<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 = 100 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", 125) .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 labelLetters to row 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 173+(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