Data visualization can be tricky to do right. There are a ton of key principles you need to be aware of. Today we bring you 5 best practices for visualizing data with examples in R programming language. Incorporate these key R data visualization principles into your toolset to improve your data storytelling. After reading, you'll know how to produce publication-ready charts that won't leave users questioning the data or the logic. You'll know how to use <code>ggplot2</code> and <code>plotly</code> for both static and interactive charts, and also how to get maximum interactivity out of your visualizations with R Shiny. <blockquote>Want a deeper dive into visualization principles in R Shiny? <a href="https://appsilon.com/data-visualization-best-practices-bar-plots/" target="_blank" rel="noopener">Read our guide for bar plots</a>.</blockquote> These are the 5 key data visualization principles you must know: Table of Contents <ul><li><a href="#dont-manipulate">Don't Manipulate with Axis Ranges</a></li><li><a href="#title-and-labels">Always Add Title and Axis Labels</a></li><li><a href="#color-palettes">Choose Appropriate and Appealing Color Palettes</a></li><li><a href="#graph-dimensionality">Ditch 3D Charts - 2D is Plenty Enough</a></li><li><a href="#graph-interactivity">Make Your Charts Interactive - Go the Extra Mile</a></li><li><a href="#summary">Summary of Key Data Visualization Principles</a></li></ul> <hr /> <h2 id="dont-manipulate">Don't Manipulate with Axis Ranges</h2> In the past, companies and individuals loved to exaggerate small and insignificant differences by manipulating axis ranges. For example, imagine a company had a profit of $100M in 2020 and $105M in 2021. In relative terms, that's only a 5% increase - nothing to write home about - so the difference wouldn't be immediately visible on a chart if the Y-axis range goes from 0 to 120 (Y-axis shows the profit). What you could do - but shouldn't - is to shorten the Y-axis range. A range between 99.5 and 105.5 would do the trick. <blockquote>UX Design of Shiny apps is important. Follow these <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">7 steps to design dashboards for better results</a>.</blockquote> Let's see the effect in action. Use the following code to declare a <code>data.frame</code> object containing profit for the mentioned two years: With <code>ggplot2</code>, you can use the <code>coord_cartesian(ylim = c(lower, upper))</code> to change the Y-axis range. Let's set it to go from 99.5 to 105.5: <img class="size-full wp-image-12493" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2abf0caeec01e2494ea11_1-4.webp" alt="Image 1 - Bar chart with manipulatively formatted Y-axis" width="2350" height="1586" /> Image 1 - Bar chart with manipulatively formatted Y-axis It looks like the difference is huge - easily 5-6 times higher than the year before. The chart doesn't lie actually, but it doesn't respect key data visualization principles. It's easy to get the whole story wrong if you don't look at the axis ticks. The same chart looks nowhere near as impressive with the default Y-axis range: <img class="size-full wp-image-12495" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ab902404f12fca8a1555_2-3.webp" alt="Image 2 - Bar chart with normally formatted Y-axis" width="2350" height="1586" /> Image 2 - Bar chart with normally formatted Y-axis <b>Take-home point:</b> Always read the axis ticks. Just because you're obeying key data visualization principles, it doesn't mean everyone else is. <h2 id="title-and-labels">Always Add Title and Axis Labels</h2> A chart without a title and axis labels is pretty much useless. It might look great otherwise, but how can you know what you're looking at? There's no way to tell. Sure, you can describe the contents in the paragraph above, but that's not a replacement. It's only a supplement at best. Luckily, <code>ggplot2</code> makes it easy to obey this key data visualization principle. You can use the <code>labs()</code> function to add title, subtitle, caption, and axis labels, and you can use the <code>theme()</code> function to style them: <img class="size-full wp-image-12497" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ab9120581b8cdc6a3402_3-3.webp" alt="Image 3 - Bar chart with title, subtitle, caption, and axis labels" width="2350" height="1586" /> Image 3 - Bar chart with title, subtitle, caption, and axis labels Not all charts need a subtitle and a caption, but we added them just for the fun. Every chart you make should include a title and axis labels at least. Additionally, be aware of proportioning in your visualizations. If you're title and label texts are small, they might be overwhelmed by elements in the chart. Be cognizant of what you want readers to view and emphasize elements accordingly. <h2 id="color-palettes">Choose Appropriate and Appealing Color Palettes</h2> There's nothing worse than spending hours making the best out of your data but failing to make the chart visually appealing. We get it - not everyone has an eye for design. If you're a software engineer, it's likely you find design and aesthetics a nightmare. Similarly, if you're a graphics designer, you're able to design great-looking visuals - but can you implement them in code? That's where choosing an appropriate color palette comes in. The <a href="https://coolors.co/generate" target="_blank" rel="noopener">coolors.co</a> is used and loved by many when it comes to picking a color palette. <img class="size-full wp-image-12499" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ab92cf74263737a7a686_4-3.webp" alt="Image 4 - coolors.co - A website for generating color palettes" width="2878" height="2488" /> Image 4 - coolors.co - A website for generating color palettes It's mostly used for entire websites and brand identities, but there's no reason you can't pick a single color you like (or multiple), and use it in your data visualizations. The second one - <i>Prussian Blue</i> looks promising. Specify the <code>fill</code> parameter in the call to <code>geom_bar()</code> to change the color: <img class="size-full wp-image-12501" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ab93088616cf9bea97b1_5-2.webp" alt="Image 5 - Chart with a single color bars" width="2350" height="1586" /> Image 5 - Chart with a single color bars Sometimes, a single color won't work. If your dataset has a categorical feature (e.g., day of the week, gender, age group), you can use it to color the bars or different chart segments. Simply set the <code>fill</code> parameter to the name of the dataset variable in the <code>ggplot()</code> function call: <img class="size-full wp-image-12503" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2abb51e61eb7165dce196_6-1.webp" alt="Image 6 - Chart with a multiple color bars" width="2350" height="1586" /> Image 6 - Chart with a multiple color bars The selected column of this dataset has only two features, but you get the gist. Just don't go around using color ramps willy-nilly or combining two scales for one trait - or at least don't tell anyone we told you to do it. Color is a key data visualization principle. Master it and use it wisely. <h2 id="graph-dimensionality">Ditch 3D Charts - 2D is Plenty Enough</h2> Take a look at the following three charts - don't worry, we didn't create them, we just picked them from the Internet: <img class="size-full wp-image-12505" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2acfa719cbbf522f2b362_7.webp" alt="Image 7 - Various 3D charts" width="1979" height="549" /> Image 7 - Various 3D charts <b>What do they all have in common?</b> You've guessed it - they all look horrible. Depth has no place in most data visualizations, especially not in those aimed at business users and the general public. Also, you can't embed 3D visualizations in publications. You can use depth, or Z-axis, when analyzing data yourself. After all, you know best what works for you - but that's where the story should end. Most users find the third dimension confusing for data visualization, and we get that. It's easy to distort the data and come up with wrong insights. After all, everything is a matter of perspective. Two dimensions are just enough for 99.9% of the cases. If you want to convey extra information, consider changing the size or color of graph elements to accommodate for extra variables. <h2 id="graph-interactivity">Make Your Charts Interactive - Go the Extra Mile for Better Data Visualizations</h2> Probably the most important key data visualization principle and component is interactivity. There's nothing wrong with static charts, especially if you're just getting into data visualization, but interactivity will set you apart from the crowd. The idea is that something should happen when you click or hover over a chart element. With bar charts, the most common thing you can do is to display the counts of the selected category. Unfortunately, <code>ggplot2</code> doesn't support interactivity at this time. You'll have to switch to some other alternative instead, like <code>plotly</code>. The syntax is a bit different, but you'll quickly get the hang of it. Their <a href="https://plotly.com/r/" target="_blank" rel="noopener">documentation</a> is superb, and you'll find everything you need there. Here's how to "redraw" the chart from the previous sections in Plotly: <img class="size-full wp-image-12507" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ac57e8401958404945f2_8.gif" alt="Image 8 - Interactive Plotly bar chart" width="1178" height="780" /> Image 8 - Interactive Plotly bar chart You can see how detailed data is shown automatically as you hover over individual bars. What gets displayed can be tweaked, but more on that some other time. <b>Do you know what really sets your visualizations from the crowd?</b> You've guessed it - dashboards - at least in the interactivity department. For demonstration's sake, we'll declare a new dataset consisting of budgets across two departments in a two-year time span. The end-user can select the department on the dashboard, and the chart gets redrawn instantly. Take a look: <img class="size-full wp-image-12509" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b2ace859a732ae6a70ae50_9.gif" alt="Image 9 - Interactive R Shiny application" width="1024" height="700" /> Image 9 - Interactive R Shiny application Embedding your visualizations into dashboards is light years ahead of everything you can do with a static graphing library. It allows for the most flexibility for the end-user, which is the only thing that matters in the long run. It's safe to say interactivity is among the most important key data visualization principles of 2022 and beyond. <hr /> <h2 id="summary">Summary of Key Data Visualization Principles</h2> Data visualization is one of those things that looks easy, but in reality, it's easy to get wrong. A small error like forgetting to add axis labels can cost you a lot in the long run, especially if you can't add it afterward. Today you've learned five key principles of data visualization and got hands-on experience of visualizing data in R - with <code>ggplot2</code>, <code>plotly</code>, and <code>shiny</code>. It's a lot to process for a single article, but we hope you managed to follow along. If you want to dive deeper into data visualization with R, look no further than our in-depth guides: <ul><li><a href="https://appsilon.com/ggplot2-bar-charts/" target="_blank" rel="noopener">Stunning bar charts in R and ggplot2</a></li><li><a href="https://appsilon.com/ggplot2-line-charts/" target="_blank" rel="noopener">Make line charts in R</a></li><li><a href="https://appsilon.com/ggplot-scatter-plots/" target="_blank" rel="noopener">A go-to guide for scatter plots in R</a></li><li><a href="https://appsilon.com/ggplot2-histograms/" target="_blank" rel="noopener">Learn to make Histograms with ggplot2</a></li><li><a href="https://appsilon.com/ggplot2-boxplots/" target="_blank" rel="noopener">Everything you need to know about Boxplots</a></li></ul>