Data Visualization Best Practices: Bar Plots for Shiny Developers

Estimated time:

time

min

Data visualization is important. It’s so important that how you present your data can affect the success of an app or project. For applications that make heavy use of data, data visualization best practices can significantly increase the level of adoption. On the other hand, if the data is represented in a convoluted, complex way - your application will fall short. Data visualization is a broad topic and in this post, I’ll focus on bar plots. I will be using ggplot2 in the examples. I’ll present the theory behind the problems and practice examples of working code. And a final remark - there is no one universal design that you should use for all plots. That’s why it’s important to know the theory, so you can choose the proper design for your data. Table of contents: <ul><li><a href="#datavis">Data visualization</a></li><li><a href="#drawingcon">Best practices</a></li><li><a href="#elements">Remove unnecessary elements</a></li><li><a href="#order">Choose the proper order of data categories</a></li><li><a href="#conclusion">Conclusion</a></li></ul> <hr /> <h2 id="datavis">Data visualization</h2> <h3>Drawing conclusions</h3> Good data visualization helps users quickly understand the data. It should be clear what’s being presented on the graph and what the data is telling us. With good data visuals, proper conclusions can be drawn at a first glance. Bad data visualizations can also lead the user to draw conclusions very quickly, but more often than not, these are the wrong conclusions. For example, if you don’t start the bar plot at 0, the differences in values will seem much bigger, but this is misleading! Proper data visualization will draw attention to what is important. When presenting data you might need to show additional information for context. With good data visualization, your audience will have no doubt about what’s important. <blockquote><strong>Learn how to make stunning bar charts in R with the <a href="https://appsilon.com/ggplot2-bar-charts/" target="_blank" rel="noopener noreferrer">ggplot2 bar chart tutorial</a>. </strong></blockquote> <h3>Knowing your audience</h3> Lastly, good data visualization makes it possible for laymen to understand the data. As an R/Shiny developer, you probably work with data a lot. But remember, not everyone is used to looking at complicated charts. If your app will be available to a wide audience - make sure to present data in a way that’s accessible and appropriate to them! <h2 id="drawingcon">Data visualization best practices</h2> <h3 id="elements">Step 1: Remove unnecessary elements</h3> In order to make the important elements on the graph stand out, you need to remove the extraneous bits. This will help to convey the message behind your data. Below is an example of default ggplot2 settings and an improved version of the same graph. The goal of the graph is to present the survey results so that the categories can be easily compared. The data I’m using in the examples are completely random data, but I’m providing the goal for context. Generally speaking, you should have a goal in mind when you start visualizing your data. <img class="alignnone size-full wp-image-12080 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01ef60a2ba062e1ba2a58_Favorite-animal-data-visualization-1.webp" alt="" width="1600" height="1090" />   <script src="https://gist.github.com/aniaskrzydlo/771f75e08867dfe59c50f2b8e5de8a9a.js"></script>   <img class="size-full wp-image-12082 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01ef748b83fcd2e55bdeb_Favorite-animal-percent-of-respondents-2.webp" alt="" width="1344" height="960" /> <script src="https://gist.github.com/aniaskrzydlo/542c469289d25927dbf6f305029a961d.js"></script> <h4>Background</h4> You can remove the background if it’s not required to bridge the styling of the entire application. The background doesn’t add any information to your data. Generally speaking, it’s an extraneous design element. <blockquote><strong>Practice makes perfect. Follow Appsilon's <a href="https://appsilon.com/best-practices-for-durable-r-code/" target="_blank" rel="noopener noreferrer">best practices to build durable R code</a>. </strong></blockquote> <h4>Gridlines</h4> Default ggplot2 settings have both vertical and horizontal grid lines. For bar plots, vertical grid lines make no sense and are absolutely useless. You’re not comparing anything in that direction, so they should be removed. Horizontal gridlines on the other hand can be used for bar plots. These are helpful when you have a lot of bars and the exact values aren’t that important. In my example, I decided to use data labels directly on the graph, as they make it easier to read the exact value of the data point. <h4>Axes and tick marks</h4> I decided to remove both axes together with their tick marks. The Y-axis isn’t needed when we have data labels, but remember that you should start the bar plot at 0. The X-axis also isn’t needed. So for a cleaner look, I prefer to remove it. However, you could keep both axes, for example, to match the styling with other types of graphs that you have in the app. If this were the case, I’d recommend using light gray instead of black. Lighter coloring makes the lines less visible and minimizes visual distractions from the data and descriptions. <h4>Axes description </h4> The X-axis isn’t necessary to understand the data. The graph title states that we are presenting animal choices. For the Y-axis, try to avoid vertical text orientation. You can put the axis label under the graph title. Just be sure to make it more subtle (using font size or color). <h3 id="order">Step 2: Choose the proper order of the data categories</h3> In order to make the data categories easy to compare - use the proper order! General rules for ordering the data are as follows: <ol><li style="font-weight: 400;" aria-level="1"><b>Natural order</b> (e.g. time) - Always use natural order if it exists in your data.</li><li style="font-weight: 400;" aria-level="1"><b>Meaningful order</b> (e.g. from biggest to smallest brand) - if there is no natural order, look for some meaningful order in your data</li><li style="font-weight: 400;" aria-level="1"><b>Order of value</b> - If there is no natural or meaningful order in your data, sort them by value, so that the highest / smallest categories can be found easily. (Caveat: with frequently updated data, such sorting may be misleading and result in the audience spending more time searching for info. This is because the ordering of the data will also be updated together with the values.)</li><li style="font-weight: 400;" aria-level="1"><b>Alphabetical order </b>- With numerous categories, sorting by name can make it easier for your audience to find a specific title.</li></ol> Below is an improved ordering of the graph from the previous example.   <img class="size-full wp-image-12086 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01ef948b83fcd2e55bf1e_Improved-bar-plot-order-3.webp" alt="" width="1344" height="960" /> <script src="https://gist.github.com/aniaskrzydlo/429eef51b6edb26050d869595a7c5d51.js"></script> <h4>Turn graphs, not heads</h4> When category labels are long and don’t fit nicely under the bar it can distract viewers. If you try to put the text vertically, the readability goes out the window. Luckily there’s a simple solution for that: flip the graph from vertical bars to horizontal. This way you can get a lot of space for category labels, without decreasing the readability. But remember also to change the position of the data labels as they’ll now be flipped in the wrong orientation. <blockquote><strong>Looking for a Shiny app template to kickstart your project? Download <a href="https://templates.appsilon.com/" target="_blank" rel="noopener noreferrer">Appsilon's free use Shiny templates</a>.</strong></blockquote> Below is an example of a bar plot with long labels and how it can be improved.   <img class="size-full wp-image-12088 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01ef9a89a044c4d35c2ea_vertical-long-labels-4.webp" alt="" width="1600" height="1090" /> <script src="https://gist.github.com/aniaskrzydlo/127419310e930ff1bb7bae304d90cd34.js"></script>   <img class="size-full wp-image-12084 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01efb6bd9d78607d45843_horizontal-bar-plot-with-long-labels-5.webp" alt="" width="1344" height="960" /> <script src="https://gist.github.com/aniaskrzydlo/a3db55307f8046ccd8dfda14b664cd59.js"></script> <h2 id="conclusion">Conclusions on data visualization best practices</h2> Introducing good data visualization practices to your Shiny apps will increase their usability and encourage adoption. Some visualization tricks are fairly easy to use and implement. Others require a good understanding of the data and the purpose of the visualization. But with practice, you’ll be able to intuitively know what works best and quickly improve the graphs in your Shiny applications. Comment below and let me know what other graph types I should cover next! :)