garbage_variable = {
d3.select("#normal-density")
.selectAll("*")
.remove()
var margin = {top: 40, right: 30, bottom: 50, left: 100},
width = 530 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#normal-density")
.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 + ")");
const data_x = range(-10, 10, 0.01);
const data_y_std = normal_pdf(range(-10, 10, 0.01), 0, 1);
const data_y = normal_pdf(range(-10, 10, 0.01), mu, sigma);
const data = data_x.map((value, index) => {
return {'x': value, 'y_std': data_y_std[index], 'y': data_y[index]};
});
// Now I can use this dataset:
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain([d3.min(data, function(d) { return +d.x; }), d3.max(data, function(d) { return +d.x; })])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return +Math.max(d.y, d.y_std); })])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// Add the line
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y_std) })
);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
);
svg.selectAll('text')
.style('font-size', '14px');
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("y", x(-14))
.attr("x", -y(0)/2)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.style('font-size', '24px')
.text("Density");
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "middle")
.attr("x", x(0))
.attr("y", height + 45)
.style('font-size', '24px')
.text("x");
svg.append("text")
.attr("x", width / 2)
.attr("y", 0)
.attr("text-anchor", "middle")
.text("Normal Curve")
.attr("dy", "-15px")
.style('font-size', '32px')
.attr("class", "plot-title");
// create a list of keys
var keys = ['N(0, 1)', 'N(' + 3 + ' '+ 5 +')']
svg.append("rect")
.attr("x", x(6))
.attr("y", 40)
.attr("width", 20)
.attr("height", 2)
.style("fill", "steelblue")
svg.append("text")
.attr("x", x(7.5))
.attr("y", 45)
.text("N(0, 1)")
.style("font-size", "15px")
.attr("alignment-baseline","middle")
svg.append("rect")
.attr("x", x(6))
.attr("y", 60)
.attr("width", 20)
.attr("height", 2)
.style("fill", "red")
svg.append("text")
.attr("x", x(7.5))
.attr("y", 65)
.text('N(' + mu + ', '+ (sigma**2).toPrecision(2) +')')
.style("font-size", "15px")
.attr("alignment-baseline","middle")
};