('width', d =>  xScale(d.value))
        .attr('height', yScale.bandwidth())
        .attr('y', datum => yScale(datum.name))
        .attr('fill', 'green')
        .attr('opacity', '0.8')

        // the following four lines of code is the simplest pattern of adding axis; 
        const yAxis = d3.axisLeft(yScale);
        const xAxis = d3.axisBottom(xScale);
        g.append('g').call(yAxis);
        g.append('g').call(xAxis).attr('id', 'xaxis')
        .attr('transform', `translate(0, ${innerHeight})`);

