jqueryd3.jsjqplotprotovis

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


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?


Solution

  • 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.