ndvo2710/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Two Bell Curves</title>
    <meta name="description" content="">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
    body {
        font: 17px Arial;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    /*.x.axis path {
        display: none;
    }*/
    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
        mix-blend-mode: multiply;
    }

    </style>
</head>

<body>

</body>

<script type="text/javascript">

function draw2(diff,cnt_A,cnt_B) {

}
//setting up empty data array
var data = [];

var diff = 0.7;
var cnt_A = "USA";
var cnt_B = "Singapore";
getData(diff); // popuate data

// Create a column name array inside data array
data["columns"] = ["y", "x1", "x2"]


var bells = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {'y': d.y, 'x': d[id]};
      })
    };
  });

// need to sort for plotting
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

bells[0].values.sort(function(a,b) {
    return a.y - b.y;
});

bells[1].values.sort(function(a,b) {
    return a.y - b.y;
});

var margin = {top: 50, right: 80, bottom: 30, left: 50},
    width = 1500 - margin.left - margin.right,
    height = 480 - margin.top - margin.bottom;


var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal();

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

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

var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.select("svg").append("g")
    .attr("class", "g_tittle")
    .attr("transform", "translate(" + margin.left + ",30)");

d3.select(".g_tittle").append("text")
   .attr({
        "class" : "cohen_float",
        "transform" : "translate(" + margin.left + ",0)",
        "text-anchor" : "middle",
        "x" : width *(0.4+ 0.3*diff/10),
        "y" : 0
   })
   .style({
        "font": "18px sans-serif",
        'font-weight': 'bold'
   })
   .text("Cohen's d: " + diff);


x.domain([-4,6]);
y.domain(d3.extent(data, function(d) { return d.y; }));
color.domain(["x1","x2"])
     .range(["#1f77b4","#d62728"]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

/*
svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Density");
*/
var bell = svg.selectAll(".bell")
      .data(bells)
    .enter().append("g")
      .attr("class", "bell");

bell.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values); })
      .style("stroke", function(d) { return color(d.id); });


// Add mu1 and mu2 line
svg.append("line")
    .attr("id", "mu1")
    .style("stroke", "white")
    .style("stroke-dasharray", ("3, 3"))
    .attr({
        x1 : width *0.4,
        x2 : width *0.4,
        y1 : 0,
        y2 : height
    });

svg.append("line")
    .attr("id", "mu2")
    .style("stroke", "white")
    .style("stroke-dasharray", ("3, 3"))
    .attr({
        x1 : width *(0.4+ diff/10),
        x2 : width *(0.4+ diff/10),
        y1 : 0,
        y2 : height
    });


// Add legend
svg.append("text")
   .attr("class", "legend_"+cnt_A)
   .attr({
        x : width * 0.7,
        y : height * 0.15
   })
   .style({
        "font": "18px Arial",
        "text-transform" : "uppercase",
        'font-weight': 'bold',
        "fill": "#1f77b4"
   })
   .text(cnt_A);

svg.append("text")
   .attr("class", "legend_"+cnt_B)
   .attr({
        x : width * 0.7,
        y : height * 0.2
   })
   .style({
        "font": "18px Arial",
        "text-transform" : "uppercase",
        'font-weight': 'bold',
        "fill": "#d62728"
   })
   .text(cnt_B);

function getData(d) {
// loop to populate data array with
// probabily - quantile pairs
for (var i = 0; i < 100000; i++) {
    q = normal(); // calc random draw from normal dist
    p = gaussian(q); // calc prob of rand draw
    el = {
        "y" : p,
        "x1": q,
        "x2": q + d
    };
    data.push(el);
};
};

// from http://bl.ocks.org/mbostock/4349187
// Sample from a normal distribution with mean 0, stddev 1.
function normal() {
    var x = 0,
        y = 0,
        rds, c;
    do {
        x = Math.random() * 2 - 1;
        y = Math.random() * 2 - 1;
        rds = x * x + y * y;
    } while (rds == 0 || rds > 1);
    c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
    return x * c; // throw away extra sample y * c
};

