Investigate non-ordinal issues for Bars

[timhall]

Investigate non-ordinal issues for Bars

[curran]

Hello,

I recently came across a similar issue in chiasm-charts. I wanted to have a "bar chart" module that would work both as a typical bar chart (using ordinal rangeBands) and also as a histogram (using bars with zero padding in conjunction with a linear scale). I ended up adding the specification of the interval between histogram bins into the dataset specification, so the bar chart module can read that data to know how wide to make the bars of a histogram.

Here's the solution I ended up with in code, found in mixins.rangeBands:

  if(metadata.interval){

    // Histogram bins.
    my[rangeBand] = Math.abs( scale(metadata.interval) - scale(0) );
  } else {

    // Typical ordinal bars.
    my[rangeBand] = scale.rangeBand();
  }

Here's an example that shows the bar chart mode and histogram mode working next to one another: Chiasm-Charts v0.1.0.

I'm excited to come across your project! It looks we are exploring similar territory.

[timhall]

@curran Thanks for the reference, lots of interesting things happening in the chiasm-project. I had been figuring an explicit width was the best approach (especially in your histogram example where there are plenty of empty bands that would throw off most calculations). I'll have to think about how to best integrate it, but it looks like a good direction to me.

[curran]

Indeed, the empty bands throw off any approach where you could try to guess the widths. This is something I only really understood after studying this example, which really boils it down with straight D3 - Heatmap (2D Histogram, CSV).

[timhall]

(From #45) Some possible solutions:

1. Specify an interval for the chart and calculate the width from that
2. Specify the data length and calculate the width from this (automatically determining is difficult since the data could be sparse)
3. Use the linear/time scale to specify the domain for an ordinal scale

I think an interval solution will work and I've been investigating how best to add it, but I think the best solution is to create an ordinal scale from the given linear/time scale:

// Use linear/time scale to define ticks for ordinal
var xScale = d3.scale.linear().domain([0, 50]);
var xScaleOrdinal = d3.scale.ordinal().domain(xScale.ticks(10));
// => pass ordinal to bars