New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From \$16.50/m
Advertisement

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

Difficulty:IntermediateLength:MediumLanguages:

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.

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.

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.

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.