Axes

Given a data and Scales, the d3.svg.axis() Axes component creates a horizontal-axis or/and vertical-axis.

Axis function can be setup like

var xaxis = d3.svg.axis()

You can provide sclae from previously defined xcale.

xaxis.scale(xscale)

or

var xaxis = d3.svg.axis()
          .scale(xscale)

also provide position like:

xaxis.orient("bottom")

To generate the axis and into SVG, we must call the xaxis function:

svg.append("g")
    .call(xaxis)

Add Axis to Scatterplot

//Define X axis
var xaxis = d3.svg.axis()
          .scale(xscale)
          .orient("bottom")
          .ticks(5)
//Define Y axis
var yaxis = d3.svg.axis()
          .scale(yscale)
          .orient("left")
          .ticks(5)
//Create X axis
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height - padding) + ")")
  .call(xaxis)
//Create Y axis
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding + ",0)")
  .call(yaxis)