Bin Parameters for Y-axis


#1

Is there a way to bin y axis for lineChart? timeBin used in the code below bins the x-axis but I am looking to bin the y-axis instead.

const lineChart = dc.lineChart('.line-chart')
    .width(width/2)
    .height(height/1.5)
    .elasticY(true)
    .renderHorizontalGridLines(true)
    .brushOn(true)
    .yAxisLabel('Average distance')
    .dimension(dimension)
    .group(group)
    .binParams({
        timeBin: 'week',
        binBounds: [bounds.deptime_minimum, bounds.deptime_maximum]
    });

#2

Hi @yawokyere,

Confirmed with engineering that binParams is a method only for dimensions (x-axis), and not measures (y-axis).

Regards,
Veda


#3

So there is no way to bin measures on the y-axis? the heatmap in immerse can bin measures on the y-axis, but I can’t seem to find a way to do that in mapd charting.


#4

In crossfilter and mapdc.js, which are the basis for mapd-charting, which is in turn used for some of the charts in Immerse, there is no ability to bin on measures. The y-axis in heatmap is actually part of the group by, so its technically a dimension and not a measure (the color is a measure).

You could technically bin yourself with a custom y-axis measure, something like floor((avg(y_measure) - y_min) / (y_max - y_min) * num_bins)) (note I haven’t checked that for accuracy).

Hopefully this helps.

Regards


#5

I tried implementing but not sure where to put add the bins to my dimension. See below

const yMeasures = [
  {
    expression: "loc",
    agg_mode: "min",
    name: "ymin"
  },
  {
    expression: "loc",
    agg_mode: "max",
    name: "ymax"
  },
  {
    expression: "loc",
    agg_mode: "avg",
    name: "yaverage"
  }
]
const ybins = Math.floor((yMeasures.yaverage-yMeasures.ymin)/(yMeasures.ymax-yMeasures.ymin))*20

since I dimension by time and location, I am not sure where to put the bins.

return crossfilter
  .groupAll()
  .reduceMulti(timeChartMeasures)
  .valuesAsync(true)
  .then((timeChartBounds) => {
    const timeChartDimension = crossfilter.dimension(['c5_datetime','loc'])
    const timeChartGroup = timeChartDimension.group(ybins).reduceAvg("speed")

    const [w, h] = getChartSize()
    const numTicks = 5
    heatChart = dc
      .heatMap(parent)
      
      .width(w)
      .height(h)
      .dimension(timeChartDimension)
      .group(timeChartGroup)