From 61fdeb301dad3aec2dd73629969b7e2a38517698 Mon Sep 17 00:00:00 2001
From: Ilya <someuser.ivn@gmail.com>
Date: Sat, 11 Jun 2022 00:07:04 +0300
Subject: [PATCH] Visual treatment for small numbers (#532)

* Added visual treatment for small numbers

* Test fixes

* Fixes

* Test fixes

* Added visual legend instead of caption
---
 spotlight-client/package.json                 |   1 +
 .../MetricVizControls.test.tsx                |   6 +-
 .../MetricVizControls/MetricVizControls.tsx   |   3 +
 spotlight-client/src/Notes/Notes.tsx          |   3 +-
 .../BarChartPair.tsx                          |   3 +-
 .../src/VizControls/VizControls.test.tsx      |   4 +-
 .../src/VizControls/VizControls.tsx           |  15 +-
 .../VizDemographicsByCategory.tsx             |   3 +-
 .../VizPopulationBreakdownByLocation.tsx      |   7 +-
 .../VizPrisonStayLengths.tsx                  |   3 +-
 .../VizRecidivismRateCumulative.tsx           |   3 +-
 .../VizRecidivismRateSingleFollowup.tsx       |   7 +-
 .../VizSentenceTypeByLocation.tsx             |   7 +-
 .../VizSupervisionSuccessRate.tsx             |   7 +-
 .../src/charts/BarChartTrellis.test.tsx       |   5 +-
 .../src/charts/BarChartTrellis.tsx            | 144 ++++++++++--------
 .../src/charts/BubbleChart.test.tsx           |   2 +-
 spotlight-client/src/charts/BubbleChart.tsx   |  27 +++-
 .../src/charts/ProportionalBar.test.tsx       |   4 +-
 .../src/charts/ProportionalBar.tsx            |  26 +++-
 spotlight-client/src/charts/RateTrend.tsx     |   6 +
 .../src/charts/useCreateHatchDefs.tsx         |  60 ++++++++
 spotlight-client/src/charts/utils.ts          |   9 +-
 spotlight-client/src/constants.ts             |   2 +
 .../src/contentApi/sources/us_nd.ts           |   7 +-
 spotlight-client/yarn.lock                    |  19 ++-
 26 files changed, 258 insertions(+), 125 deletions(-)
 create mode 100644 spotlight-client/src/charts/useCreateHatchDefs.tsx

diff --git a/spotlight-client/package.json b/spotlight-client/package.json
index a5a84f23..1dfa6332 100644
--- a/spotlight-client/package.json
+++ b/spotlight-client/package.json
@@ -43,6 +43,7 @@
     "@types/react-simple-maps": "^1.0.3",
     "@types/styled-components": "^5.1.5",
     "@types/topojson": "^3.2.2",
+    "@vx/pattern": "^0.0.199",
     "@w11r/use-breakpoint": "^1.8.0",
     "assert-never": "^1.2.1",
     "body-scroll-lock": "^3.1.5",
diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx
index b8d9c03a..56e61a2f 100644
--- a/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx
+++ b/spotlight-client/src/MetricVizControls/MetricVizControls.test.tsx
@@ -20,7 +20,7 @@ import React from "react";
 import createMetricMapping from "../contentModels/createMetricMapping";
 import HistoricalPopulationBreakdownMetric from "../contentModels/HistoricalPopulationBreakdownMetric";
 import contentFixture from "../contentModels/__fixtures__/tenant_content_exhaustive";
-import { renderWithTheme } from "../testUtils";
+import { renderWithStore } from "../testUtils";
 import MetricVizControls from "./MetricVizControls";
 
 const testTenantId = "US_ND";
@@ -42,7 +42,7 @@ test("download button", () => {
   const metric = getTestMetric();
   jest.spyOn(metric, "download").mockImplementation(() => Promise.resolve());
 
-  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithStore(<MetricVizControls filters={[]} metric={metric} />);
 
   const download = screen.getByRole("button", { name: "Download Data" });
   expect(download).toBeVisible();
@@ -53,7 +53,7 @@ test("download button", () => {
 
 test("methodology modal", () => {
   const metric = getTestMetric();
-  renderWithTheme(<MetricVizControls filters={[]} metric={metric} />);
+  renderWithStore(<MetricVizControls filters={[]} metric={metric} />);
 
   const methodology = screen.getByRole("button", { name: "Methodology" });
 
diff --git a/spotlight-client/src/MetricVizControls/MetricVizControls.tsx b/spotlight-client/src/MetricVizControls/MetricVizControls.tsx
index 2a624583..473d2093 100644
--- a/spotlight-client/src/MetricVizControls/MetricVizControls.tsx
+++ b/spotlight-client/src/MetricVizControls/MetricVizControls.tsx
@@ -23,17 +23,20 @@ import VizControls, { VizControlsProps } from "../VizControls";
 type MetricVizControlsProps = {
   filters: VizControlsProps["filters"];
   metric: Metric<MetricRecord>;
+  smallData?: boolean;
 };
 
 const MetricVizControls = ({
   filters,
   metric,
+  smallData,
 }: MetricVizControlsProps): React.ReactElement => {
   return (
     <VizControls
       filters={filters}
       download={() => metric.download()}
       methodology={metric.methodology}
+      smallData={smallData}
     />
   );
 };
diff --git a/spotlight-client/src/Notes/Notes.tsx b/spotlight-client/src/Notes/Notes.tsx
index 134fb5c6..3af5bbc5 100644
--- a/spotlight-client/src/Notes/Notes.tsx
+++ b/spotlight-client/src/Notes/Notes.tsx
@@ -25,9 +25,8 @@ const Wrapper = styled.ol`
   font-size: ${rem(13)};
   font-weight: 500;
   line-height: 1.7;
-  list-style: decimal outside;
+  list-style: none;
   margin-top: ${rem(40)};
-  padding-left: 1em;
 `;
 
 const Item = styled.li`
diff --git a/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx b/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx
index e14da5b9..5b87f244 100644
--- a/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx
+++ b/spotlight-client/src/RacialDisparitiesNarrativePage/BarChartPair.tsx
@@ -22,7 +22,6 @@ import styled from "styled-components/macro";
 import { ItemToHighlight, ProportionalBar } from "../charts";
 import { DemographicCategoryRecords } from "../contentModels/types";
 import VizControls, { VizControlsProps } from "../VizControls";
-import VizNotes from "../VizNotes";
 
 const CHART_HEIGHT = 165;
 const CHART_HEIGHT_MOBILE = 100;
@@ -90,6 +89,7 @@ export default function BarChartPair({
           filters={filters}
           methodology={methodology}
           download={download}
+          smallData={!preview}
         />
       )}
       <ProportionalBar
@@ -106,7 +106,6 @@ export default function BarChartPair({
         highlighted={highlightedCategory}
         setHighlighted={setHighlightedCategory}
       />
-      {!preview && <VizNotes smallData />}
     </Wrapper>
   );
 }
diff --git a/spotlight-client/src/VizControls/VizControls.test.tsx b/spotlight-client/src/VizControls/VizControls.test.tsx
index 7fa646c5..9ca10ec9 100644
--- a/spotlight-client/src/VizControls/VizControls.test.tsx
+++ b/spotlight-client/src/VizControls/VizControls.test.tsx
@@ -17,14 +17,14 @@
 
 import { fireEvent, screen, within } from "@testing-library/react";
 import React from "react";
-import { renderWithTheme } from "../testUtils";
+import { renderWithStore } from "../testUtils";
 import VizControls from "./VizControls";
 
 const mockDownload = jest.fn();
 const mockMethodology = "test methodology";
 
 beforeEach(() => {
-  renderWithTheme(
+  renderWithStore(
     <VizControls
       filters={[]}
       download={mockDownload}
diff --git a/spotlight-client/src/VizControls/VizControls.tsx b/spotlight-client/src/VizControls/VizControls.tsx
index 54202279..96989002 100644
--- a/spotlight-client/src/VizControls/VizControls.tsx
+++ b/spotlight-client/src/VizControls/VizControls.tsx
@@ -15,12 +15,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
+import { TooltipTrigger, Icon, IconSVG } from "@recidiviz/design-system";
 import HTMLReactParser from "html-react-parser";
 import { rem } from "polished";
 import React, { useState } from "react";
 import styled from "styled-components/macro";
 import downloadPath from "../assets/cloud-download.svg";
 import machineLearningPath from "../assets/machine-learning.svg";
+import { useDataStore } from "../StoreProvider";
 import { colors, CopyBlock, Modal, ModalHeading, zIndex } from "../UiLibrary";
 
 const Wrapper = styled.div`
@@ -29,16 +31,16 @@ const Wrapper = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   z-index: ${zIndex.control};
+  margin-bottom: ${rem(32)};
 `;
 
 const ControlsGroup = styled.div`
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: ${rem(16)};
+  align-items: center;
 `;
 
 const FilterWrapper = styled.div`
-  margin-bottom: ${rem(16)};
   margin-right: ${rem(32)};
 
   &:last-child {
@@ -53,7 +55,6 @@ const Button = styled.button`
   cursor: pointer;
   font-size: ${rem(14)};
   font-weight: 500;
-  margin-bottom: ${rem(16)};
   padding: none;
 `;
 
@@ -72,14 +73,17 @@ export interface VizControlsProps {
   filters: React.ReactNode[];
   download: () => void;
   methodology: string;
+  smallData?: boolean;
 }
 
 const VizControls = ({
   download,
   filters,
   methodology,
+  smallData,
 }: VizControlsProps): React.ReactElement => {
   const [showMethodology, setShowMethodology] = useState(false);
+  const { tenant } = useDataStore();
 
   return (
     <Wrapper>
@@ -91,6 +95,11 @@ const VizControls = ({
             // eslint-disable-next-line react/no-array-index-key
             filter && <FilterWrapper key={index}>{filter}</FilterWrapper>
         )}
+        {smallData && (
+          <TooltipTrigger maxWidth={232} contents={tenant?.smallDataDisclaimer}>
+            <Icon kind={IconSVG.Info} width={16} height={16} />
+          </TooltipTrigger>
+        )}
       </ControlsGroup>
       <ControlsGroup>
         <Button onClick={() => download()}>
diff --git a/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx b/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx
index 23ee8dd2..8d815fbd 100644
--- a/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx
+++ b/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx
@@ -122,9 +122,10 @@ const VizDemographicsByCategory: React.FC<VizDemographicsByCategoryProps> = ({
         <MetricVizControls
           filters={[<DemographicFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         {viz}
-        <VizNotes smallData unknowns={unknowns} download={download} />
+        <VizNotes unknowns={unknowns} download={download} />
       </>
     );
   }
diff --git a/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx b/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx
index fb62b088..0b357689 100644
--- a/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx
+++ b/spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.tsx
@@ -59,6 +59,7 @@ const VizPopulationBreakdownByLocation: React.FC<VizPopulationBreakdownByLocatio
         <MetricVizControls
           filters={[<LocalityFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         {viz}
         <StatisticWrapper>
@@ -71,11 +72,7 @@ const VizPopulationBreakdownByLocation: React.FC<VizPopulationBreakdownByLocatio
             }
           />
         </StatisticWrapper>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }
diff --git a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx
index 58a25ab3..aa79f0c6 100644
--- a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx
+++ b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx
@@ -90,6 +90,7 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
         <MetricVizControls
           filters={[<DemographicFilterSelect metric={metric} />]}
           metric={metric}
+          smallData
         />
         <AutoHeightTransition initialHeight={singleChartHeight}>
           <ChartsWrapper>
@@ -109,7 +110,7 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
             ))}
           </ChartsWrapper>
         </AutoHeightTransition>
-        <VizNotes smallData unknowns={unknowns} download={metric.download} />
+        <VizNotes unknowns={unknowns} download={metric.download} />
       </>
     );
   }
diff --git a/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx b/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx
index 692fa519..a924a0ff 100644
--- a/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx
+++ b/spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.tsx
@@ -72,6 +72,7 @@ const VizRecidivismRateCumulative: React.FC<VizRecidivismRateCumulativeProps> =
             ),
           ]}
           metric={metric}
+          smallData
         />
         <ChartWrapper>
           {chartTransitions.map(({ item, props, key }) => (
@@ -99,7 +100,7 @@ const VizRecidivismRateCumulative: React.FC<VizRecidivismRateCumulativeProps> =
             </animated.div>
           ))}
         </ChartWrapper>
-        <VizNotes smallData unknowns={unknowns} download={metric.download} />
+        <VizNotes unknowns={unknowns} download={metric.download} />
       </>
     );
   }
diff --git a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
index 8e084a73..a597716d 100644
--- a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
+++ b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
@@ -126,6 +126,7 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
                 ),
               ]}
               metric={metric}
