CODEWITHSUNDEEP
d3.js
Ashwini Khare
Ashwini Khare

Reputation: 1675

Minor tweaks for histogram generated using d3

Following is the stripped down version is what I'm using to generate histograms using d3 and a bit of jQuery.http://bl.ocks.org/4611158

While most of it might seem right, I'm still confused regarding

  1. Why there is no '14' in the x-axis as should have been for the given input in the above example? Instead 13 gets the ordinate of what should have been 14's

  2. In my trials d3.layout.histogram() assigned negative(and hence non-plot table) widths when I try altering the output range of scale to some non-zero value. why is it so? what is the possible workaround?

My main motive to use ordinal scale was to make ticks centrally aligned below the bars, unlike what Mike used in his demo for histograms. I've also made the number of bins equal to the number of ticks in d3.layout.histogram() for the very same purpose. I'm sure there might be a better way around to code what I'm looking for

Also any ideas how to add a 'graph' of indicator lines like its been done in nvd3 visualization (light gray in background )that will make it more pleasing?

Upvotes: 1

Views: 1634

Answers (1)

musically_ut
musically_ut

Reputation: 34288

There is no 14 and there are two 8s on the x-axis. This is because the bins function will diligently divide the range = 14 - 1 = 13 into 14 intervals as per the API reference:

The bins may be specified as a number, in which case the range of values will be split uniformly into the given number of bins. Or, bins may be an array of threshold values, defining the bins; the specified array must contain the rightmost (upper) value, thus specifying n + 1 values for n bins. ...

Before solving this issue, I am guessing that the second problem you are facing is that if the rangeDefault has negative values, then some values are not plotted. To fix that problem, being unaware of the exact need of it, I will start by removing the following:

rangeDefault[0] = 0; //All histograms start from 0 <-- REMOVED

Then to fix the first problem, use the second form of arguments for binsas shown here:

  var bins = [];
  for(var ii = settings.range[0], jj = 0; ii <= settings.range[1] + 1; ii++, jj++)
      bins[jj] = ii;

  var data = d3.layout.histogram()
                .bins(bins)(settings.data);

I hope this addresses the primary queries.

Adding the light grey indicator lines is fairly easy, as shown here. The changes were:

vis.css

.y.axis line.tick { opacity: .3; }

vis.js

Moving the axis before the chart in the DOM because of how SVG is laid out affects its z-index:

var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class","y axis");
gEnter.append("g").attr("class", "bars");

And finally making the major tickSize on the y-axis -(width - margin.right - margin.left):

yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickSubdivide(true)
            .tickPadding(5)
            .ticks(10)
            .tickSize(-(width - margin.right - margin.left), 2, 8);

Upvotes: 3

Related Questions