How to create a Normal Distribution Normal Distribution in D3.js

Question

I want to create a Normal Distribution Chart (Bell Curve) in d3.js.

like this [http://statwiki.ucdavis.edu/@api/deki/files/73/a9f781e1b0891ceedd50cd7fea7d0f39.jpg?revision=1][1]

I have tried search in google but I am not able to get any example of the same. Can any one help me?

Answer 1

All you really need to do is prepare a line chart and compute the pdf. D3 provides the charting framework and Jason Davies Science library the stats.

The d3 line function boils down to:

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

And your Bell curve coordinates can be calculated using the Box-Muller Transform and passing this to the Gaussian pdf.

You can see this all put together in this Bl.ock. You should also check out the links in the code.