+              smallData
             />
             <AutoHeightTransition initialHeight={singleChartHeight}>
               <ChartsWrapper ref={measureRef}>
@@ -147,11 +148,7 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
                 ))}
               </ChartsWrapper>
             </AutoHeightTransition>
-            <VizNotes
-              smallData
-              unknowns={unknowns}
-              download={metric.download}
-            />
+            <VizNotes unknowns={unknowns} download={metric.download} />
           </>
         )}
       </Measure>
diff --git a/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx b/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx
index f83fd828..7154b805 100644
--- a/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx
+++ b/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx
@@ -66,6 +66,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
             <DemographicFilterSelect metric={metric} />,
           ]}
           metric={metric}
+          smallData
         />
         <ChartWrapper>
           {chartTransitions.map(
@@ -77,11 +78,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
               )
           )}
         </ChartWrapper>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }
diff --git a/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx b/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx
index 0127c65f..8e7470d5 100644
--- a/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx
+++ b/spotlight-client/src/VizSupervisionSuccessRate/VizSupervisionSuccessRate.tsx
@@ -108,6 +108,7 @@ const VizSupervisionSuccessRate: React.FC<VizSupervisionSuccessRateProps> = ({
             <DemographicFilterSelect metric={metric} />,
           ]}
           metric={metric}
