Probability density function with javascript d3 and dc

Question

I'm trying to create a probability density function of a dataset using Javascript, (d3 and dc libraries) (similar to density function of R) but I have not found how can I do it.

Can it be done?

Thanks

PD: With jqplot is this: http://services.mbi.ucla.edu/jqplot/examples/kcp_pdf.html

It's just a matter of computing the points and then plotting them. For the former, you can use anything that already exists, e.g. jqplot. — Lars Kotthoff, Jul 23 '14 at 17:02
My problem was that I needed to do it with dc. I found libraries that implements KDE ([science.js](https://github.com/jasondavies/science.js)) and I used them and the results have been good. Thanks! — fhuertas, Jul 28 '14 at 14:21

fhuertas · Accepted Answer · 2019-01-26T11:42:35.913

Finally, I have to be able to do with the KDE algorithm (implemented in science.js library)

How ever the library dc need that the data is adapted. When the data is reduced in a object with all appearances and its frequency, the object must be transformed to an array with a entry for each appearance. The groups is needed because dc need a group to paint.

My solutions has been:

// Creating the group
var group = dimension.group().reduceSum();
......
// Process the object. 
groups = group.all()
var newValues = []
for (var i = 0; i < groups.length; i++) {
    for (var j = 0; j < groups[i].value;j++){
        if (groups[i].key == "null" ||
            groups[i].key == null ||
            (groups[i].key - start < 0) ||
            (groups[i].key - end > 0)) {
        } else {
            newValues.push(parseFloat(groups[i].key))
        }
    }
}
.....
// Creating the new data that represent a density function. 
var kde = science.stats.kde().sample(newValues);
// I have replaced the bandwidth method (Multivariate Density Estimation)
// because this method works better than previous (Density Estimation) 
// min and max are calculated previously 
kde.bandwidth(science.stats.bandwidth.nrd0);
var frequency = Math.abs(parseFloat(max) - parseFloat(min)) / 512
var newData = kde(d3.range(min,max,frequency));

.....
// The array that is inside of the group is a reference (obviously but it is important)
// Deleting the contains of the array
groups.splice(0,groups.length) 
// add the new data
for (var key in newData) {
    groups.push({key:newData[key][0],value:newData[key][2]
})

Probability density function with javascript d3 and dc

1 Answers1