Learning Charts

How to create hexagonal binnings

3 min ,

With this guide you’ll learn how to use hexagonal binnings, a great alternative technique for visualizing distributions when working with large data sets.

Hexbins layout is a variation of the scatterplot, grouping points in hexagonal areas. The color of each hexagon represents the number of points in it. We will use it to see how cars distribute according to their power and their cosumption.

GOAL OF THE TUTORIAL: see where most of the cars contained in the dataset aggregate disposing them by Horsepower and Miles per Gallon.

01. Load your data

The first step is to copy and paste your data into RAWGraphs. The dataset must contain at least two columns, one for the X Axis (in our case, Power(hp)) and one for the Y Axis (Economy (mpg)).

You can copy and paste the data from the table below:

Otherwise, you can load the data from using the “Try our samples” button then choosing “Cars – Multivariate”.

In few second you should see the green bar saying “406 records in your data have been successfully parsed!”.

02. Choose the hexbin layout

After pasting your data, scroll down and select the “hexbin” visual model.

03. Map your dimensions

The hexbin layout has two visual variables.

X Axis Number, date Yes No The horizontal position of the circles.
Y Axis Number, date Yes No The vertical position of the circles.


Drag and drop the dimensions as following:

  • Power (hp) as X Axis;
  • Economy (mpg) as Y Axis;

In this way we created a dot for each car in the dataset, disposing it on the cartesian plane according according to its Power (hp) and Economy (mpg).

04. Options

To reach the final results we can customize the visualization with some parameters you can find next to the visualization.
For the hebin the options available are the following:

For the final results we have set the options as following:

Width Artboard width in pixels
Height Artboard height in pixels
Radius The radius of the circumscribed circle to the hexagon.
Set origin at (0,0) If selected, the scatterplot origin will be set at the zero value for both the axes. If not selected, origin will be set to the minimum value for the two axes.
color scale List of uniques values in the dimension mapped as “color”. If set to ordinal, you can set a color for each value. If set to linear, the app will try to find the minimum and maximum value contained in the dimension, and then creating a gradient among those two values.


For the final results we have set the options as following:

  • Width to 940 pixels;
  • Height to 483 pixels;
  • Max Radius to 20 pixels;
  • Set color scale to linear and set the minimun value to #e0ecf4 and the maximum to #8856a7

Here is the finished chart. You can export it in svg or png using the download function at the bottom of the page.


Have you bumped into any issue while using the app?