Axis API in D3.js

The axis provide some human-readable marks used for reference scaling. A graph contains two axes; x-axis (Horizontal axis) and y-axis (vertical axis). D3.js brings some functions that help you to create the axes. An axis is a combination of Lines, Labels, and Ticks. An axis is also containing a scale, so an axis always require a scale to manipulate.

Configuration of Axis API

You can configure the above API with the help of the following script.

</script>

Axis API Methods

Here, we have some important functions/ methods served by D3.js to create an axis API explained below.

d3.axisTop()

This method can be applied if you want to design a top horizontal axis.

d3.axisBottom()

You can apply this method if you want to produce a bottom horizontal axis.

d3.axisRight()

This function can be used to create a right-oriented vertical axis.

d3.axisLeft()

This method can be applied to generate a vertical axis on the left side.

Now, some examples are explained below to understand the axis API methods.

Example of d3.axisBottom() method

Here, we have an example of designing a graph on the x-axis.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var width = 600,

height = 800;

var data = [20, 25, 30, 35, 40];

var svg = d3.select("body") // Append the SVG elements

.append("svg")

.attr("width", width)

.attr("height", height);

var scale = d3.scaleLinear() // Create the scale

.domain([d3.min(data), d3.max(data)])

.range([0, width - 10]);

var x_axis = d3.axisBottom() // Add the scales to an axis

.scale(scale);

svg.append("g") //Append the group and add axis

.call(x_axis);

</script>

</body>

</html>

Output

After the successful execution of the above example code, you got the following output.

Example of d3.axisLeft() Method

Here, we have an example to design a graph on the y-axis.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var width = 800, height = 600;

var data = [30, 45, 50, 65, 70];

var svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height);

var scale = d3.scaleLinear()

.domain([d3.min(data), d3.max(data)])

.range([height/2, 0]);

var y_axis = d3.axisLeft()

.scale(scale);

svg.append("g")

.attr("transform", "translate(80, 40)")

.call(y_axis);

</script>

</body>

</html>

Output

You got the following output, after the successful execution of the code.

Example

In this example, we are going to combine the above-explained axes.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var width = 600, height = 500;

var data = [40, 55, 70, 85, 100];

var svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height);

var xscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width - 100]);

var yscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([height/2, 0]);

var x_axis = d3.axisBottom()

.scale(xscale);

var y_axis = d3.axisLeft()

.scale(yscale);

svg.append("g")

.attr("transform", "translate(50, 10)")

.call(y_axis);

var xAxisTranslate = height/2 + 10;

svg.append("g")

.attr("transform", "translate(50, " + xAxisTranslate +")")

.call(x_axis)

</script>

</body>

</html>

Output

After the compilation of the following results, you got the following output.