Animated Bar Chart with D3

Learn how to create an interactive animated bar chart with D3.js, complete with smooth transitions and hover effects. Enhance your data visualizations by incorporating dynamic animations and displaying values on mouse events.

Axes in D3

Learn to create axes using scales in D3. Axes provide reference marks for scales, with horizontal (x-axis) and vertical (y-axis) orientations. D3 has functions to draw these axes, using scales for lines, ticks, and labels.

Axis Methods in D3

Axis Method	Description
d3.axisTop()	Creates top horizontal axis.
d3.axisRight()	Creates vertical right-oriented axis.
d3.axisBottom()	Creates bottom horizontal axis.
d3.axisLeft()	Creates left vertical axis.

Let's add an x-axis to a graph.

Syntax


<!doctype html>
<html>
<body>
<script>
var width = 300,
height = 200;

var data = [5, 10, 15, 20, 25];

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([0, width - 50]);

var x_axis = d3.axisBottom()
            .scale(scale);

svg.append("g")
.attr("transform", "translate(30, 30)")
.call(x_axis);
</script>
</body>
</html>

Output


Displays an x-axis in the browser.

Explanation:

Define SVG dimensions:


var width = 300, height = 200;

Define SVG width and height as variables.

Dataset:


var data = [5, 10, 15, 20, 25];

Define the dataset as an array.

Create SVG element:


var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

Create the SVG element and set its width and height.

Create scale:


var scale = d3.scaleLinear()
        .domain([d3.min(data), d3.max(data)])
        .range([0, width - 50]);

Create a linear scale and specify the domain and range.

Create x-axis:


var x_axis = d3.axisBottom()
        .scale(scale);

Use d3.axisBottom to create the x-axis and provide it with the scale.

Append group and insert axis:


svg.append("g")
.attr("transform", "translate(30, 30)")
.call(x_axis);

Append a group element and insert the x-axis. The translate(30, 30) transformation aligns the x-axis properly within the SVG.

Example: y-axis in D3

Syntax


<!doctype html>
<html>
<body>
<script>
var width = 300, height = 200;

var data = [5, 10, 15, 20, 25];

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(30, 10)")
.call(y_axis);
</script>
</body>
</html>

Output


Displays a y-axis in the browser.

Explanation:

Create scale:


var scale = d3.scaleLinear()
        .domain([d3.min(data), d3.max(data)])
        .range([height / 2, 0]);

Create a linear scale and specify the domain and range using the data.

Create y-axis:


var y_axis = d3.axisLeft()
        .scale(scale);

Use d3.axisLeft to create the y-axis and provide it with the scale.

Append group and call y-axis:


svg.append("g")
.attr("transform", "translate(30, 10)")
.call(y_axis);

Append a group element and call the y-axis function. The translate(30, 10) transformation aligns the y-axis properly within the SVG.

Combined Axes Example


<!doctype html>
<html>
<body>
<script>
var width = 400, height = 100;

var data = [10, 15, 20, 25, 30];

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(30, " + xAxisTranslate + ")")
.call(x_axis);
</script>
</body>
</html>

Output


Displays both x and y axes in the browser.

Explanation:

Create scales:


var xscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, width - 50]);

var yscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height / 2, 0]);

Create linear scales for both axes.

Create axes:


var x_axis = d3.axisBottom()
        .scale(xscale);

var y_axis = d3.axisLeft()
        .scale(yscale);

Use d3.axisBottom and d3.axisLeft to create the x and y axes.

Append groups and call axes:


svg.append("g")
.attr("transform", "translate(30, 10)")
.call(y_axis);

var xAxisTranslate = height / 2 + 10;

svg.append("g")
.attr("transform", "translate(30, " + xAxisTranslate + ")")
.call(x_axis);

Append group elements and call the x and y axes functions. The translate transformations align the axes properly within the SVG.

Great! Now you know how to create and combine x and y axes in D3. In the next chapter, we will create a bar chart with scales and axes.