Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts

So far in the series, you have learned how to create line charts and bar charts in Plotly.js. As I mentioned in the introductory tutorial of the series, Plotly.js is not limited to just a few chart types. There are more than 20 different kinds of charts that you can create using the library. Each of these chart types has its own set of customization options as well as attributes that are common to multiple charts.

In this tutorial, you will learn how to create bubble and dot plot charts in Plotly.js. Both these chart types use the same scatter traces that we used while creating line charts. The important difference this time is that the mode attribute will be set to markers.

Creating Bubble Charts in Plotly.js

Bubble charts are used to display three dimensions of data on a chart. The data associated with every entity is plotted using bubbles or disks, where the position of a disk on the x-y axis marks its x-y values, and the area of a disk is used to plot the value of the third data point. Bubble charts are a variation of scatter charts. For this reason, it makes sense to set the type attribute to scatter while creating a bubble chart.

There are a few things that you should remember while creating bubble charts. First, the third value of a given data point is represented by the area of the bubble and not its radius. The radius is actually proportional to the square root of the actual value. Second, you can only use them to plot positive values. This makes sense because the area of a bubble cannot be negative or zero.

Now, let’s create our first bubble chart by setting the mode attribute to markers. All the attributes that control the appearance of bubbles in the chart are present under the marker object. The size attribute of the marker object can be used to specify a size for the bubbles as the third data point. This attribute can either be a number or an array of numbers. When creating bubble charts, it would be very rare for all the entities to have the same value for their third data point. So you will generally set the size attribute as an array.

The opacity of all the bubbles can be controlled using the opacity attribute. Just like size, this attribute also accepts values as a number or an array or numbers with values between 0 and 1. In the case of line charts, the default value of opacity for different bubbles or disks was 1. In the case of bubble charts, the default value of opacity becomes 0.7.

Another very useful attribute that you can use to accurately create bubble charts is the sizemode parameter. This attribute determines if the value specified in the size attribute should be considered the area of a bubble or its diameter. The default value for sizemode is diameter. However, if you are creating bubble charts, it makes more sense to set the value of sizemode to area. This way, you won’t have to do any calculations to determine the right bubble size for a value yourself. You can use the following code to create a bubble chart using the parameters we just discussed.

var bubbleDiv = document.getElementById("bubble-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [5, 13, 24, 35, 46, 60],
  y: [40, 70, 65, 15, 75, 49],
  marker: {
    size: [100, 200, 800, 600, 500, 600],
    sizemode: 'area'
  }
};

var data = [traceA];

var layout = {
  title: "A Bubble Chart in Plotly"
};

Plotly.plot(bubbleDiv, data, layout);

Right now, every bubble has the same color. The color of individual bubbles or the whole trace can be changed at once using the color attribute.

Another way to set the color of different bubbles is using color bars. In such cases, the bubble color is determined based on the numeric value specified in the array that you passed to the color attribute of marker object. This color bar can act as the fourth data point when plotting a chart. 

For example, let’s say you are plotting a bubble chart that shows the location and area of different parks in a large city. A bubble chart would be perfect in this situation. However, the tree density of each park or the average number of people that visit each park can be different. If the color of each bubble is specified as a numerical value, it will be possible to assign a different color to individual bubbles to plot the value of the fourth data point.

In our example, the color corresponding to different magnitudes of tree density can be specified using the colorscale attribute. When using this attribute, you are required to at least specify a mapping for the lowest (0) as well as highest (1) values. An example of a valid colorscale value is [[0, 'rgb(0, 0, 0)'], [1, 'rgb(0, 255, 0)']]. You also have the option to use a palette name string as a colorscale value. Greys, YlGnBu, Greens, YlOrRd, Bluered, RdBu, Reds, Blues, Picnic, Rainbow, Portland, Jet, Hot, Blackbody, Earth, Electric, and Viridis are all considered valid values.

You can specify the lowest numerical color value to which the lowest color scale value should be mapped using the cmin attribute. Similarly, you can also specify the highest color value to which the highest color scale value should be mapped using the cmax attribute. It is possible to reverse the color mapping by setting the value of the reversescale parameter to true. In this case, the lowest color will be mapped to the highest value, and the highest color will be mapped to the lowest value.

The colorbar object provides a lot of parameters that can be used to control its appearance. The width of the color bar created by Plotly.js can be controlled using the thickness parameter. The thickness is specified in pixels, and its default value is 30. The length of the color bar, excluding the padding on both ends, can be specified using the len attribute. The x and y position of the color bar can be set with the help of the x and y parameters. The position is specified in terms of plot fractions, and its valid value can lie anywhere between -2 and 3. The default value for x is 1.02, and the default value for y is 0.5. The x and y padding of the color bar can be controlled similarly using the xpad and ypad parameters. You can assign a title to the color bar using the title attribute. The position of that title can be specified with respect to the color bar using the titleside parameter. Valid values for this parameter are top, bottom, and right. The default value is top.

