Barplot | the D3 Graph Gallery

Step by step

Building barplots in d3.js relies on the addition of several rect, one per group in the categorical variable. The first example below should guide you in this procedure. Note that ordering groups is an important step when building barplots. This example explains how to do it.

Most basic

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

Turn you barplot horizontal

Makes sense if you have long labels: it makes them more readable.

Order groups

Makes the plot more insightful: readers can spot what the ranking is directly.

Interactive

Due to its simplicity, barplot is a very good chart to understand the basic concepts of interactivity. Below are many examples illustrating how to deal with transition, buttons, the enter() function and more.

Animation at loading

A couple of lines allow to add an animation effect when the plot is loading: bars start from 0 and reach their real value.

Change color with a button

Clicking on a button triggers a function that changes the style of all rectangles

Change input data: simple version

How to go from one dataset to another with smooth transition.

Works only with same number of group and same Y range. (X and Y axis are not updated)

Change input data: upgraded version

How to go from one dataset to another with smooth transition. Upgraded version: X and Y axis axis are updated: data 1 and 2 can have different # of group.

Change input data: .csv input version

Same as precedent plot, but use a .csv format as input file.

Grouped and Stacked barplot

A barplot can also display values for several levels of grouping. Subgroups can be displayed one beside each other, giving a grouped barplot. If subgroups are displayed on top of each other, it is a stacked barplot.

Basic stacked barplot

Most basic stacked barplot. Input data at wide format.

Basic grouped barplot

Most basic grouped barplot. Input data at wide format.

Percent stacked barplot

Most basic percent stacked barplot. Input data at wide format.

Stacked barplot with tooltip

Explain how to add a tooltip on hover for each subgroup. Input data at wide format.

Highlight subgroups in stacked barplot

It's hard to compare subgroups in a stacked barplot. Highlighting one on hover helps tackle this issue.