e.g. of EUE for various datasets

by Nivaldo

HTML

<button id="update1">Update to Blue</button>
<button id="update2">Update to Green</button>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>    
<script src="HEScript.js" type="text/javascript">

CSS

circle { 
  stroke:  black ;
  stroke-width: 1px;
  fill: red;
}

rect {
  fill: #fff;
}

.axis path, .axis line {
	fill: none;
  	stroke: #ddd;
}

svg {
	font: 10px sans-serif;
	/*font-family: 'Hoefler Text', Georgia, 'Times New Roman', serif;*/
  	shape-rendering: crispEdges;
}

JavaScript

var graphData = Array();
var arrayValues = Array();

graphData.push(["6.482143", "6.956962", "6.842203", "6.635454", "6.351578", "6.719902", "6.550186"]);

graphData.push(["8.620753", "8.602015", "8.488841", "8.193242", "8.969061", "8.168992", "8.116956"]);

graphData.push(["4.236796", "4.964187", "4.295199", "10.086927", "10.406500", "10.518251", "10.621223", "2.5", "3.5"]); // added 2 points

arrayValues = ["t(15;17)", "inv(16)/t(16;16)", "t(8;21)", "t(11q23)/MLL", "complex ab. karyotype", "HSC", "MPP", "CMP", "GMP", "MEP", "early_PM", "late_PM", "MY", "MM", "BC", "PMN", "Mono"];

console.log(arrayValues[0]);

//Setting generic width and height values for our SVG.
var margin = {top: 60, right: 0, bottom: 70, left: 40},
    
genWidth = 1024;
genHeight = 768;

width = genWidth - 70 - margin.left - margin.right,
height = genHeight - 100 - margin.top - margin.bottom;

//Other variable declarations.
var minAxisY = 999999;
var maxAxisY = 0;

//Creating scales used to scale everything to the size of the SVG.
var xScale = d3.scale.linear()
.domain([0, genWidth])
.range([0, width-margin.right]);

var yScale = d3.scale.linear()
.domain([0, genHeight])
.range([height, margin.bottom]);

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");

//Zoom command ...
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1,10])
.on("zoom", zoomTargets);

// The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc..
var SVG = d3.select("#mainSVG")
.attr("class", "SVG")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//This creates a body with a clippath inside the svg where all element in the graph will be. This prevents elemnts on the graph to go past the axis.
var SVGbody =...