Adding the axis on the top and bottom

The final step we need to take to get the figure from the beginning of this section is to add the top and bottom axes. D3 provides you with a d3.axis<orientation> function, which allows you to create an axis at the bottom, top, left, or right side. When creating an axis, we pass in a scale (which we also used for the width of the rectangles), and tell D3 how the axis should be formatted. In this case, we want 20 ticks, and use the s formatting, which tells D3 to use the international system of units (SI).
This means that D3 will use metric prefixes to format the tick values (more info can be found here: https://en.wikipedia.org/wiki/Metric_prefix).

var bottomAxis = d3.axisBottom().scale(yScale).ticks(20, "s"); 
var topAxis = d3.axisTop().scale(yScale).ticks(20, "s"); 
 
chart.append("g") 
    .attr('transform', 'translate( 0 ' + both.length * (barWidth + barMargin) +  ')') 
    .call(bottomAxis); 
 
chart.append("g") 
    .attr('transform', 'translate( 0 ' + -barMargin + ' )') 
    .call(topAxis);

And with that, we've recreated the example we saw at the beginning of this section:

If you look back at the code we showed at the beginning of this section, you can see that we only need a small number of lines of code to create a nice visualization.