{ "sections": [ "Misleading charts", "Wrong chart type", "Color", "Design", "Maps", "Labels and legends", "Dashboards and data stories", "Other" ], "caveats": [ { "id": "01-rank-your-barplot", "section": "Other", "title": "Rank your barplot", "caption": "When displaying several items, ordering them makes the graph much more insightful:\nthe ranking can be grasped instantly, with no unnecessary cognitive effort.", "look_for": "A barplot, lollipop or dot chart of categories whose bars appear in alphabetical, random or input-table order, so bar lengths go up and down instead of decreasing steadily. In code, no sort or reorder step is applied to the category axis.", "why": "The reader has to scan every bar back and forth to work out the ranking, which the chart could show at a glance.", "fix": "Sort the categories by value, usually from largest to smallest, so the ranking reads top to bottom.", "ok_when": "The categories have a natural order that matters more than the ranking, such as months, age groups, ordinal levels or a fixed sequence the reader expects.", "article": "https://www.data-to-viz.com/caveat/order_data.html" }, { "id": "02-prefer-horizontal-labels", "section": "Labels and legends", "title": "Prefer horizontal labels", "caption": "Always aim for a chart type that makes your labels readable.\nFor instance, a horizontal barplot will often be cleaner than a vertical version.", "look_for": "Axis labels rotated at an angle or set vertically, typically under a vertical barplot with long category names. Also labels that overlap, are truncated or are shrunk to fit.", "why": "Tilted or vertical text is slow and tiring to read, and the reader has to turn their head to match each label to its bar.", "fix": "Switch to a horizontal barplot so category names sit horizontally next to each bar, or otherwise change the layout so all labels read left to right.", "ok_when": "Labels are short enough to fit horizontally under vertical bars, or the x-axis is a time or ordered scale that is expected to run left to right.", "article": "https://www.data-to-viz.com/caveat/hard_label.html" }, { "id": "03-do-not-cut-y-axis", "section": "Misleading charts", "title": "Do not cut the y-axis", "caption": "Avoid cutting the Y axis when comparing groups, as it can\ndistort differences and mislead the interpretation of the data.", "look_for": "A barplot, area chart or other length-encoded chart whose value axis starts above zero, for example bars on an axis that begins at 50. In code, look for a y-axis domain, ylim or min set to a non-zero value on a bar chart.", "why": "Bar length is read as proportional to value, so a truncated baseline makes small differences look huge.", "fix": "Start the value axis at zero for bars and areas so bar lengths stay proportional to the values.", "ok_when": "The chart encodes values by position rather than length, such as a line chart, dot plot or scatterplot, where a zoomed axis showing the variation is often appropriate, or zero is not a meaningful baseline (for example temperatures).", "article": "https://www.data-to-viz.com/caveat/cut_y_axis.html" }, { "id": "04-histogram-mind-the-bin", "section": "Other", "title": "Histograms: mind the bin size", "caption": "Always adjust the bin size of a histogram, as different binning can\nuncover hidden patterns or provide a clearer understanding of the data.", "look_for": "A histogram with very few wide bins (or very many tiny noisy ones), or code that relies on the library default bin count without setting bins or binwidth.", "why": "A poor bin size can hide real features of the distribution, such as a second peak or a gap, or invent noise that is not there.", "fix": "Try several bin widths and keep the one that reveals the shape of the distribution best; finer bins often expose structure that coarse bins hide.", "ok_when": "The bin width has clearly been chosen on purpose, for example to match natural units like years or score bands, and it shows the distribution shape well.", "article": "https://www.data-to-viz.com/caveat/bin_size.html" }, { "id": "05-boxplots-hide-info", "section": "Misleading charts", "title": "Boxplots hide information", "caption": "A boxplot simplifies data but can hide important details, such as the sample size and distribution patterns.\nConsider adding individual data points or opting for a different chart type, such as a violin or raincloud plot.", "look_for": "Boxplots shown alone, with no individual points, sample size labels or density shape. Be extra alert when groups could have very different sample sizes or multimodal data.", "why": "A box summarizes data with five numbers, so a bimodal distribution or a group with only a handful of observations looks exactly like a normal, well-sampled one.", "fix": "Overlay the individual data points as jittered dots on the boxes, or use a violin or raincloud plot, and show the sample size for each group.", "ok_when": "Sample sizes are large and similar, the distributions are known to be unimodal, or the sample size is shown and the audience only needs a quick summary.", "article": "https://www.data-to-viz.com/caveat/boxplot.html" }, { "id": "06-use-color-intentionally", "section": "Color", "title": "Use color intentionally", "caption": "Use color only when it adds meaning to your chart. Avoid assigning different colors to each element in a graph unless\nthey signify distinct categories. A consistent color scheme keeps the visualization clean and minimizes distraction.", "look_for": "A chart where every bar, slice or mark has its own color even though the categories are already named on an axis, so the color carries no extra information. In code, look for color mapped to the same variable as the x or y axis.", "why": "Extra colors suggest a meaning that does not exist, distract the reader and leave no way to draw attention to what matters.", "fix": "Use one neutral color for all elements and add an accent color only for the item you want to highlight.", "ok_when": "Color encodes a separate variable or grouping that the reader needs, or it matches colors used for the same categories elsewhere in the report.", "article": "https://www.data-to-viz.com/caveat/color_com_nothing.html" }, { "id": "07-map-bubble-size-to-area", "section": "Other", "title": "Size bubbles by area, not radius", "caption": "Mapping data to the radius of a bubble creates a visual distortion because the area grows with\nthe square of the radius. This makes the bubbles appear much larger than the actual values.", "look_for": "A bubble chart, bubble map or proportional symbol where the circle radius or diameter is set linearly from the value, so a value twice as big looks about four times bigger. In code, look for a linear scale feeding r, or a size parameter computed as value instead of sqrt(value).", "why": "Readers judge circles by their area, so radius-based sizing makes large values look far bigger than they are and small values almost vanish.", "fix": "Scale the area of each bubble proportionally to the value, for example with a square root scale on the radius, and include a size legend.", "ok_when": "The plotting library already maps the value to area (for example matplotlib scatter s or ggplot2 scale_size), which is correct and should not be flagged.", "article": "https://www.data-to-viz.com/caveat/radius_or_area.html" }, { "id": "08-avoid-moire-effect", "section": "Wrong chart type", "title": "Avoid the moiré effect with lollipops", "caption": "When a barplot contains many long bars, a Moiré effect can occur, creating an unwanted optical illusion.\nSwitching to a lollipop chart reduces visual clutter and prevents this illusion and makes the chart cleaner.", "look_for": "A barplot with many long, thick bars of similar length packed closely together, producing a dense striped block of ink.", "why": "Many parallel thick bars create a vibrating optical effect and a heavy mass of ink that makes the chart tiring to read.", "fix": "Replace the bars with a lollipop chart: a thin line ending in a dot for each category, which keeps the same information with much less ink.", "ok_when": "There are only a few bars, the bars are short or clearly spaced, or the bar's filled area itself is important to the message.", "article": "https://web.archive.org/web/20181226161528/http://gravyanecdote.com/uncategorized/wrappedbarsthoughts/" }, { "id": "09-the-spaghetti-chart", "section": "Other", "title": "The spaghetti chart", "caption": "Too many overlapping lines create a cluttered, unreadable chart. Consider two alternatives: use small\nmultiples for a clearer breakdown or highlight key lines to emphasize the most important groups.", "look_for": "A line chart with many series (roughly more than four or five) in different colors that cross and overlap, so no single line can be followed.", "why": "The reader cannot follow any individual group or match colors to a legend, so the chart conveys only noise.", "fix": "Highlight the one or few lines that matter in a strong color and gray out the rest, ideally with an annotation, or split the series into small multiples.", "ok_when": "The goal is only to show the overall spread or general trend of many series, and no single line needs to be read, or the lines are few and well separated.", "article": "https://www.data-to-viz.com/caveat/spaghetti.html" }, { "id": "10-keep-colors-consistent", "section": "Dashboards and data stories", "title": "Keep colors consistent across charts", "caption": "Use consistent colors for the same groups across charts to enhance clarity. Changing colors\ncan confuse the viewer, while a uniform scheme keeps comparisons clear and intuitive.", "look_for": "Several charts in the same figure, dashboard or report where the same group is drawn with different colors, for example group A is red in a line chart and yellow in the bar chart next to it.", "why": "Readers learn a color for a group in one chart and carry it to the next, so changing colors leads them to misread which group is which.", "fix": "Define one color per group and reuse it in every chart, for example with a shared palette or a fixed color mapping.", "ok_when": "The charts show unrelated variables or groups, so there is no shared category whose color needs to match.", "article": "https://www.data-to-viz.com/caveat/consistency.html" }, { "id": "11-minimize-use-of-legends", "section": "Labels and legends", "title": "Minimize the use of legends", "caption": "Reading a legend requires significant effort, as the reader must constantly move their eyes back\nand forth to match labels with graph elements. Whenever possible, opt for direct labeling instead.", "look_for": "A chart with a separate legend box mapping colors to series names, when the series could be labeled directly, for example a line chart with a few lines and a legend in a corner.", "why": "The reader has to jump between the legend and the data repeatedly to know which mark is which.", "fix": "Write each series name directly next to its line, bar or area, in the same color, and remove the legend.", "ok_when": "There are too many series or the marks are too crowded for direct labels to fit, or the legend explains a continuous scale such as a color gradient or bubble size.", "article": null }, { "id": "12-avoid-counterintuitive", "section": "Misleading charts", "title": "Avoid counterintuitive visuals", "caption": "Visuals should follow common conventions to avoid confusion. Misleading color choices,\nreversed timelines, or inverted Y-axes make it harder to understand the data.", "look_for": "A chart that breaks a reading convention: a y-axis inverted so 0 is at the top and larger values go down, time running right to left, or colors that contradict their usual meaning (for example green for losses). In code, look for reversed axis domains or scale_y_reverse.", "why": "Readers apply the usual conventions automatically, so an inverted axis or reversed timeline makes them read a rise as a fall.", "fix": "Use a standard y-axis with 0 at the bottom and values increasing upward, time running left to right, and conventional colors.", "ok_when": "The inversion matches a domain convention the audience knows, such as depth below sea level, rankings where 1 is at the top, or right-to-left languages, and it is clearly labeled.", "article": "https://www.data-to-viz.com/caveat/counter_intuitive.html" }, { "id": "13-whats-wrong-with-pie", "section": "Wrong chart type", "title": "What's wrong with pie charts?", "caption": "The human eye struggles to accurately read angles, making pie charts less effective for comparisons.\nOpt for chart types that make it easier to compare sizes. Pie charts are acceptable for very simple scenarios.", "look_for": "A pie or donut chart whose slices have similar sizes, has many slices, or several pies placed side by side for comparison.", "why": "Angles and areas are hard to compare, so readers cannot tell which slice is bigger or how slices differ between pies.", "fix": "Use a barplot (or lollipop chart) with a shared axis, where differences in length are easy to see, and sort the bars when the order is not meaningful.", "ok_when": "There are only two or three slices with clearly different sizes and the point is a simple part-of-whole message, such as one share being about half or a quarter.", "article": "https://www.data-to-viz.com/caveat/pie.html" }, { "id": "14-error-bars-on-barplot", "section": "Misleading charts", "title": "Error bars on barplots", "caption": "Error bars obscure the full distribution. If individual data points are available, consider a chart that displays them instead.\nWhen using error bars, always clarify whether they represent a confidence interval, standard error, or standard deviation.", "look_for": "A barplot of group means with error bars on top (sometimes called a dynamite plot), with no individual observations shown, or error bars with no note saying what they represent.", "why": "A mean and an error bar hide the sample size and the shape of the data, and an unlabeled error bar can mean very different things.", "fix": "Show the individual data points, for example as jittered dots over the bars, or use a boxplot, violin or strip plot, and state whether error bars are a confidence interval, standard error or standard deviation.", "ok_when": "Raw data is not available or the values are aggregates by nature, and the error bars are clearly labeled with what they represent.", "article": "https://www.data-to-viz.com/caveat/error_bar.html" }, { "id": "15-dual-y-axis", "section": "Misleading charts", "title": "Dual y-axis", "caption": "Dual Y-axis charts can be misleading if the scales are manipulated to exaggerate correlations.\nInstead, consider using two separate charts or normalizing the data for clearer comparisons.", "look_for": "A chart with two different y-axes, one on the left and one on the right, plotting two variables with different units or ranges on the same panel. In code, look for twinx, secondary_y, yaxis2 or sec_axis with an independent scale.", "why": "The two scales can be stretched freely, so the same data can be made to look correlated, crossing or diverging at will.", "fix": "Plot the two variables in two separate charts sharing the x-axis, or normalize them to a common scale (such as an index or percent change) on a single axis.", "ok_when": "The second axis is just a fixed conversion of the first, such as Celsius and Fahrenheit or counts and percent of a fixed total, so both axes show the same data.", "article": "https://www.data-to-viz.com/caveat/dual_axis.html" }, { "id": "16-radial-bar-chart", "section": "Wrong chart type", "title": "Radial bar charts distort perception", "caption": "Radial bar charts with bars wrapping around the clock can mislead, as outer bars appear\nlarger due to the layout, not the data. Use a standard bar chart to avoid this distortion.", "look_for": "Bars drawn as concentric arcs around a center, where each category is a ring and its value is the angle swept (often called a radial bar chart, race track chart or circular gauge stack). In code, look for polar coordinates with categories mapped to radius and values mapped to angle.", "why": "An outer arc is much longer than an inner arc for the same value, so readers overestimate outer categories and underestimate inner ones.", "fix": "Use a standard horizontal bar chart with all bars starting from the same baseline, sorted by value.", "ok_when": "The chart is decorative or meant to catch the eye with only a few categories and the exact values are labeled, so precise comparison is not the goal.", "article": "https://www.data-to-viz.com/caveat/circular_barplot_accordeon.html" }, { "id": "17-connect-the-dots", "section": "Other", "title": "Connect the dots", "caption": "When X-axis points follow a natural order (like time),\nconnecting them with lines makes trends easier to spot.", "look_for": "A scatter of unconnected points where the x-axis is ordered, such as dates, years, months or sequential steps, with one y value per x position.", "why": "Without a line the eye cannot follow the sequence, so trends, cycles and sudden changes are hard to see.", "fix": "Connect the points in x order with a line, turning the scatter into a line chart. Points can be kept on the line if there are few of them.", "ok_when": "The x-axis is not ordered (categories or an unrelated numeric variable), there are several y values per x, or the observations are irregular and a line would suggest values between them that do not exist.", "article": "https://www.data-to-viz.com/caveat/connect_your_dot.html" }, { "id": "18-z-index-matters", "section": "Other", "title": "Z-index matters", "caption": "When creating a bubble chart,\nlarger bubbles should be positioned beneath smaller ones, not on top.", "look_for": "A bubble chart or sized scatter plot where large circles overlap and partly or fully cover smaller circles. In code, look for marks drawn in data order with no sorting by size.", "why": "Small bubbles hidden under big ones disappear, so readers miss data points and misjudge the number of observations.", "fix": "Draw the bubbles from largest to smallest so the small ones sit on top. Sorting the data by size in descending order before plotting is enough.", "ok_when": "Bubbles do not overlap, or they are transparent enough that every bubble stays visible.", "article": null }, { "id": "19-avoid-3d", "section": "Misleading charts", "title": "Avoid 3D", "caption": "3D distorts perception without adding value.\nStick to 2D.", "look_for": "Bars, pies, areas or other marks rendered with depth, perspective, extrusion or a tilted 3D floor and back wall, when the data has only one or two dimensions.", "why": "Perspective makes marks at the back look smaller and makes it hard to read values against the axis, so comparisons become wrong.", "fix": "Draw the same chart in flat 2D with a clear axis starting at zero.", "ok_when": "The data is truly three-dimensional, such as a surface, terrain or 3D structure, and the chart is interactive so readers can rotate it.", "article": "https://www.data-to-viz.com/caveat/3d.html" }, { "id": "20-upset-plots", "section": "Other", "title": "UpSet plots", "caption": "Venn diagrams quickly become cluttered with 4 or more groups—UpSet plots\noffer a clearer, more structured way to visualize complex intersections.", "look_for": "A Venn or Euler diagram with four or more overlapping sets, where many small intersection regions carry labels or counts.", "why": "With many sets the overlap regions become tiny, oddly shaped and hard to find, so readers cannot compare intersection sizes.", "fix": "Use an UpSet plot: a bar chart of intersection sizes sorted by size, a dot matrix below showing which sets each bar combines, and side bars for total set sizes.", "ok_when": "There are only two or three sets, where a Venn diagram is simple and familiar.", "article": null }, { "id": "21-optimizing-background-colors", "section": "Color", "title": "Optimize background colors", "caption": "Use high-luminance, low-saturation backgrounds in light mode,\nand softened dark tones instead of pure black in dark mode.", "look_for": "A plot area or page background filled with a saturated or mid-tone color, such as a strong blue, or a pure black (#000000) background in dark mode.", "why": "A strong background competes with the data for attention and reduces contrast with the marks, which tires the eye.", "fix": "Use a very light, low-saturation tint or white as the background in light mode, and a soft dark gray instead of pure black in dark mode.", "ok_when": "A colored background is a deliberate brand or editorial choice and the marks and text still have strong contrast against it.", "article": null }, { "id": "22-color-contrast", "section": "Color", "title": "Color contrast", "caption": "Low contrast makes chart elements hard to tell apart, and text hard to read.\nKeep enough contrast between marks, background and labels, and write annotations in a dark color.", "look_for": "Marks, labels or annotations whose color is close to the background, such as pale fill on a pale tinted background or light gray text. In code, look for text and mark colors with a low contrast ratio against the background.", "why": "Readers cannot separate the data from the background or read the labels, so key information is lost.", "fix": "Make the marks clearly darker or lighter than the background and write labels and annotations in a dark color with enough contrast, around 4.5:1 for text.", "ok_when": "Low contrast is applied on purpose to secondary elements, such as context data or gridlines, while the main data and text stay clearly readable.", "article": null }, { "id": "23-avoid-pure-color", "section": "Color", "title": "Avoid pure, flashy colors", "caption": "Pure red, green, and blue are too harsh on the eyes, create contrast issues, and are problematic\nfor colorblind users. Use softer, slightly desaturated colors for better readability.", "look_for": "Fully saturated primary colors such as #FF0000, #00FF00, #0000FF or default named colors like \"red\", \"green\", \"blue\" used for marks.", "why": "Pure colors are harsh to look at, vibrate against each other, and red and green are hard to tell apart for colorblind readers.", "fix": "Replace them with softer, slightly desaturated tones from a designed palette, and avoid relying on a red and green pair alone.", "ok_when": "A single saturated color is used sparingly to highlight one element against otherwise muted colors.", "article": null }, { "id": "24-stacked-charts-are-hard", "section": "Other", "title": "Stacked charts are hard to read", "caption": "Stacked charts make it hard to track the evolution of a specific group\ndue to the shifting baseline. Consider line charts or small multiples.", "look_for": "A stacked area or stacked bar chart, absolute or 100 percent, where the message is about how one group, other than the bottom one, changes over time.", "why": "Only the bottom group sits on a flat baseline, so the trend of every other group is distorted by the groups below it.", "fix": "Show each group with its own baseline, using a line chart or small multiples with one panel per group.", "ok_when": "The main message is the total, or the part-to-whole split at a glance, or there are only two groups and the bottom one is the focus.", "article": "https://www.data-to-viz.com/caveat/stacking.html" }, { "id": "25-avoid-cherry-picking", "section": "Misleading charts", "title": "Avoid cherry-picking data", "caption": "Cherry-picking data by zooming in on a specific section can mislead\nviewers. Always show the broader context to reveal the true trend.", "look_for": "A time series limited to a short window, such as one year, that shows a clear trend when longer data obviously exists, with no mention of the wider period.", "why": "A short window can show a rise or fall that is the opposite of the long-term trend, so readers draw the wrong conclusion.", "fix": "Show the full or a longer time range and highlight the period of interest within it, for example by drawing the rest of the series in a light color.", "ok_when": "The short period is the actual subject, it is clearly stated, and the longer trend does not change the conclusion.", "article": null }, { "id": "26-dont-move-countries", "section": "Maps", "title": "Don't move countries around", "caption": "Moving a country to save space, or dropping it because it doesn’t fit, distorts geography\nand can offend its people. Keep every country where it belongs, even if it costs some room.", "look_for": "A map where a country or region is shifted from its true position, pulled closer to save space, or missing entirely because it did not fit the frame.", "why": "It gives readers a false picture of geography and can offend people from the moved or missing country.", "fix": "Draw every country at its true position and accept the extra space it needs.", "ok_when": "A clearly framed inset is used for distant territories, as is common for Alaska and Hawaii, and the inset is visibly separated and labeled.", "article": null }, { "id": "27-beware-mercator", "section": "Maps", "title": "Beware of the Mercator projection", "caption": "Mercator inflates areas far from the equator: Greenland looks as big as Africa,\nwhich is actually 14 times larger. To compare areas, use an equal-area projection like Equal Earth.", "look_for": "A world or large-region map in the Mercator or Web Mercator projection, recognizable by a huge Greenland and stretched polar regions, used to show values by area such as a choropleth.", "why": "Mercator inflates areas far from the equator, so northern and southern countries look much bigger and get more visual weight than they should.", "fix": "Use an equal-area projection such as Equal Earth, so country sizes on the map match their real area.", "ok_when": "The map is a zoomable web map for local navigation, or covers a small region near the equator, where area distortion is negligible.", "article": null }, { "id": "28-scatter-plot-aspect-ratio", "section": "Other", "title": "Mind your scatter plot's shape", "caption": "Stretching a scatter plot changes how steep and how strong the relationship looks.\nDefault to a square plot, and always use a 1:1 ratio when both axes share the same unit.", "look_for": "A scatter plot with a very wide or very tall plot area, or one where both axes use the same unit but have different scales per unit.", "why": "Stretching the plot flattens or steepens the cloud of points, so the relationship looks weaker or stronger than it is.", "fix": "Use a square plot area by default, and set a 1:1 aspect ratio when both axes share the same unit.", "ok_when": "The axes measure different quantities and the shape is chosen on purpose to fit the layout without hiding the pattern, or the chart is a time series where a wider shape is normal.", "article": "https://www.data-to-viz.com/caveat/aspect_ratio.html" }, { "id": "29-draw-proportions-accurately", "section": "Misleading charts", "title": "Draw proportions accurately", "caption": "When shapes don’t match the numbers, readers trust the shapes and get the wrong picture.\nAlways draw arcs, bars and areas from the data, never by eye.", "look_for": "Donuts, gauges, bars or areas whose drawn size does not match the labeled value, for example a ring labeled 14% that fills about a third of the circle. Often seen in hand-made infographics and slides.", "why": "Readers judge the shape before the number, so a wrong shape sends the wrong message even when the label is correct.", "fix": "Compute every arc, bar length and area from the data, so a 14% arc covers exactly 14% of the circle.", "ok_when": null, "article": null }, { "id": "30-readable-date-axis", "section": "Other", "title": "Make date axes easy to follow", "caption": "Ticks on arbitrary dates, with no year, force readers to work out where they are in time.\nPlace ticks at regular, meaningful intervals such as months or quarters, and show the year.", "look_for": "A date axis with ticks on irregular or arbitrary dates, such as 4 Feb, 20 Jun, 4 Nov, and no year shown when the data spans more than one year.", "why": "Readers cannot tell where they are in time or how much time separates two points.", "fix": "Place ticks at regular calendar intervals such as months or quarters, and show the year, for example once below the first tick of each year.", "ok_when": "The data covers a short period within one year that is stated in the title, or the specific dates are meaningful events that need their own labels.", "article": null }, { "id": "31-sequential-palette-for-numbers", "section": "Color", "title": "Use a sequential palette for numbers", "caption": "Categorical colors have no natural order: readers can’t tell which color means more without\nconstantly checking the legend. For numeric values, use a sequential palette from light to dark.", "look_for": "A map, heatmap or chart that encodes a numeric or ordered variable (values or ranked bins such as 0–20, 20–40) with unrelated hues like blue, red, green and yellow instead of one color going from light to dark.", "why": "Readers cannot tell which hue means more without checking the legend for every shape, so they lose the low-to-high pattern.", "fix": "Use a sequential palette where lightness steadily increases with the value, light for low and dark for high, keeping the same bins and legend.", "ok_when": "Distinct hues are fine when the variable is categorical with no order, and a diverging palette is better when the values have a meaningful midpoint such as zero.", "article": null }, { "id": "32-share-the-y-axis", "section": "Dashboards and data stories", "title": "Share the y-axis to compare charts", "caption": "When charts sit side by side to compare the same measure, different y scales make them look alike.\nUse the same y axis on all of them so that heights can be compared directly.", "look_for": "Small multiples or side-by-side panels that show the same measure, but whose y-axes have different ranges (for example 0–60 next to 0–300), often from free scales like facet_wrap(scales = \"free_y\") or sharey=False.", "why": "Panels with different scales look alike, so readers compare line or bar heights and wrongly conclude the groups have similar values.", "fix": "Give every panel the same y-axis range so that heights can be compared directly across panels.", "ok_when": "Independent scales are acceptable when the panels show different units or measures, or when the goal is to compare the shape of each trend rather than its level, and this is clearly stated.", "article": null }, { "id": "33-too-many-colors", "section": "Color", "title": "Too many colors kill the story", "caption": "Beyond a handful of colors, readers can no longer match them to the legend.\nFind the story in your data, highlight only what matters, and leave the rest in grey.", "look_for": "A chart with many colored series or groups, roughly more than six or seven, each with its own hue and a long legend the reader must match against, such as a scatterplot with twelve colored groups.", "why": "Readers cannot reliably match that many colors to the legend, so no clear message comes through.", "fix": "Pick the group or series that carries the story, color only that one, draw everything else in light grey, and label the highlighted group directly instead of using a legend.", "ok_when": "Many colors can work in an interactive chart where readers filter or hover, or when the goal is only to show that groups form separate clusters rather than to identify each one.", "article": null }, { "id": "34-distinct-colors-for-groups", "section": "Color", "title": "Don't use a gradient for groups", "caption": "Shades of a single color are hard to tell apart and suggest an order between groups that doesn’t exist.\nFor categories, use clearly distinct hues, and keep gradients for numeric values.", "look_for": "Unordered categories (groups, countries, products) colored with shades of a single hue or a light-to-dark gradient, so that several lines, bars or areas look nearly the same color.", "why": "Similar shades are hard to tell apart and suggest a ranking between groups that does not exist.", "fix": "Give each category a clearly distinct hue from a qualitative palette, and keep gradients for numeric or ordered variables.", "ok_when": "A single-hue gradient is appropriate when the groups have a real order, such as age bands, years, or low to high income levels.", "article": null }, { "id": "35-align-everything", "section": "Design", "title": "Align everything with something", "caption": "When the title, labels and notes each start somewhere different, the chart looks messy and is harder to scan.\nSnap every element to a shared edge: the fewer alignment lines, the calmer the figure.", "look_for": "Title, subtitle, axis labels, category labels and source note that each start at a different left edge, so the eye has to jump between several invisible vertical lines.", "why": "Ragged starting points make the chart look messy and slow down scanning.", "fix": "Snap the title, subtitle, labels and notes to one shared left edge so the figure has as few alignment lines as possible.", "ok_when": "Elements with their own deliberate alignment, such as right-aligned numbers or labels attached to data points, are fine as long as they follow a consistent rule.", "article": null }, { "id": "36-labels-off-the-data", "section": "Labels and legends", "title": "Don't put labels on top of the data", "caption": "Labels and annotations drawn over lines or shapes hide the data and are hard to read.\nPlace them in empty space, right next to what they describe, such as at the end of a line.", "look_for": "Text labels or annotations drawn directly over lines, bars, points or other marks, so that strokes cross the letters or the label hides part of the data.", "why": "Overlapping labels hide the data and are hard to read because the marks cut through the text.", "fix": "Move each label into nearby empty space, right next to what it describes, for example at the end of a line or beside a point.", "ok_when": "Labels inside large shapes with enough room and contrast, such as values inside wide bars or names inside map regions, are fine.", "article": null }, { "id": "37-two-fonts-max", "section": "Design", "title": "Two fonts are enough", "caption": "Every extra typeface adds visual noise and makes a chart look improvised.\nStick to two fonts at most, and use size and weight to build the hierarchy.", "look_for": "A chart that uses three or more typefaces, for example a script title, a monospace subtitle, italic serif labels and a condensed font for values, or code that sets many different font families.", "why": "Each extra typeface adds visual noise and makes the chart look improvised rather than designed.", "fix": "Use one or two font families at most and build the hierarchy with size and weight, such as a larger title and bold category labels.", "ok_when": "A tabular or monospace font for numbers, or a required brand font for the title, is fine as long as the total stays at two families.", "article": null }, { "id": "38-remove-the-box", "section": "Design", "title": "Do you really need that box?", "caption": "Many R and Python defaults wrap every chart in a box, with ticks on all sides and a dense grid.\nIt is pure clutter: drop the frame, keep a few light gridlines, and let the data stand out.", "look_for": "A chart enclosed in a full rectangular frame, with ticks on all four sides and a dense grid of both horizontal and vertical lines, typical of default R base or matplotlib styling.", "why": "The frame and heavy grid add clutter that competes with the data for attention.", "fix": "Remove the box and the extra ticks, keep a few light horizontal gridlines at the main values, and let the data line or bars stand out.", "ok_when": "A frame or denser grid is reasonable when separating several panels, or when readers must read precise values off the chart, as in technical or scientific plots.", "article": null }, { "id": "39-font-size-matters", "section": "Design", "title": "Font size matters", "caption": "Tiny text forces readers to squint, and becomes unreadable on slides and phones.\nNever go below 14px for anything meant to be read, and make the title bigger still.", "look_for": "Labels, values, axis text or source notes that are tiny compared to the chart, below about 14px at the intended display size, or a title that is barely larger than the body text.", "why": "Tiny text forces readers to squint and becomes unreadable on slides and phones.", "fix": "Set all text meant to be read to at least 14px at final display size and make the title clearly larger than the rest.", "ok_when": "Small text is acceptable for print figures viewed up close at high resolution, or for secondary notes that are not needed to understand the chart.", "article": null }, { "id": "40-group-what-belongs-together", "section": "Design", "title": "Group what belongs together", "caption": "Spacing tells readers what goes together. Loose line height and floating labels blur the structure.\nKeep related items tight, put labels right next to their data, and leave more room between groups.", "look_for": "Spacing that does not match the structure: a subtitle split into lines with large gaps, labels floating far from their points or bars, or equal spacing between unrelated and related elements.", "why": "When spacing does not match what belongs together, readers have to work out which label goes with which mark and which text forms one block.", "fix": "Keep related items tight, such as the lines of a subtitle and a label next to its point, and leave more space between separate groups like the header and the plot.", "ok_when": null, "article": null }, { "id": "41-normalize-your-maps", "section": "Maps", "title": "Normalize your maps", "caption": "A map of raw counts is mostly a map of where people live: the biggest countries always look the worst.\nDivide by population, or by area, so that colors show a rate rather than a size.", "look_for": "A choropleth map whose colors encode raw counts or totals (cases, sales, events) per region, with a legend such as \"Cases\" rather than a rate like \"per 100,000 people\" or \"per km²\".", "why": "Raw counts mostly reflect population or area, so the biggest regions always look the worst and the real pattern is hidden.", "fix": "Divide the counts by population or area and map the resulting rate, with a legend that states the unit such as cases per 100,000 people.", "ok_when": "Raw totals are fine when the total itself is the point, for example where resources must go, and then proportional symbols such as bubbles are usually better than filled regions.", "article": "https://xkcd.com/1138/" }, { "id": "42-respect-time-intervals", "section": "Misleading charts", "title": "Respect time intervals", "caption": "Evenly spaced bars for unevenly spaced dates distort the trend: here, steady growth looks like a slowdown.\nPut time on a true scale, so that gaps between dates show as gaps on the chart.", "look_for": "Bars or points for dates that are unevenly spaced (for example 1990, 2000, 2010, 2015, 2017, 2019, 2020, 2021) placed at equal distances along the axis, often because time is treated as a categorical or string variable.", "why": "Equal spacing for unequal gaps distorts the trend, here making steady growth look like a slowdown.", "fix": "Put time on a true continuous scale so that bars or points sit at their real dates and gaps between dates show as gaps on the chart.", "ok_when": "Equal spacing is correct when the dates are evenly spaced, and categorical periods such as named seasons or survey waves can stay evenly spaced if this is made clear.", "article": null }, { "id": "43-show-the-sample-size", "section": "Misleading charts", "title": "Show the sample size", "caption": "A mean alone hides how much data stands behind it: 8 values or 1,000 look exactly the same.\nShow the individual points, or at least the sample size, so readers can judge how solid it is.", "look_for": "A bar chart or summary chart that shows only a mean, median or proportion per group, with no individual points, no error bars and no sample size (n) given.", "why": "A summary value alone hides how much data stands behind it, so a mean of 8 values looks as solid as a mean of 1,000.", "fix": "Show the individual data points with the mean marked as a line, or at least print the sample size under each group, such as n = 8 and n = 1,000.", "ok_when": "A bare summary is acceptable when all groups have large, similar sample sizes and this is stated in the text or caption.", "article": null }, { "id": "44-avoid-the-rainbow-palette", "section": "Color", "title": "Avoid the rainbow palette", "caption": "Rainbow palettes draw sharp bands that aren’t in the data, and their bright yellow grabs attention for no reason.\nUse a perceptually uniform palette that goes smoothly from light to dark.", "look_for": "A heatmap, map or continuous color scale that uses a rainbow or jet palette (blue to cyan, green, yellow, red), for example cmap='jet' or 'rainbow' in matplotlib or rainbow() in R.", "why": "Rainbow palettes create sharp color bands that are not in the data and their bright yellow pulls attention to arbitrary values.", "fix": "Use a perceptually uniform sequential palette that goes smoothly from light to dark, such as viridis or a single-hue ramp.", "ok_when": "Rainbow-like hues can be fine for categorical data or cyclical variables such as direction or phase, where a cyclic palette is designed for the purpose.", "article": "https://blog.datawrapper.de/colors/" }, { "id": "45-diverging-palette", "section": "Color", "title": "Diverging data, diverging palette", "caption": "When values fall on both sides of a meaningful midpoint, like zero, a sequential palette hides which side they are on.\nUse a diverging palette: one hue for each direction, meeting at a light neutral color at the midpoint.", "look_for": "Data with a meaningful midpoint, such as zero, an average or a target, where negative and positive values are shown with a single sequential palette, for example legend bins -2 to -1 and 2 to 3 in shades of the same hue.", "why": "A sequential palette hides which side of the midpoint each value falls on, so readers cannot see where the sign changes.", "fix": "Use a diverging palette with one hue for values below the midpoint and another for values above, meeting at a light neutral color at the midpoint.", "ok_when": "A sequential palette is correct when all values are on one side of the midpoint or when the midpoint has no special meaning.", "article": null }, { "id": "46-think-of-colorblind-readers", "section": "Color", "title": "Think of colorblind readers", "caption": "About 1 man in 12 has a color vision deficiency, and red versus green is the classic trap.\nPick colorblind-safe pairs such as blue and orange, and label lines directly whenever you can.", "look_for": "Two or more series or categories told apart only by red versus green (or other pairs that look alike under color vision deficiency), with a separate legend and no direct labels, shapes or line styles.", "why": "Readers with a color vision deficiency see the two colors as nearly the same shade and cannot tell which series is which.", "fix": "Use a colorblind-safe palette such as blue and orange, and label each series directly at the end of its line instead of relying on a legend.", "ok_when": "Fine when color is redundant with another cue, such as direct labels, position, shape or line style, so the chart still reads without telling the hues apart.", "article": null }, { "id": "47-reorder-your-heatmap", "section": "Other", "title": "Reorder your heatmap", "caption": "In alphabetical or random order, the rows and columns of a heatmap look like noise.\nReorder them, for instance with hierarchical clustering, so that groups and patterns appear.", "look_for": "A heatmap whose rows and columns are in alphabetical, numeric-id or input order, so the cells look like a random checkerboard with no visible blocks of similar values.", "why": "Without a meaningful order, similar rows and columns sit far apart and the reader sees noise instead of groups.", "fix": "Reorder rows and columns, for instance with hierarchical clustering or by a summary value, so similar items sit next to each other and blocks of high and low values appear.", "ok_when": "Keep the natural order when rows or columns have one that matters to the reader, such as time, age groups, ranks or a fixed geographic sequence.", "article": "https://www.data-to-viz.com/graph/heatmap.html" }, { "id": "48-beware-of-overplotting", "section": "Other", "title": "Beware of overplotting", "caption": "With thousands of points, dots pile up into a solid blob that hides the shape of the data.\nUse smaller, transparent dots, or switch to a 2D density or hexbin chart.", "look_for": "A scatterplot with hundreds or thousands of opaque, fairly large dots that merge into a solid area, so density differences and sub-clusters inside the cloud are invisible.", "why": "Overlapping dots hide where the data is dense, so the reader misses clusters and misjudges the shape of the distribution.", "fix": "Use smaller, semi-transparent dots, or switch to a 2D density plot, hexbin or 2D histogram so that dense areas stand out.", "ok_when": "Not an issue when the number of points is small enough that dots rarely overlap, or when the goal is only to show the overall range and outliers.", "article": "https://www.data-to-viz.com/caveat/overplotting.html" }, { "id": "49-make-the-title-say-something", "section": "Design", "title": "Make the title say something", "caption": "A generic title like “Sales by year” leaves readers to find the message on their own.\nWrite the takeaway in the title, and highlight it on the chart.", "look_for": "A chart title that only names the variables or the dataset, like \"Sales by year\" or \"Revenue over time\", with nothing in the chart highlighting a key point.", "why": "Readers have to work out the message by themselves, and many will miss it or take away a different one.", "fix": "Write the main takeaway as the title, for example \"Sales doubled since 2020\", keep the units in a subtitle, and highlight the matching part of the chart with color and value labels.", "ok_when": "A neutral descriptive title is fine for exploratory tools, reference charts or dashboards where the reader brings their own question and there is no single message.", "article": null }, { "id": "50-round-your-numbers", "section": "Labels and legends", "title": "Round your numbers", "caption": "Too many decimals add noise, and suggest a precision the data doesn’t have.\nRound to what matters, and drop axes that only repeat the labels.", "look_for": "Value labels, tooltips or axis ticks showing many decimals, like 23.4567% or 0.20000, and an axis that repeats information already given by direct value labels.", "why": "Extra digits are noise that slows reading, and they suggest a precision the data does not have.", "fix": "Round labels to the precision that matters, like 23%, and remove an axis that only duplicates the value labels on the bars.", "ok_when": "Keep more digits when small differences are the point and the data is truly that precise, such as scientific measurements or values that would round to the same number.", "article": null }, { "id": "51-show-missing-data", "section": "Maps", "title": "Show missing data as missing", "caption": "When countries without data get the lightest color, readers take them for low values.\nGive missing data its own neutral style, like grey hatching, and name it in the legend.", "look_for": "A choropleth or heatmap where regions or cells without data share the lightest color of the scale, or a legend with no \"No data\" entry while some areas are clearly empty.", "why": "Readers read missing areas as low values and draw wrong conclusions about them.", "fix": "Give missing data its own neutral style that is not part of the color scale, such as grey hatching or plain light grey, and add a \"No data\" entry to the legend.", "ok_when": "Not needed when every region or cell has a value, or when areas outside the scope of the study are clearly shown as background, for example countries outside the map's focus in a flat grey with a note.", "article": null }, { "id": "52-small-regions-disappear", "section": "Maps", "title": "Don't let small regions disappear", "caption": "On a choropleth, small countries are only a few pixels wide: here, the two highest values are invisible.\nCall them out with markers and labels, or use a tile map where every region gets the same size.", "look_for": "A choropleth where some regions are only a few pixels wide, such as Luxembourg, Malta or small islands, and their color, often an extreme value, cannot be seen or is not called out.", "why": "Values carried by tiny regions are invisible, so the reader can miss the most important data points.", "fix": "Add markers and labels pointing to the small regions with notable values, or use a tile map or hexbin map where every region gets the same size.", "ok_when": "Fine when the small regions have unremarkable values that the story does not depend on, or when the map is interactive and lets readers zoom in.", "article": null }, { "id": "53-maybe-you-dont-need-a-map", "section": "Wrong chart type", "title": "Maybe you don't need a map", "caption": "If the question is “who ranks first?”, colored shapes make readers squint and guess.\nWhen geography is not the point, a sorted bar chart compares values far more precisely.", "look_for": "A choropleth used to show a ranking or a precise comparison of a handful of regions, where the title or question is about who ranks first or by how much, and geographic patterns are not discussed.", "why": "Comparing shades of color on irregular shapes is slow and imprecise, so readers squint and guess the ranking.", "fix": "When geography is not the point, use a bar chart sorted by value, with region names as labels and values printed at the end of each bar.", "ok_when": "A map is the right choice when the spatial pattern matters, such as clusters, gradients or neighbors, or when readers need to find their own region.", "article": null }, { "id": "54-two-groups-try-a-dumbbell", "section": "Wrong chart type", "title": "Two groups? Try a dumbbell plot", "caption": "Side-by-side bars double the ink and leave readers to estimate the gap between them on their own.\nWhen the change is the story, a dumbbell plot shows it directly, and uses half the ink.", "look_for": "A grouped bar chart with exactly two bars per category, often two years or two conditions, where the message is the change or gap between the two values.", "why": "Readers must estimate the difference between two separate bars in their head, and the doubled bars add a lot of ink.", "fix": "Use a dumbbell plot: one dot per group joined by a line for each category, so the gap and its direction are visible directly; label the two dot colors at the top.", "ok_when": "Grouped bars are fine when readers need to compare absolute values against zero more than the gap, or when there are more than two groups.", "article": null }, { "id": "55-annotate-your-chart", "section": "Labels and legends", "title": "Annotation is crucial", "caption": "A bare chart leaves readers guessing, and you only have a few seconds to hold their attention.\nAdd short notes, shaded areas and value labels that point straight at what matters.", "look_for": "A chart with a clear notable feature, such as a sharp drop, a peak, a record or a known event period, but no text annotation, shaded area or value label explaining it.", "why": "Readers have only a few seconds to understand the chart, and without annotations they may miss or misread the key moments.", "fix": "Add short text notes next to the important features, shade relevant periods like a lockdown, and label key values such as the peak and the last point.", "ok_when": "Light or no annotation is fine for exploratory or interactive tools where the reader drives the analysis, or for small multiples where notes would clutter every panel.", "article": "https://www.data-to-viz.com/caveat/annotation.html" }, { "id": "56-simpsons-paradox", "section": "Misleading charts", "title": "Beware of Simpson's paradox", "caption": "Overall, x and y seem to rise together. Split the data by group, and the trend reverses in each one.\nBefore trusting a correlation, check whether a hidden variable drives it.", "look_for": "A scatterplot or summary showing one overall trend line or correlation on data that contains distinct groups (visible as separate clusters, or a grouping variable in the code), with no breakdown by group.", "why": "The overall trend can be the opposite of the trend inside every group, so the reader draws a false conclusion.", "fix": "Color points by group and fit a trend line per group, then check whether the within-group trends agree with the overall one before stating a correlation.", "ok_when": "Not a concern when the data has no meaningful subgroups or confounding variable, or when per-group trends have been checked and match the overall trend.", "article": "https://www.data-to-viz.com/caveat/simpson.html" }, { "id": "57-circular-barplot-distortion", "section": "Wrong chart type", "title": "Use circular barplots with care", "caption": "Bars get wider away from the center, so large values look even larger than they are.\nIf you go circular, use many bars, a clear pattern, and a large inner circle.", "look_for": "A circular barplot or radial bar chart with few bars and a tiny or no inner circle, so outer bars become wide wedges, often with no radial axis or values shown.", "why": "Bars widen with distance from the center, so large values take a disproportionate area and look bigger than they are, and lengths are hard to compare along a curve.", "fix": "Prefer a regular bar chart for precise comparison; if you go circular, use many bars, a clear pattern such as sorted values, a large inner circle, and a light radial scale.", "ok_when": "A circular layout is acceptable for many bars with a cyclical or striking overall pattern, such as hours of the day or months, when the general shape matters more than exact values.", "article": "https://www.data-to-viz.com/caveat/circular_bar_yaxis.html" }, { "id": "58-use-margins-between-charts", "section": "Dashboards and data stories", "title": "Use margins between charts", "caption": "When charts touch each other, the page feels crowded and it’s hard to tell where one chart ends.\nLeave clear gaps between them, and some padding inside each one.", "look_for": "A dashboard or multi-panel figure where charts touch each other, share borders, or have titles and marks pressed against the panel edges with no padding.", "why": "Without space, the page feels crowded and readers struggle to see where one chart ends and the next begins.", "fix": "Leave clear gaps between charts, add padding inside each panel around the title and the plot, and optionally use light rounded card borders.", "ok_when": "Tight spacing is fine for small multiples that share axes and are meant to be read as one chart, where removing gaps aids comparison.", "article": null }, { "id": "59-link-your-charts", "section": "Dashboards and data stories", "title": "Link charts that share an axis", "caption": "When charts share dates or groups, a tooltip on just one of them leaves readers hunting for the match.\nOn hover, highlight the same date or group on every chart at once.", "look_for": "An interactive dashboard with several charts sharing the same x-axis dates or the same categories, where hovering one chart shows a tooltip only on that chart and nothing happens on the others.", "why": "Readers have to search the other charts for the matching date or group and often misalign them.", "fix": "Synchronize hover across charts: show a shared vertical guide line or highlight the same date or group on every chart, with a tooltip on each, and fade the other elements.", "ok_when": "Not relevant for static charts, or when the charts do not share a common date, group or key.", "article": null }, { "id": "60-dont-label-every-tick", "section": "Labels and legends", "title": "Don't label every tick", "caption": "Labelling every tick crowds the axis, and on small screens the numbers soon touch or overlap.\nLabel round steps only, and keep shorter ticks in between to show the scale.", "look_for": "An axis with a label on every tick, such as every integer from 0 to 25 or every date, so labels are crammed, touch each other, overlap or are rotated to fit.", "why": "Crowded tick labels are hard to read, overlap on small screens, and add clutter without helping the reader.", "fix": "Label only round steps, such as every 5 or every 10, and keep shorter unlabeled ticks in between to show the scale.", "ok_when": "Labeling every tick is fine when there are only a few, or when each tick is a category that must be named, such as months or countries, and the labels fit without touching.", "article": null }, { "id": "61-declutter-less-is-more", "section": "Design", "title": "Declutter: less is more", "caption": "Frames, dense grids, legends and decimals all compete with your message for the reader’s eye.\nRemove what doesn’t serve your point, and let the title and colors carry it.", "look_for": "A chart with non-data ink that competes with the data: a heavy frame, a dense grid, a legend for a single series, tick labels with needless decimals like 2.5 steps or 30.0, and a single saturated color on every bar.", "why": "Every extra element draws the eye away from the message, so the reader takes longer to see the point.", "fix": "Remove the frame, legend and extra gridlines, use fewer and rounder ticks, write the takeaway in the title, and color only the bars that carry the message while greying the rest.", "ok_when": "Some structure is useful when readers must look up precise values, for example light gridlines on a reference chart, and a legend is needed when there are several series that cannot be labeled directly.", "article": "https://www.data-to-viz.com/caveat/declutter.html" } ] }