Discussions

Expand all | Collapse all

Bin Parameters for Y-axis

  • 1.  Bin Parameters for Y-axis

    Posted 08-22-2018 16:35

    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.  RE: Bin Parameters for Y-axis

    Posted 08-22-2018 19:23

    Hi @yawokyere,

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

    Regards,
    Veda



  • 3.  RE: Bin Parameters for Y-axis

    Posted 08-22-2018 19:36

    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.  RE: Bin Parameters for Y-axis

    Posted 08-27-2018 03:26

    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.  RE: Bin Parameters for Y-axis

    Posted 08-27-2018 12:41

    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)