Question

I’ve been trying to implement Reusability on a histogram plotted using d3.
I want that after plotting of the dataset, I want to plot statistical mean, variance etc. on the same plot.These would be user driven, basically I want to use the same plot.

Here’s my attempt on coding the skeleton histogram code

function histogram(){

//Defaults
 var margin = {top: 20, right: 20, bottom: 20, left: 20},
  width = 760,
  height = 200;

function chart(selection){

    selection.each(function(d,i){

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

    var data = d3.layout.histogram()
        //Currently generates 20 equally spaced bars
        .bins(x.ticks(20))
        (d);

    var y = d3.scale.linear()
        .domain([0, d3.max(d) ])
        .range([ height - margin.top - margin.bottom, 0 ]);

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

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

    var svg = d3.select(this).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 + ")");

    var bar = svg.selectAll(".bar")
        .data(data)
      .enter().append("g")
        .attr("class", "bar");

    /*
        Corrected bars
         bar.append("text")
            .attr("dy", ".75em")
            .attr("y", 6)
            .attr("x", x(data[0].dx) / 2)
            .attr("text-anchor", "middle")
            .text(function(d) { return formatCount(d.y); });
        */

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

    svg.append("g")
        .attr("class","y axis")
        .call(yAxis);

    bar.append("rect")
        .attr("x", function(d,i){ return x(d.x); })
        .attr("width", x(data[0].dx) - 1)
        .attr('y',height)    
      .transition()
      .delay( function(d,i){ return i*50; } )
        .attr('y',function(d){  return y(d.y) })
        .attr("height", function(d) { return height - y(d.y); });


    });

}

 //Accessors//       
chart.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return chart;
};

 chart.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return chart;
};

return chart;

}

It’s assigning a negative width for bars. My input dataset would simply be an array of numbers and I need to plot the frequency distribution

Answer 1

If you’re asking how to implement the avg, standard deviation, once you have your histogram you can draw lines and text on it to represent the avg. I would calculate which bar the average is in, and the % of the way through the bar and then something like this:

var averageBar = vis.selectAll("g.bar:nth-child(" + (averageBarIndex + 1) + ")");
averageBar.append("svg:line")
.attr("x1", 0)
.attr("y1", y.rangeBand()*averageBarPercentage)
.attr("x2", w)
.attr("y2", y.rangeBand() * averageBarPercentage)
.style("stroke", "black");

averageBar.append("svg:text")
.attr("x", w-150)
.attr("y", y.rangeBand() * averageBarPercentage-15)
.attr("dx", -6)
.attr("dy", "10px")
.attr("text-anchor", "end")
.text("Average");

That will give you a line marking the average, you can do similar for the standard deviation.