Refining the X-axis

We can use a combination of SVG + D3 to manipulate the appearance of an axis for further refinement.

We are going to make some adjustments to the x-axis. There are three things we will do. First, we will add a label. It is not clear as to what the x-axis represents. We should tell the reader the x-axis is measuring the humidity. The second thing we will adjust is the font size. The font size for the labels is very small. We should make them bigger. Lastly, we will optimize the drawing with CSS.

Adding a label

We will start with the label by adding one to the <g> element we created for the axis. It makes sense to add it to the group since the label is part of an axis. We should store the selection. First, we will assign the group selection to a variable called xAxisGroup.

Get hands-on with 1200+ tech skills courses.