timchu90 · January 8, 2019 17:12
diff --git a/README.md b/README.md
diff --git a/dataD.csv b/dataD.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      body {
        font: 10px sans-serif;
      }
      .dotRed {
        fill: firebrick;
      }
      .dotGray {
        fill: lightgray;
      }
      .dotBlue {
        fill: dodgerblue;
      }
      .dotWhite {
        fill: white;
        display: none;
      }
      .dot {
        opacity: 0.7;
      }
      .line {
        stroke: red;
        stroke-width: 1;
        opacity: 0.7;
      }
      .dot text {
        pointer-events: none;
        font: 10px sans-serif;
      }
      div.tooltip {
        position: absolute;
        top: 0;
        text-align: left;
        width: 120px;
        height: 56px;
        padding: 2px;
        font: 12px sans-serif;
        pointer-events: none;
      }
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      var chartDiv = document.getElementById("chart");
      var strokeWidth = 1;
      var margin = {top: 20, right: 20, bottom: 50, left: 50}
      var width = chartDiv.clientWidth - margin.left - margin.right;
      var height = chartDiv.clientHeight - margin.top - margin.bottom ;
      /*
      width = 960 - margin.left - margin.right,
      height = 700 - margin.top - margin.bottom;
      */

      var scale = d3.scaleLinear().range([0, height]).domain([0,1000]);
      var x = d3.scaleLinear().range([0, width - scale(75)]).domain([-0.65,0.65]);
      var y = d3.scaleLinear().range([0, height - scale(75)]).domain([18,-0.5]);

      var svg = d3.select("body").append("svg")
        .attr("width", chartDiv.clientWidth-20)
        .attr("height", chartDiv.clientHeight-20)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

      d3.csv("dataD.csv", function(error, data) {
        if (error) throw error;

        // lines
        svg.append("line")
          .attr("class", "line")
          .attr("x1",x(-0.65))
          .attr("x2",x(0.65))
          .attr("y1", y(1.3))
          .attr("y2", y(1.3));

        svg.append("text")
          .attr("x", x(-0.655))
          .attr("y", y(1.25))
          .attr("fill", "red")
          .text("q = 0.05")
          .style("text-anchor", "end")

        // add the tooltip
        var div = d3.select("body").append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);

        // Add the scatterplot
        var elem = svg.selectAll("g")
            .data(data)

        var elemEnter = elem.enter()
            .append("g")

        var dot = elemEnter.append("circle")
            .on("mouseover", function(d) {
              svg.selectAll("circle")
                .attr('stroke-width',0)
                .transition()
                .duration(200)
                .style("opacity", 0.2);
              div.transition()
                .duration(100)
                .style("opacity", .9);
              div.html("<b>" + d.Genename + "</b> "+ "<br/>" + "x: " + d.xaxis + "<br/>" + "y: " + d.yaxis + "<br/>" + "size: " + d.size)
                .style("left", (d3.event.pageX + 5) + "px")
                .style("top", (d3.event.pageY + 10) + "px");
              svg.selectAll(".name")
                .transition()
                .duration(200)
                .style("opacity", 0.2);
              d3.select(this)
                .transition()
                .duration(200)
                .attr('stroke','black')
                .attr("stroke-width", strokeWidth * 2)
                .style("opacity", 1);
              svg.append("text")
                .attr("x", x(d.xaxis))
                .attr("y", y(d.yaxis)-10)
                .attr("id", "t" + d.Genename)
                .style("text-anchor", "middle")
                .text(d.Genename);
            })
            .on("mouseout", function(d) {
              div.transition()
                .duration(200)
                .style("opacity", 0);
              d3.select(this)
                .attr("stroke-width", 0);
              svg.selectAll("circle")
                .transition()
                .duration(200)
                .style("opacity", 0.7);
              svg.selectAll("text")
                .transition()
                .duration(200)
                .style("opacity", 1);
              d3.select("#t"+d.Genename)
                .remove();
            })
            .attr("r",function(d) {
              if (d.size < 2.5) {
                return 2.5;
              } else {
                return d.size;
              }
            })
            .attr("cx", function(d) { return x(0); })
            .attr("cy", function(d) { return y(0); })
              .transition()
              .delay(function(d,i){return i * 0.5})
              .duration(2000)
              .attr("cx", function(d) { return x(d.xaxis); })
              .attr("cy", function(d) { return y(d.yaxis); })
            .attr("class", function(d) {
              if(d.color == "UVM") {
                return "dot dotBlue";
              } else if (d.color == "CLL") {
                return "dot dotRed";
              } else if (d.color == "CLL+UVM") {
                return "dot dotGray";
              } else {
                return "dot dotWhite";
              }
            });

          data.forEach(function(d) {
            if(d.Genename == "Not known") {
              d.Genename = "unknown";
            }
            if(d.color != "backgroud") {
              if(d.yaxis > 11) {
                svg.append("text")
                  .attr("x", x(d.xaxis))
                  .attr("y", y(d.yaxis)-10)
                  .attr("class", "name")
                  .style("text-anchor", "middle")
                  .text(d.Genename);
              } else if (d.yaxis > 9){
                if (d.xaxis > 0.1 || d.xaxis < -0.1) {
                  svg.append("text")
                    .attr("x", x(d.xaxis))
                    .attr("y", y(d.yaxis)-10)
                    .attr("class", "name")
                    .style("text-anchor", "middle")
                    .text(d.Genename);
                }
              } else if (d.xaxis > 0.28 || d.xaxis < -0.28){
                svg.append("text")
                  .attr("x", x(d.xaxis))
                  .attr("y", y(d.yaxis)-10)
                  .attr("class", "name")
                  .style("text-anchor", "middle")
                  .text(d.Genename);
              }
            }
          })
      //name transition
        svg.selectAll(".name")
          .attr("opacity",0)
            .transition()
              .delay(2000)
              .duration(1000)
              .attr("opacity",1)

        // Add the X Axis
        svg.append("g")
            .attr("transform", "translate(0," + (height - scale(75)) + ")")
            .call(d3.axisBottom(x));

        svg.append("text")
          .style("text-anchor", "middle")
          .text("diff_PSI")
          .attr("transform",
                "translate(" + (width/2) + " ," +
                               (height - scale(75) + 40) + ")");

        // Add the Y Axis
        svg.append("g")
          .call(d3.axisLeft(y));

        svg.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left)
          .attr("x", 0 - (height / 2))
          .attr("dy", "1em")
          .style("text-anchor", "middle")
          .text("-log10(p-value) MUT vs WT");
      });
    </script>
  </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	font: 10px sans-serif;
	}
	.dotRed {
	fill: firebrick;
	}
	.dotGray {
	fill: lightgray;
	}
	.dotBlue {
	fill: dodgerblue;
	}
	.dotWhite {
	fill: white;
	display: none;
	}
	.dot {
	opacity: 0.7;
	}
	.line {
	stroke: red;
	stroke-width: 1;
	opacity: 0.7;
	}
	.dot text {
	pointer-events: none;
	font: 10px sans-serif;
	}
	div.tooltip {
	position: absolute;
	top: 0;
	text-align: left;
	width: 120px;
	height: 56px;
	padding: 2px;
	font: 12px sans-serif;
	pointer-events: none;
	}
	#chart {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: -1;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script>
	var chartDiv = document.getElementById("chart");
	var strokeWidth = 1;
	var margin = {top: 20, right: 20, bottom: 50, left: 50}
	var width = chartDiv.clientWidth - margin.left - margin.right;
	var height = chartDiv.clientHeight - margin.top - margin.bottom ;
	/*
	width = 960 - margin.left - margin.right,
	height = 700 - margin.top - margin.bottom;
	*/

	var scale = d3.scaleLinear().range([0, height]).domain([0,1000]);
	var x = d3.scaleLinear().range([0, width - scale(75)]).domain([-0.65,0.65]);
	var y = d3.scaleLinear().range([0, height - scale(75)]).domain([18,-0.5]);

	var svg = d3.select("body").append("svg")
	.attr("width", chartDiv.clientWidth-20)
	.attr("height", chartDiv.clientHeight-20)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	d3.csv("dataD.csv", function(error, data) {
	if (error) throw error;

	// lines
	svg.append("line")
	.attr("class", "line")
	.attr("x1",x(-0.65))
	.attr("x2",x(0.65))
	.attr("y1", y(1.3))
	.attr("y2", y(1.3));

	svg.append("text")
	.attr("x", x(-0.655))
	.attr("y", y(1.25))
	.attr("fill", "red")
	.text("q = 0.05")
	.style("text-anchor", "end")

	// add the tooltip
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// Add the scatterplot
	var elem = svg.selectAll("g")
	.data(data)

	var elemEnter = elem.enter()
	.append("g")

	var dot = elemEnter.append("circle")
	.on("mouseover", function(d) {
	svg.selectAll("circle")
	.attr('stroke-width',0)
	.transition()
	.duration(200)
	.style("opacity", 0.2);
	div.transition()
	.duration(100)
	.style("opacity", .9);
	div.html("<b>" + d.Genename + "</b> "+ "<br/>" + "x: " + d.xaxis + "<br/>" + "y: " + d.yaxis + "<br/>" + "size: " + d.size)
	.style("left", (d3.event.pageX + 5) + "px")
	.style("top", (d3.event.pageY + 10) + "px");
	svg.selectAll(".name")
	.transition()
	.duration(200)
	.style("opacity", 0.2);
	d3.select(this)
	.transition()
	.duration(200)
	.attr('stroke','black')
	.attr("stroke-width", strokeWidth * 2)
	.style("opacity", 1);
	svg.append("text")
	.attr("x", x(d.xaxis))
	.attr("y", y(d.yaxis)-10)
	.attr("id", "t" + d.Genename)
	.style("text-anchor", "middle")
	.text(d.Genename);
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", 0);
	d3.select(this)
	.attr("stroke-width", 0);
	svg.selectAll("circle")
	.transition()
	.duration(200)
	.style("opacity", 0.7);
	svg.selectAll("text")
	.transition()
	.duration(200)
	.style("opacity", 1);
	d3.select("#t"+d.Genename)
	.remove();
	})
	.attr("r",function(d) {
	if (d.size < 2.5) {
	return 2.5;
	} else {
	return d.size;
	}
	})
	.attr("cx", function(d) { return x(0); })
	.attr("cy", function(d) { return y(0); })
	.transition()
	.delay(function(d,i){return i * 0.5})
	.duration(2000)
	.attr("cx", function(d) { return x(d.xaxis); })
	.attr("cy", function(d) { return y(d.yaxis); })
	.attr("class", function(d) {
	if(d.color == "UVM") {
	return "dot dotBlue";
	} else if (d.color == "CLL") {
	return "dot dotRed";
	} else if (d.color == "CLL+UVM") {
	return "dot dotGray";
	} else {
	return "dot dotWhite";
	}
	});

	data.forEach(function(d) {
	if(d.Genename == "Not known") {
	d.Genename = "unknown";
	}
	if(d.color != "backgroud") {
	if(d.yaxis > 11) {
	svg.append("text")
	.attr("x", x(d.xaxis))
	.attr("y", y(d.yaxis)-10)
	.attr("class", "name")
	.style("text-anchor", "middle")
	.text(d.Genename);
	} else if (d.yaxis > 9){
	if (d.xaxis > 0.1 \|\| d.xaxis < -0.1) {
	svg.append("text")
	.attr("x", x(d.xaxis))
	.attr("y", y(d.yaxis)-10)
	.attr("class", "name")
	.style("text-anchor", "middle")
	.text(d.Genename);
	}
	} else if (d.xaxis > 0.28 \|\| d.xaxis < -0.28){
	svg.append("text")
	.attr("x", x(d.xaxis))
	.attr("y", y(d.yaxis)-10)
	.attr("class", "name")
	.style("text-anchor", "middle")
	.text(d.Genename);
	}
	}
	})
	//name transition
	svg.selectAll(".name")
	.attr("opacity",0)
	.transition()
	.delay(2000)
	.duration(1000)
	.attr("opacity",1)

	// Add the X Axis
	svg.append("g")
	.attr("transform", "translate(0," + (height - scale(75)) + ")")
	.call(d3.axisBottom(x));

	svg.append("text")
	.style("text-anchor", "middle")
	.text("diff_PSI")
	.attr("transform",
	"translate(" + (width/2) + " ," +
	(height - scale(75) + 40) + ")");

	// Add the Y Axis
	svg.append("g")
	.call(d3.axisLeft(y));

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x", 0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("-log10(p-value) MUT vs WT");
	});
	</script>
	</body>
	</html>