Next comes the actual visualizing of the data using bars. It's important to have some basic understanding of how to use D3.js as, otherwise, this part will mean very little to you.

Firstly, we define the bar's variable by selecting the canvas and possible rectangles, and then applying the updating dataset to it using the data() function:

//MasteringQSBarChart.js - scope.render() (snippet)

//Bar Width
 scope.bar_width = scope.width/scope.bars.length*0.8;

//Visualize Bars
 var bars = scope.svg.select('.canvas')
 .selectAll('rect')
 .data(scope.data)

Now it's time to enter the data and append the rect SVG elements to the canvas, and apply the settings and stylings of the bars based on their underlying data:

//MasteringQSBarChart.js - scope.render() (snippet)
//Enter 
 bars
     .enter()
     .append("rect") 
     .transition()
     .duration(300)
     .attr("class", "bar")
     .attr("elementid", function(d){
         return d.BarID
     })
     .attr('fill', scope.bar_color)
     .attr('width', scope.bar_width)
     .attr('x', function(d){
         return scope.x(d.Bar)
     })
     .attr('y', function(d){
         return scope.y(d.Value);
     })
     .attr('height', function(d){ 
         return scope.height-scope.y(d.Value);
     })

The physical x position in pixels is returned by our scope.x function, based on the predefined range and domain. The same applies to the y-axis; however, given it's a rectangle, it assumes two values: the y position and the height.

We want to ensure the bars are fully responsive and that they do the following:

• Resize when the screen size changes 
• Are added and removed depending on the availability of the underlying data

Therefore, we will need to add code for the update() and exit() events.

The code to update the bar chart is very similar to the first one drawing the bars. However, it specifies which attributes and styles are updated, and you can apply a slick transition to them, as follows:

//MasteringQSBarChart.js - scope.render() (snippet)
//Update
 scope.svg.selectAll('rect')
     .attr("elementid", function(d){
         return d.BarID
     })
     .attr('fill', scope.bar_color)
     .attr('width', scope.bar_width)
     .attr('x', function(d){
         return scope.x(d.Bar)
     }) 
     .transition()
     .duration(300)
     .attr('y', function(d){
         return scope.y(d.Value);
     })
     .attr('height', function(d){
         return scope.height-scope.y(d.Value);
     })

And this is the exit() event, which simply removes bars that are no longer available based on the dataset:

//MasteringQSBarChart.js - scope.render() (snippet)
//Exit
 bars
     .exit()
     .remove();

Lastly, but equally important, is the rendering of the actual x and y-axes. No, they were not forgotten, but deliberately put to the end of the rendering code for a particular reason. Whichever element gets rendered last is the one that has the highest z index, for example, it overlaps the other objects. To ensure the axis is always visible and we do not have any ugly overlaps, the axis is rendered last:

//MasteringQSBarChart.js - scope.render() (snippet)
//Add x-axis
scope.svg.selectAll('.x-axis')
    .transition(300)
    .call(
        scope.xAxis
        .scale(scope.x)
        .orient('buttom')
        .ticks(20)
    )

//Add y-axis
scope.svg.selectAll('.y-axis')
    .transition(300)
    .call(
        scope.yAxis
        .scale(scope.y)
        .orient('left')
        .ticks(20)
    )

Once everything is accomplished, you should be able to add the visualization to your Qlik Sense app, pick and choose one dimension and one metric, and see a MasteringQS bar chart on your screen, which looks similar to the following one: 

The chart will not only render but will also smoothly transition when making selections, adding a whole new layer of visualization dynamics, as the user can see how their values are updating and changing based on the filters they apply.

One thing, however, you will notice immediately is the thick lines and the missing ticks on the axes. This is because no CSS styling has been defined yet.