Customizing Axes in D3.js

Photo by Isaac Smith on Unsplash

Introduction

  • Translating an axis
  • Changing number of ticks on the axis
  • Tick format
  • Custom tick labels
  • Make a grid with .tickSize()
  • Attributes of the .domain <path> element
  • Tick labels: fonts, size, and rotation
  • Selecting tick lines with CSS selections and changing their attributes.

Basic setup

<!doctype html>
<html>
<head>
</head>
<body>
<script src="js/d3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
const margin = {top: 20, right: 10, bottom: 20, left: 10};const width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
const g = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Making a horizontal axis

  1. Make a linear scale.
  2. Make an axis generator from the scale.
  3. Call the generator on an SVG group in order to render the axis onto our html page.

Make a linear scale

const min_data = 0, max_data = 10000;let xScale = d3.scaleLinear()
.domain([min_data, max_data])
.range([0, width]);

Make an axis generator

let xAxisGenerator = d3.axisBottom(xScale);

Render the axis with .call

let xAxis =  g.append("g")
.call(xAxisGenerator);
  1. You can apply various D3 methods to xAxisGenerator to change the way D3 uses the scale to generate the axis. This happens before the axis is rendered.
  2. We can apply d3.select() and d3.selectAll() to to the variable xAxis to select and change the attributes of the svg elements that make up the axis after it is rendered.

Basic customization using the axis generator

Translating the axis to the bottom of the visualization

xAxis.attr("transform",`translate(${0},${height - 20})`);

Changing the number of ticks

xAxisGenerator.ticks(3);
xAxisGenerator.ticks(3);
xAxisGenerator.tickValues([3000,5000,9000]);

Tick format

xAxisGenerator.tickFormat(d3.format(".2s"));

Custom tick labels

  1. Make an array of the labels you want in the order you want them based on the number of ticks.
  2. Pass a function that returns the label for the index of each tick. The function has the data values of the ticks and the index of the list of ticks as inputs.
let tickLabels = ['A','B','C'];
xAxisGenerator.tickFormat((d,i) => tickLabels[i]);

Make a grid with .tickSize()

xAxisGenerator.tickSize(-200);

Inspecting the SVG elements that form an axis

<path class="domain"></path>
<g class="tick">
<line></line>
<text></text>
</g>

Customizing the SVG elements of an axis

Domain <path> element

<path class="domain" stroke="#000" d="M0.5,-200V0.5H470.5V-200"></path>
xAxis.select(".domain")
.attr("stroke","#E04836")
.attr("stroke-width","6")
.attr("opacity",".6");
xAxis.select(".domain").remove();
xAxis.select(".domain")
.attr("stroke","#E04836")
.attr("stroke-width","10")
.attr("opacity",".6")
.attr("stroke-dasharray","4");

Ticks contain <line> and <text> elements.

<g class=”tick” opacity=”1" transform=”translate(141.5,0)”>
<line stroke=”#000" y2=”-200"></line>
<text fill=”#000" y=”3" dy=”0.71em”>A</text>
</g>
xAxis.select(".tick text")
.attr("font-size","20");
xAxis.selectAll(".tick text")
.attr("font-size","20")
.attr("rotate","15")
.attr("font-family","cursive");
xAxis.selectAll(".tick line")
.attr("stroke","steelBlue");
xAxis.select(":nth-child(3) line")
.attr("stroke-width","10");

Conclusion

--

--

--

Interests: Math and data

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create a React app using Webpack 5 + Babel + Karma + Redux (Part 2: REDUX)

Making a game with Javascript: Part 1

How to Make Your Code Readable

6 things about React Native you’ll only learn with experience!

Build a simple Rest API using ExpressJS and NodeJS

espeak-ng Command in RHEL

Vault World Announcement

What are the advantages of using Vue.js over React JS or Angular?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Glenn Henshaw

Glenn Henshaw

Interests: Math and data

More from Medium

02 Chain of Reasoning in the Development of Bioinformatics Tools and The Power of Gene Sequences

Bokeh 2.4.3

PyScript: The New Kid on the Block

Choropleth Maps With a Variable Concentrated Near the Ends of an Interval

Choropleth map of Europe with capped two different linear colormaps