To visualize data, you first need data. This is done by reading the returned qHyperCube and mapping the results to a convenient scope.data.

Furthermore, we will also leverage the same underlying dataset to return the names of the bar dimension values, which will then be used to populate the x-axis domain using scope.x.domain(scope.bars). Remember, the x-axis has an ordinal structure, so it can assume and work with discrete values. 

To define the domain of the y-axis, we will assume 0 (zero) as the minimum value, and take the maximum available value from the data set, using d3.max. Bear in mind that you can also use layout.qHyperCube.qMeasureInfo[0].qMax to obtain the same amount directly from the qHyperCube.

The last bit revolves around defining the width of the bars that are to be rendered:

//MasteringQSBarChart.js - scope.getData() (snippet)
//Takes the returned dataset and visualizes the bars
 //Data prep
 scope.data = layout.qHyperCube.qDataPages[0].qMatrix.map(function(d, i, arr){
         return {
             Bar: d[0].qText,
             BarID: d[0].qElemNumber,
             Value: d[1].qNum,
         }
 })
scope.bars = layout.qHyperCube.qDataPages[0].qMatrix.map(function(d, i, arr){
     return d[0].qText
 })
//x-Axis values
 scope.x.domain(scope.bars)
//y-Axis domain
 scope.y.domain([
     0, 
     d3.max(scope.data, function(d){
         return d.Value;
     })
 ])