Adding axes

The left axis is the same as shown in Chapter 4, Making a Basic Scatter Plot Interactive. Add this code to the bottom of the AJAX callback:

var leftAxis = d3.axisLeft(yScale);
d3.select('svg')
    .append('g').attr('id', 'left-axis')
    .call(leftAxis);

To create the bottom axis, we need to be able to map strings to points on a domain. We'll use a band scale for this, which just divides up the range into equal parts and maps it to an array of discrete values (values that can't be interpolated, for example, strings). Add this code to the bottom of the AJAX callback:

var skillScale = d3.scaleBand();
var skillDomain = data.map(function(skill){
    return skill.name
});
skillScale.range([0, WIDTH]);
skillScale.domain(skillDomain);

Notice we use data.map(). This is regular JavaScript that simply loops through an array...