+          smallData
         />
         <CohortChartWrapper>
           {cohortTransitions.map(({ item, key, props }) => (
@@ -155,11 +156,7 @@ const VizSupervisionSuccessRate: React.FC<VizSupervisionSuccessRateProps> = ({
             </animated.div>
           )}
         </Measure>
-        <VizNotes
-          smallData
-          unknowns={metric.unknowns}
-          download={metric.download}
-        />
+        <VizNotes unknowns={metric.unknowns} download={metric.download} />
       </>
     );
   }
diff --git a/spotlight-client/src/charts/BarChartTrellis.test.tsx b/spotlight-client/src/charts/BarChartTrellis.test.tsx
index df45c904..a0069bc0 100644
--- a/spotlight-client/src/charts/BarChartTrellis.test.tsx
+++ b/spotlight-client/src/charts/BarChartTrellis.test.tsx
@@ -27,8 +27,8 @@ const testData = [
   {
     label: "Group 1",
     records: [
-      { label: "Category A", color: "red", value: 30, pct: 0.3 },
-      { label: "Category B", color: "blue", value: 70, pct: 0.7 },
+      { label: "Category A", color: "red", value: 300, pct: 0.3 },
+      { label: "Category B", color: "blue", value: 700, pct: 0.7 },
     ],
   },
   {
@@ -54,6 +54,7 @@ test("renders charts", () => {
   ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category A bar value 40%" })
+    // if value is less than certain threshold (e.g. n=100), then the bar is rendered as a hatch
   ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category B bar value 70%" })
diff --git a/spotlight-client/src/charts/BarChartTrellis.tsx b/spotlight-client/src/charts/BarChartTrellis.tsx
index 496d8ee0..01335ee2 100644
--- a/spotlight-client/src/charts/BarChartTrellis.tsx
+++ b/spotlight-client/src/charts/BarChartTrellis.tsx
@@ -23,10 +23,11 @@ import ResponsiveTooltipController, {
   ResponsiveTooltipControllerProps,
 } from "./ResponsiveTooltipController";
 import { formatAsPct } from "../utils";
-import { highlightFade } from "./utils";
+import { isSmallData, highlightFade } from "./utils";
 import { animation } from "../UiLibrary";
 import { CategoricalChartRecord, CommonDataPoint } from "./types";
 import MeasureWidth from "../MeasureWidth";
+import { useCreateHatchDefs } from "./useCreateHatchDefs";
 
 export const singleChartHeight = 300;
 
@@ -71,6 +72,7 @@ export function BarChartTrellis({
   getTooltipProps,
 }: BarChartTrellisProps): React.ReactElement {
   const [highlightedLabel, setHighlightedLabel] = useState();
+  const { getHatchDefs, generateHatchFill } = useCreateHatchDefs();
 
   // ResponsiveTooltipController expects this to be a stable reference
   const setHighlighted = useCallback(
@@ -84,73 +86,85 @@ export function BarChartTrellis({
         <ChartWrapper ref={measureRef}>
           {width === 0
             ? null
-            : data.map(({ label, records: chartData }, index) => (
-                <ResponsiveTooltipController
-                  key={label}
-                  getTooltipProps={getTooltipProps}
-                  hoverAnnotation
-                  setHighlighted={setHighlighted}
-                >
-                  <OrdinalFrame
-                    axes={[
-                      {
-                        baseline: false,
-                        orient: "left",
-                        tickFormat: formatAsPct,
-                        tickSize: 0,
-                      },
-                    ]}
-                    backgroundGraphics={
-                      barAxisLabel ? (
-                        // this functions as an axis label, but there is no Semiotic API for this;
-                        // it's hidden from screen readers either way, so not a real a11y concern
-                        <BarAxisLabel
-                          // Semiotic axis labels use this class, we want to pick up those styles here
-                          className="axis-title"
-                          x={
-                            MARGIN.left +
-                            (width - MARGIN.left - MARGIN.right) / 2
+            : data.map(({ label, records: chartData }, index) => {
+                const hatchDefs = getHatchDefs(chartData);
+
+                return (
+                  <ResponsiveTooltipController
+                    key={label}
+                    getTooltipProps={getTooltipProps}
+                    hoverAnnotation
+                    setHighlighted={setHighlighted}
+                  >
+                    <OrdinalFrame
+                      axes={[
+                        {
+                          baseline: false,
+                          orient: "left",
+                          tickFormat: formatAsPct,
+                          tickSize: 0,
+                        },
+                      ]}
+                      backgroundGraphics={
+                        barAxisLabel ? (
+                          // this functions as an axis label, but there is no Semiotic API for this;
+                          // it's hidden from screen readers either way, so not a real a11y concern
+                          <BarAxisLabel
+                            // Semiotic axis labels use this class, we want to pick up those styles here
+                            className="axis-title"
+                            x={
+                              MARGIN.left +
+                              (width - MARGIN.left - MARGIN.right) / 2
+                            }
+                            y={singleChartHeight - MARGIN.bottom / 3}
+                          >
+                            {barAxisLabel}
+                          </BarAxisLabel>
+                        ) : undefined
+                      }
+                      baseMarkProps={{
+                        transitionDuration: { fill: animation.defaultDuration },
+                      }}
+                      data={chartData}
+                      margin={MARGIN}
+                      oAccessor="label"
+                      // @ts-expect-error Semiotic types can't handle a styled component here but it's fine
+                      oLabel={(barLabel) => (
+                        <ColumnLabel
+                          transform={
+                            angledLabels
+                              ? `rotate(-45) translate(-10)`
+                              : undefined
                           }
-                          y={singleChartHeight - MARGIN.bottom / 3}
                         >
-                          {barAxisLabel}
-                        </BarAxisLabel>
-                      ) : undefined
-                    }
-                    baseMarkProps={{
-                      transitionDuration: { fill: animation.defaultDuration },
-                    }}
-                    data={chartData}
-                    margin={MARGIN}
-                    oAccessor="label"
-                    // @ts-expect-error Semiotic types can't handle a styled component here but it's fine
-                    oLabel={(barLabel) => (
-                      <ColumnLabel
-                        transform={
-                          angledLabels
-                            ? `rotate(-45) translate(-10)`
-                            : undefined
+                          {formatBarLabel(barLabel as string)}
+                        </ColumnLabel>
+                      )}
+                      oPadding={2}
+                      rAccessor="pct"
+                      rExtent={[0, 1]}
+                      size={[width, singleChartHeight]}
+                      style={(d: CommonDataPoint) => {
+                        if (isSmallData(chartData)) {
+                          return {
+                            fill: generateHatchFill(d.label, highlightedLabel),
+                          };
                         }
-                      >
-                        {formatBarLabel(barLabel as string)}
-                      </ColumnLabel>
-                    )}
-                    oPadding={2}
-                    rAccessor="pct"
-                    rExtent={[0, 1]}
-                    size={[width, singleChartHeight]}
-                    style={(d: CommonDataPoint) => ({
-                      fill:
-                        highlightedLabel && highlightedLabel !== d.label
-                          ? highlightFade(d.color)
-                          : d.color,
-                    })}
-                    // Semiotic centers titles by default; this x offset will align left
-                    title={<ChartTitle x={0 - width / 2}>{label}</ChartTitle>}
-                    type="bar"
-                  />
-                </ResponsiveTooltipController>
-              ))}
+                        return {
+                          fill:
+                            highlightedLabel && highlightedLabel !== d.label
+                              ? highlightFade(d.color)
+                              : d.color,
+                        };
+                      }}
+                      // Semiotic centers titles by default; this x offset will align left
+                      title={<ChartTitle x={0 - width / 2}>{label}</ChartTitle>}
+                      type="bar"
+                      additionalDefs={hatchDefs}
+                    />
+                  </ResponsiveTooltipController>
+                );
+              })}
         </ChartWrapper>
       )}
     </MeasureWidth>
diff --git a/spotlight-client/src/charts/BubbleChart.test.tsx b/spotlight-client/src/charts/BubbleChart.test.tsx
index d2d9037a..a3733dfe 100644
--- a/spotlight-client/src/charts/BubbleChart.test.tsx
+++ b/spotlight-client/src/charts/BubbleChart.test.tsx
@@ -25,7 +25,7 @@ jest.mock("../MeasureWidth/MeasureWidth");
 const testData = [
   { label: "thing 1", color: "red", value: 10, pct: 0.1086956522 },
   { label: "thing 2", color: "blue", value: 50, pct: 0.5434782609 },
-  { label: "thing 3", color: "green", value: 32, pct: 0.347826087 },
+  { label: "thing 3", color: "green", value: 320, pct: 0.347826087 },
 ];
 
 test("renders bubbles for data", () => {
diff --git a/spotlight-client/src/charts/BubbleChart.tsx b/spotlight-client/src/charts/BubbleChart.tsx
index af02099b..4b7aa384 100644
--- a/spotlight-client/src/charts/BubbleChart.tsx
+++ b/spotlight-client/src/charts/BubbleChart.tsx
@@ -32,10 +32,11 @@ import styled from "styled-components/macro";
 import ColorLegend from "./ColorLegend";
 import ResponsiveTooltipController from "./ResponsiveTooltipController";
 import { formatAsPct } from "../utils";
-import { useHighlightedItem, highlightFade } from "./utils";
+import { useHighlightedItem, highlightFade, isSmallData } from "./utils";
 import { CategoricalChartRecord } from "./types";
 import { animation, colors, typefaces } from "../UiLibrary";
 import MeasureWidth from "../MeasureWidth";
+import { useCreateHatchDefs } from "./useCreateHatchDefs";
 
 const margin = { top: 0, left: 0, right: 0, bottom: 40 };
 
@@ -66,6 +67,7 @@ const BUBBLE_VALUE_Y_OFFSET = 8;
 
 const LegendWrapper = styled.div`
   bottom: 0;
+  right: 0;
   position: absolute;
 `;
 
@@ -81,6 +83,9 @@ export default function BubbleChart({
   showLegend = true,
 }: BubbleChartProps): React.ReactElement {
   const { highlighted, setHighlighted } = useHighlightedItem();
+  const { getHatchDefs, generateHatchFill } = useCreateHatchDefs();
+
+  const hatchDefs = getHatchDefs(data);
 
   return (
     <MeasureWidth>
@@ -123,15 +128,23 @@ export default function BubbleChart({
                       )
                     }
                     nodeSizeAccessor={getRadius}
-                    nodeStyle={(d) => ({
-                      fill:
-                        highlighted && highlighted.label !== d.label
-                          ? highlightFade(d.color)
-                          : d.color,
-                    })}
+                    nodeStyle={(d) => {
+                      if (isSmallData(data)) {
+                        return {
+                          fill: generateHatchFill(d.label, highlighted?.label),
+                        };
+                      }
+                      return {
+                        fill:
+                          highlighted && highlighted.label !== d.label
+                            ? highlightFade(d.color)
+                            : d.color,
+                      };
+                    }}
                     nodes={data}
                     renderKey="label"
                     size={[width, height]}
+                    additionalDefs={hatchDefs}
                   />
                 </ResponsiveTooltipController>
                 {showLegend && (
diff --git a/spotlight-client/src/charts/ProportionalBar.test.tsx b/spotlight-client/src/charts/ProportionalBar.test.tsx
index 014b4afd..3e2149d0 100644
--- a/spotlight-client/src/charts/ProportionalBar.test.tsx
+++ b/spotlight-client/src/charts/ProportionalBar.test.tsx
@@ -23,8 +23,8 @@ import ProportionalBar from "./ProportionalBar";
 jest.mock("../MeasureWidth/MeasureWidth");
 
 const testData = [
-  { label: "thing 1", color: "red", value: 10, pct: 0.1639344262 },
-  { label: "thing 2", color: "blue", value: 51, pct: 0.8360655738 },
+  { label: "thing 1", color: "red", value: 1000, pct: 0.1639344262 },
+  { label: "thing 2", color: "blue", value: 510, pct: 0.8360655738 },
 ];
 
 test("renders data", () => {
diff --git a/spotlight-client/src/charts/ProportionalBar.tsx b/spotlight-client/src/charts/ProportionalBar.tsx
index aa065c6a..5d2c46a7 100644
--- a/spotlight-client/src/charts/ProportionalBar.tsx
+++ b/spotlight-client/src/charts/ProportionalBar.tsx
@@ -25,7 +25,8 @@ import { animation, colors, zIndex } from "../UiLibrary";
 import ColorLegend from "./ColorLegend";
 import ResponsiveTooltipController from "./ResponsiveTooltipController";
 import { CategoricalChartRecord, ItemToHighlight } from "./types";
-import { useHighlightedItem, highlightFade } from "./utils";
+import { useHighlightedItem, highlightFade, isSmallData } from "./utils";
+import { useCreateHatchDefs } from "./useCreateHatchDefs";
 
 const ProportionalBarContainer = styled.figure`
   width: 100%;
@@ -92,11 +93,14 @@ export default function ProportionalBar({
     highlighted: localHighlighted,
     setHighlighted: setLocalHighlighted,
   } = useHighlightedItem();
+  const { getHatchDefs, generateHatchFill } = useCreateHatchDefs();
 
   const noData = data.length === 0 || sum(data.map(({ value }) => value)) === 0;
 
   const highlighted = localHighlighted || externalHighlighted;
 
+  const hatchDefs = getHatchDefs(data);
+
   return (
     <MeasureWidth>
       {({ measureRef, width }) => (
@@ -127,13 +131,21 @@ export default function ProportionalBar({
                     rAccessor="value"
                     renderKey="label"
                     size={[width, height]}
-                    style={(d: ValuesType<ProportionalBarProps["data"]>) => ({
-                      fill:
-                        highlighted && highlighted.label !== d.label
-                          ? highlightFade(d.color)
-                          : d.color,
-                    })}
+                    style={(d: ValuesType<ProportionalBarProps["data"]>) => {
+                      if (isSmallData(data)) {
+                        return {
+                          fill: generateHatchFill(d.label, highlighted?.label),
+                        };
+                      }
+                      return {
+                        fill:
+                          highlighted && highlighted.label !== d.label
+                            ? highlightFade(d.color)
+                            : d.color,
+                      };
+                    }}
                     type="bar"
+                    additionalDefs={hatchDefs}
                   />
                 </ResponsiveTooltipController>
               </ProportionalBarChartWrapper>
diff --git a/spotlight-client/src/charts/RateTrend.tsx b/spotlight-client/src/charts/RateTrend.tsx
index c469ebb0..3a02d462 100644
--- a/spotlight-client/src/charts/RateTrend.tsx
+++ b/spotlight-client/src/charts/RateTrend.tsx
@@ -29,6 +29,7 @@ import MeasureWidth from "../MeasureWidth";
 import { DataSeries, ItemToHighlight, TooltipContentFunction } from "./types";
 import { RateFields } from "../metricsApi";
 import { TooltipContentProps } from "../Tooltip";
+import { STATISTIC_THRESHOLD } from "../constants";
 
 type ChartData = DataSeries<RateFields & { [key: string]: number }>[];
 
@@ -215,6 +216,11 @@ export default function RateTrend({
                               highlightFade(d?.color, { useOpacity: true })
                             : d?.color,
                         strokeWidth: 2,
+                        strokeDasharray:
+                          d?.coordinates[0].rateDenominator <
+                          STATISTIC_THRESHOLD
+                            ? "5,7"
+                            : 0,
                       };
                     }}
                     lines={data}
diff --git a/spotlight-client/src/charts/useCreateHatchDefs.tsx b/spotlight-client/src/charts/useCreateHatchDefs.tsx
new file mode 100644
index 00000000..cc80cf72
--- /dev/null
+++ b/spotlight-client/src/charts/useCreateHatchDefs.tsx
@@ -0,0 +1,60 @@
+// Recidiviz - a data platform for criminal justice reform
+// Copyright (C) 2022 Recidiviz, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+// =============================================================================
+
+import React, { useCallback } from "react";
+import { PatternLines } from "@vx/pattern";
+import { CommonDataPoint } from "./types";
+import { highlightFade } from "./utils";
+
+export function useCreateHatchDefs(): {
+  getHatchDefs: (data: CommonDataPoint[], hlabel?: string) => React.ReactNode;
+  generateHatchFill: (label: string, highlightedLabel?: string) => string;
+} {
+  const getHatchDefs = useCallback((data) => {
+    return data.flatMap((d: CommonDataPoint) => [
+      <PatternLines
+        id={d.label.replace(/[^\w\d]/g, "")}
+        height={5}
+        width={5}
+        background={d.color}
+        stroke="white"
+        strokeWidth={0.5}
+        orientation={["diagonal"]}
+      />,
+      <PatternLines
+        id={`${d.label.replace(/[^\w\d]/g, "")}_highlighted`}
+        height={5}
+        width={5}
+        background={highlightFade(d.color)}
+        stroke="white"
+        strokeWidth={0.5}
+        orientation={["diagonal"]}
+      />,
+    ]);
+  }, []);
+
+  const generateHatchFill = useCallback((label, highlightedLabel) => {
+    const id =
+      highlightedLabel && highlightedLabel !== label
+        ? `${label.replace(/[^\w\d]/g, "")}_highlighted`
+        : label.replace(/[^\w\d]/g, "");
+
+    return `url(#${id})`;
+  }, []);
+
+  return { getHatchDefs, generateHatchFill };
+}
diff --git a/spotlight-client/src/charts/utils.ts b/spotlight-client/src/charts/utils.ts
index 0e86a0c2..562630a5 100644
--- a/spotlight-client/src/charts/utils.ts
+++ b/spotlight-client/src/charts/utils.ts
@@ -17,12 +17,19 @@
 
 import { color } from "d3-color";
 import { interpolateRgb } from "d3-interpolate";
+import sumBy from "lodash/sumBy";
 import { useCallback, useState } from "react";
+import { STATISTIC_THRESHOLD } from "../constants";
 import { colors } from "../UiLibrary";
-import { isItemToHighlight, ItemToHighlight } from "./types";
+import { CommonDataPoint, isItemToHighlight, ItemToHighlight } from "./types";
 
 const FADE_AMOUNT = 0.45;
 
+export function isSmallData(data: CommonDataPoint[]): boolean {
+  const totalNumber = sumBy(data, ({ value }) => value);
+  return totalNumber < STATISTIC_THRESHOLD;
+}
+
 export function highlightFade(
   baseColor: string,
   { useOpacity = false } = {}
diff --git a/spotlight-client/src/constants.ts b/spotlight-client/src/constants.ts
index 5cb462ed..2e23ec1c 100644
--- a/spotlight-client/src/constants.ts
+++ b/spotlight-client/src/constants.ts
@@ -30,6 +30,8 @@ export const NAV_BAR_HEIGHT = 80;
 
 export const FOOTER_HEIGHT = 130;
 
+export const STATISTIC_THRESHOLD = 100;
+
 export const REVOCATION_TYPE_LABELS = {
   ABSCOND: "Absconsion",
   NEW_CRIME: "New offense",
diff --git a/spotlight-client/src/contentApi/sources/us_nd.ts b/spotlight-client/src/contentApi/sources/us_nd.ts
index a5e5d0d7..2bcb51f1 100644
--- a/spotlight-client/src/contentApi/sources/us_nd.ts
+++ b/spotlight-client/src/contentApi/sources/us_nd.ts
@@ -99,10 +99,9 @@ const content: TenantContent = {
       "OTHER",
     ],
   },
-  smallDataDisclaimer: `Please always take note of the number of people associated with each
-    proportion presented here; in cases where the counts are especially
-    low, the proportion may not be statistically significant and therefore
-    not indicative of long-term trends.`,
+  smallDataDisclaimer: `Please always take note of the number of people associated with each proportion presented here; 
+    in cases where the counts are especially low, the proportion may not be statistically significant and therefore not indicative of long-term trends. 
+    Visualizations with fewer than 100 people will appear hashed, dashed, or with another alternative visual treatment.`,
   metrics: {
     SentencePopulationCurrent: {
       name: "Sentenced Population",
diff --git a/spotlight-client/yarn.lock b/spotlight-client/yarn.lock
index d88b93c6..bac79837 100644
--- a/spotlight-client/yarn.lock
+++ b/spotlight-client/yarn.lock
@@ -2015,6 +2015,13 @@
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
   integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
 
+"@types/classnames@^2.2.9":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
+  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
+  dependencies:
+    classnames "*"
+
 "@types/d3-array@^2.9.0":
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.9.0.tgz#fb6c3d7d7640259e68771cd90cc5db5ac1a1a012"
@@ -2496,6 +2503,16 @@
     "@typescript-eslint/types" "4.21.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vx/pattern@^0.0.199":
+  version "0.0.199"
+  resolved "https://registry.yarnpkg.com/@vx/pattern/-/pattern-0.0.199.tgz#7fdab172a64d3567cce1507fc58244fc47206128"
+  integrity sha512-BvEb3Gzika70gtB622a3t/ApNS8EBVL3kdhNOXzXHKZOTphYZnogbs5B3ImEAmPi22woUIOq0w88Xw2YTxd9rA==
+  dependencies:
+    "@types/classnames" "^2.2.9"
+    "@types/react" "*"
+    classnames "^2.2.5"
+    prop-types "^15.5.10"
+
 "@w11r/use-breakpoint@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@w11r/use-breakpoint/-/use-breakpoint-1.8.0.tgz#55a9d7fd4ed6b55ca1e694dbefadc6e75c52915c"
@@ -3903,7 +3920,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@*, classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==