//taken from Jason Davies science library
// https://github.com/jasondavies/science.js/
function gaussian(x) {
    var gaussianConstant = 1 / Math.sqrt(2 * Math.PI),
        mean = 0,
        sigma = 1;

    x = (x - mean) / sigma;
    return gaussianConstant * Math.exp(-.5 * x * x) / sigma;
};
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Two Bell Curves</title>
	<meta name="description" content="">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
	body {
	font: 17px Arial;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	/*.x.axis path {
	display: none;
	}*/
	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	mix-blend-mode: multiply;
	}

	</style>
	</head>

	<body>

	</body>

	<script type="text/javascript">

	function draw2(diff,cnt_A,cnt_B) {

	}
	//setting up empty data array
	var data = [];

	var diff = 0.7;
	var cnt_A = "USA";
	var cnt_B = "Singapore";
	getData(diff); // popuate data

	// Create a column name array inside data array
	data["columns"] = ["y", "x1", "x2"]


	var bells = data.columns.slice(1).map(function(id) {
	return {
	id: id,
	values: data.map(function(d) {
	return {'y': d.y, 'x': d[id]};
	})
	};
	});

	// need to sort for plotting
	//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

	bells[0].values.sort(function(a,b) {
	return a.y - b.y;
	});

	bells[1].values.sort(function(a,b) {
	return a.y - b.y;
	});

	var margin = {top: 50, right: 80, bottom: 30, left: 50},
	width = 1500 - margin.left - margin.right,
	height = 480 - margin.top - margin.bottom;


	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.ordinal();

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

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

	var line = d3.svg.line()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); });


	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.select("svg").append("g")
	.attr("class", "g_tittle")
	.attr("transform", "translate(" + margin.left + ",30)");

	d3.select(".g_tittle").append("text")
	.attr({
	"class" : "cohen_float",
	"transform" : "translate(" + margin.left + ",0)",
	"text-anchor" : "middle",
	"x" : width (0.4+ 0.3diff/10),
	"y" : 0
	})
	.style({
	"font": "18px sans-serif",
	'font-weight': 'bold'
	})
	.text("Cohen's d: " + diff);


	x.domain([-4,6]);
	y.domain(d3.extent(data, function(d) { return d.y; }));
	color.domain(["x1","x2"])
	.range(["#1f77b4","#d62728"]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	/*
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Density");
	*/
	var bell = svg.selectAll(".bell")
	.data(bells)
	.enter().append("g")
	.attr("class", "bell");

	bell.append("path")
	.attr("class", "line")
	.attr("d", function(d) {
	return line(d.values); })
	.style("stroke", function(d) { return color(d.id); });


	// Add mu1 and mu2 line
	svg.append("line")
	.attr("id", "mu1")
	.style("stroke", "white")
	.style("stroke-dasharray", ("3, 3"))
	.attr({
	x1 : width *0.4,
	x2 : width *0.4,
	y1 : 0,
	y2 : height
	});

	svg.append("line")
	.attr("id", "mu2")
	.style("stroke", "white")
	.style("stroke-dasharray", ("3, 3"))
	.attr({
	x1 : width *(0.4+ diff/10),
	x2 : width *(0.4+ diff/10),
	y1 : 0,
	y2 : height
	});


	// Add legend
	svg.append("text")
	.attr("class", "legend_"+cnt_A)
	.attr({
	x : width * 0.7,
	y : height * 0.15
	})
	.style({
	"font": "18px Arial",
	"text-transform" : "uppercase",
	'font-weight': 'bold',
	"fill": "#1f77b4"
	})
	.text(cnt_A);

	svg.append("text")
	.attr("class", "legend_"+cnt_B)
	.attr({
	x : width * 0.7,
	y : height * 0.2
	})
	.style({
	"font": "18px Arial",
	"text-transform" : "uppercase",
	'font-weight': 'bold',
	"fill": "#d62728"
	})
	.text(cnt_B);

	function getData(d) {
	// loop to populate data array with
	// probabily - quantile pairs
	for (var i = 0; i < 100000; i++) {
	q = normal(); // calc random draw from normal dist
	p = gaussian(q); // calc prob of rand draw
	el = {
	"y" : p,
	"x1": q,
	"x2": q + d
	};
	data.push(el);
	};
	};

	// from http://bl.ocks.org/mbostock/4349187
	// Sample from a normal distribution with mean 0, stddev 1.
	function normal() {
	var x = 0,
	y = 0,
	rds, c;
	do {
	x = Math.random() * 2 - 1;
	y = Math.random() * 2 - 1;
	rds = x * x + y * y;
	} while (rds == 0 \|\| rds > 1);
	c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
	return x * c; // throw away extra sample y * c
	};

	//taken from Jason Davies science library
	// https://github.com/jasondavies/science.js/
	function gaussian(x) {
	var gaussianConstant = 1 / Math.sqrt(2 * Math.PI),
	mean = 0,
	sigma = 1;

	x = (x - mean) / sigma;
	return gaussianConstant * Math.exp(-.5 * x * x) / sigma;
	};
	</script>

	</html>