The following code will create a bubble chart where the darkness of the green color is mapped to the tree density in that park.

var bubbleDiv = document.getElementById("bubble-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [5, 13, 24, 35, 46, 60],
  y: [40, 70, 65, 15, 75, 49],
  marker: {
    color: [35, 10, 50, 40, 18, 30],
    colorscale: [[0, 'rgb(200, 255, 200)'], [1, 'rgb(0, 100, 0)']],
    cmin: 0,
    cmax: 50,
    size: [600, 1200, 800, 400, 1500, 2000],
    sizemode: 'area',
    showscale: true,
    colorbar: {
      thickness: 10,
      y: 0.5,
      ypad: 0,
      title: 'Tree Density',
      titleside: 'bottom',
      outlinewidth: 1,
      outlinecolor: 'black',
      tickfont: {
        family: 'Lato',
        size: 14,
        color: 'green'
      }
    }
  }
};

var data = [traceA];

var layout = {
  title: "A Bubble Chart in Plotly"
};

Plotly.plot(bubbleDiv, data, layout);

Creating a Dot Plot in Plotly.js

A dot plot is a chart that is used to plot points on a very simple scale. You should keep in mind that dot plots are only suitable for a small amount of data. Plotting a large number of points will make the chart very cluttered. Just like bubble charts, a dot plot also requires you to set the type attribute to scatter and the mode attribute to markers. Since dot plots also use markers to plot a point, all the customization options for them are also available under the marker object.

The following code creates a dot plot that shows the marks obtained by top two students in an exam every year. I have also used some other attributes related to the legend and the x-axis to change the overall appearance of our plot.

var dotDiv = document.getElementById("dot-chart");

var traceA = {
  type: "scatter",
  mode: "markers",
  x: [2011, 2012, 2013, 2014, 2015, 2016],
  y: [789, 795, 760, 775, 780, 783],
  name: 'Highest Marks',
  marker: {
    color: 'rgba(156, 165, 196, 0.5)',
    line: {
      color: 'rgba(156, 165, 196, 1)',
      width: 1,
    },
    symbol: 'circle',
    size: 20
  },
  hoverlabel: {
    bgcolor: 'black',
  }
};

var traceB = {
  type: "scatter",
  mode: "markers",
  x: [2011, 2012, 2013, 2014, 2015, 2016],
  y: [769, 755, 747, 770, 771, 781],
  name: 'Second Highest Marks',
  marker: {
    color: 'rgba(165, 196, 50, 0.5)',
    line: {
      color: 'rgba(165, 196, 50, 1)',
      width: 1,
    },
    symbol: 'circle',
    size: 20
  },
  hoverlabel: {
    bgcolor: 'black',
  }
};

var data = [traceA, traceB];

var layout = {
  title: 'Marks Obtained by Top Two Students',
  xaxis: {
    showgrid: false,
    showline: true,
    linecolor: 'rgb(200, 0, 0)',
    ticks: 'outside',
    tickcolor: 'rgb(200, 0, 0)',
    tickwidth: 4
  },
  legend: {
    bgcolor: 'white',
    borderwidth: 1,
    bordercolor: 'black',
    orientation: 'h',
    xanchor: 'center',
    x: 0.5,
    font: {
      size: 12,
    }
  },
  paper_bgcolor: 'rgb(255, 230, 255)',
  plot_bgcolor: 'rgb(255, 230, 255)'
};

Plotly.plot(dotDiv, data, layout);

We have already covered the different attributes of the marker object in the previous section. This time, I have made some changes in the layout of the chart. Using the title attribute to assign a title to your chart will make it more informative by quickly letting the viewers know what the chart is about. I have also changed the appearance of the x-axis line to make it stand out from other lines. As you can see, the width and color of the ticks can be controlled using the tickcolor and tickwidth attributes.

The position of the legend can be specified using the x and y attributes. Both these numbers accept a value between -2 and 3. The position is specified in terms of fractions. The anchor point for the x and y positions can be specified using the xanchor and yanchor attributes. These two attributes determine the points which should be used as a reference to measure the distance specified by the x and y attributes. In the above example, the 0.5 distance of the x attribute is measured from the center of the legend because xanchor has been set to center.

Final Thoughts

This tutorial showed you how to create bubble charts and dot plots in Plotly.js using the attributes of the same marker object. You also learned how to add extra information to your bubble charts using color bars and set the color scale of those bars according to your own requirements. 

I have tried to cover almost all the marker attributes that you might have to use in your projects. If you need to know more about creating bubble and dot plot charts, you can head to the marker reference section of the Plotly.js website. In the next tutorial, you will learn how to create pie and gauge charts in Plotly.js.

If you have any questions related to this tutorial, feel free to let me know in the comments.