Customizing d3.js chart | the D3 Graph Gallery

Axis

D3.js offers built-in function to add axis to your chart. The first step is to build a scale that allows to transform a numeric value to a coordinate on the plot. The second is to call axisBottom() or axisLeft() to build the axis. Browse the example below to understand the different types of existing scale, how to build axis and how to customize them.

Basic linear axis

The most basic linear axis you can do in d3.js. Keeping only the core code.

Categorical axis with scalePoint()

The scalePoint() allows to build a categoric axis. Simple example keeping only the core code.

Categorical axis with scaleBand()

Slightly different from the previous example: this method is adapted for barplot or boxplot where each category uses a range of the axis.

Vertical axis

Learn how to make a vertical axis in d3.js

Custom axis labels

How to change font, size, color, orientation of axis labels

Add titles

How to add titles at the right position to your axis

Colors

A post on the basic of color management with d3.js. You will learn how to call a color, how to build different types of color palette and how to map them to your dataset.

Just calling a color

Several ways exist to call a single color in d3.js. Learn what are the possibilities.

Sequential color scale

What are the different option to build a sequential colorscale? How to build a palette?

Categorical color scale

Give a specific color to each entity of your dataset. How to build the palette with d3.js

Themes

A post that provides a few theme templates inspired from famous other libraries like ggplot2 or ipsum.

theme: ggplot2

Inspired from the famous R ggplot2 library.

theme: ipsum

Inspired from the ipsum theme of the hrbrmstr R library

theme: publication

An old school theme in black and white. Publication ready, or for nostalgic of the good old R.

theme: dark mode

In case your application is in night mode, use a dark background.

Legend

A few examples for legends, always with the d3.js code ready to be copied and pasted.

Categorical | circle

Use the enter() function to add one circle and one label per group.

Categorical | Square

Same thing with squares instead of circles

Responsivness

A post on the basics of responsivness with d3.js. Try to change your window size to see the below d3.js chart updating itself. Discover how it works with code snippets here.