add boxplot

components/Boxplot.module.css

@@ -0,0 +1,5 @@
+.boxplot:hover {
+  fill: var(--primary-accent);
+  fill-opacity: 0.9;
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+}

components/Boxplot.tsx

@@ -0,0 +1,332 @@
+import { AxisLeft, AxisBottom } from "@visx/axis";
+import { GridRows, GridColumns } from "@visx/grid";
+import { Group } from "@visx/group";
+import { Stats } from "@visx/mock-data/lib/generators/genStats";
+import { Point } from "@visx/point";
+import { scaleBand, scaleLinear } from "@visx/scale";
+import { Line } from "@visx/shape";
+import { BoxPlot } from "@visx/stats";
+import {
+  withTooltip,
+  Tooltip,
+  defaultStyles as defaultTooltipStyles,
+} from "@visx/tooltip";
+import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
+import React from "react";
+import { Color } from "utils/Color";
+
+import styles from "./Boxplot.module.css";
+
+const DEFAULT_LABEL_SIZE = 16;
+
+interface BoxPlotData {
+  x: string;
+  min: number;
+  median: number;
+  max: number;
+  firstQuartile: number;
+  thirdQuartile: number;
+  outliers: number[];
+}
+
+interface TooltipData {
+  name?: string;
+  min?: number;
+  median?: number;
+  max?: number;
+  firstQuartile?: number;
+  thirdQuartile?: number;
+}
+
+export type StatsPlotProps = {
+  width: number;
+  height: number;
+  data: BoxPlotData[];
+  margin: {
+    top: number;
+    left: number;
+  };
+  strokeWidth: number;
+  strokeDashArray: string;
+  valueAxisLeftOffset?: number;
+  valueAxisLabelTopOffset?: number;
+  valueAxisLabelLeftOffset?: number;
+  categoryAxisLabelSize?: number;
+  categoryAxisLabelLeftOffset?: number;
+  valueAxisLabelSize?: number;
+  gridColumnTopOffset?: number;
+  toolTipFontSize?: number;
+};
+
+export default withTooltip<StatsPlotProps, TooltipData>(
+  ({
+    width,
+    height,
+    data,
+    margin,
+    strokeWidth,
+    strokeDashArray,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    showTooltip,
+    hideTooltip,
+    valueAxisLeftOffset = 40,
+    gridColumnTopOffset = -20,
+    valueAxisLabelTopOffset = 15,
+    valueAxisLabelLeftOffset = 10,
+    categoryAxisLabelLeftOffset = 30,
+    categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
+    valueAxisLabelSize = DEFAULT_LABEL_SIZE,
+    toolTipFontSize = DEFAULT_LABEL_SIZE,
+  }: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
+    // bounds
+    const xMax = width;
+    const yMax = height - 120;
+    // formatting data
+    const d: Stats[] = [];
+    for (let i = 0; i < data.length; i++) {
+      d.push({
+        boxPlot: data[i],
+        binData: [],
+      });
+    }
+
+    // accessors
+    const x = (d: Stats) => d.boxPlot.x;
+    const min = (d: Stats) => d.boxPlot.min;
+    const max = (d: Stats) => d.boxPlot.max;
+    const median = (d: Stats) => d.boxPlot.median;
+    const firstQuartile = (d: Stats) => d.boxPlot.firstQuartile;
+    const thirdQuartile = (d: Stats) => d.boxPlot.thirdQuartile;
+
+    // scales
+    const xScale = scaleBand<string>({
+      range: [18, xMax - 80], // scaling is needed due to the left offset
+      round: true,
+      domain: d.map(x),
+      padding: 0.4,
+    });
+
+    const values = d.reduce((allValues, { boxPlot }) => {
+      allValues.push(boxPlot.min, boxPlot.max);
+      return allValues;
+    }, [] as number[]);
+    const minYValue = Math.min(...values);
+    const maxYValue = Math.max(...values);
+
+    const yScale = scaleLinear<number>({
+      range: [yMax, 0],
+      round: true,
+      domain: [minYValue, maxYValue],
+    });
+
+    const boxWidth = xScale.bandwidth();
+    const constrainedWidth = Math.min(200, boxWidth);
+
+    return width < 10 ? null : (
+      <div style={{ position: "relative" }}>
+        <svg width={width} height={height}>
+          <Group top={margin.top} left={margin.left}>
+            <GridRows
+              top={10}
+              left={valueAxisLeftOffset}
+              scale={yScale}
+              width={xMax}
+              height={yMax}
+              numTicks={6}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <GridColumns
+              scale={xScale}
+              width={xMax}
+              height={yMax + 32}
+              top={gridColumnTopOffset}
+              left={valueAxisLeftOffset}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <Line
+              fill={Color.tertiaryBackground}
+              to={new Point({ x: valueAxisLeftOffset, y: gridColumnTopOffset })}
+              from={new Point({ x: valueAxisLeftOffset, y: yMax + 10 })}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <Line
+              fill={Color.tertiaryBackground}
+              to={
+                new Point({
+                  x: xMax - 20 - strokeWidth,
+                  y: gridColumnTopOffset,
+                })
+              }
+              from={new Point({ x: xMax - 20 - strokeWidth, y: yMax + 10 })}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <AxisBottom
+              top={yMax + 30}
+              left={categoryAxisLabelLeftOffset}
+              scale={xScale}
+              hideAxisLine
+              hideTicks
+              labelProps={{
+                fontSize: `${categoryAxisLabelSize / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: 800,
+                };
+              }}
+            />
+            <AxisLeft
+              scale={yScale}
+              top={valueAxisLabelTopOffset}
+              left={valueAxisLabelLeftOffset}
+              numTicks={6}
+              hideAxisLine
+              labelProps={{
+                fontSize: `${valueAxisLabelSize / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: 800,
+                };
+              }}
+            />
+            <Group top={6}>
+              {d.map((d: Stats, i) => (
+                <g key={i}>
+                  <BoxPlot
+                    className={styles.boxplot}
+                    min={min(d)}
+                    max={max(d)}
+                    left={
+                      xScale(x(d))! +
+                      0.3 * constrainedWidth +
+                      valueAxisLeftOffset
+                    }
+                    firstQuartile={firstQuartile(d)}
+                    thirdQuartile={thirdQuartile(d)}
+                    median={median(d)}
+                    boxWidth={constrainedWidth * 0.4}
+                    fill={Color.primaryAccentLight}
+                    fillOpacity={0.8}
+                    stroke={Color.label}
+                    strokeWidth={strokeWidth}
+                    valueScale={yScale}
+                    minProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop: yScale(min(d)) ?? 0 + 40,
+                          tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
+                          tooltipData: {
+                            min: min(d),
+                            name: x(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    maxProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop: yScale(max(d)) ?? 0 + 40,
+                          tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
+                          tooltipData: {
+                            max: max(d),
+                            name: x(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    boxProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop: yScale(median(d)) ?? 0 + 20,
+                          tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
+                          tooltipData: {
+                            ...d.boxPlot,
+                            name: x(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    medianProps={{
+                      style: {
+                        stroke: "white",
+                      },
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop: yScale(median(d)) ?? 0 + 40,
+                          tooltipLeft: xScale(x(d))! + constrainedWidth + 5,
+                          tooltipData: {
+                            median: median(d),
+                            name: x(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                  />
+                </g>
+              ))}
+            </Group>
+          </Group>
+        </svg>
+
+        {tooltipOpen && tooltipData && (
+          <Tooltip
+            top={tooltipTop}
+            left={tooltipLeft}
+            style={{
+              ...defaultTooltipStyles,
+              backgroundColor: Color.secondaryBackground,
+              color: Color.primaryText,
+              padding: "10px",
+            }}
+          >
+            <div>
+              <strong>{tooltipData.name}</strong>
+            </div>
+            <div
+              style={{
+                marginTop: "5px",
+                fontSize: `${toolTipFontSize / 16}rem`,
+              }}
+            >
+              {tooltipData.max && <div>max: {tooltipData.max}</div>}
+              {tooltipData.thirdQuartile && (
+                <div>third quartile: {tooltipData.thirdQuartile}</div>
+              )}
+              {tooltipData.median && <div>median: {tooltipData.median}</div>}
+              {tooltipData.firstQuartile && (
+                <div>first quartile: {tooltipData.firstQuartile}</div>
+              )}
+              {tooltipData.min && <div>min: {tooltipData.min}</div>}
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+);

data/mocks.ts

@@ -64,3 +64,33 @@ export const moreMockCategoricalData = [
   { key: "Ada", value: 2.21 },
   { key: "Dart", value: 2.21 },
 ];
+
+export const mockBoxPlotData = [
+  {
+    x: "1A",
+    min: 20,
+    firstQuartile: 25,
+    median: 30,
+    thirdQuartile: 80,
+    max: 100,
+    outliers: [],
+  },
+  {
+    x: "1B",
+    min: 0,
+    firstQuartile: 20,
+    median: 30,
+    thirdQuartile: 50,
+    max: 100,
+    outliers: [],
+  },
+  {
+    x: "2A",
+    min: 25,
+    firstQuartile: 35,
+    median: 50,
+    thirdQuartile: 90,
+    max: 100,
+    outliers: [],
+  },
+];

package.json

@@ -19,11 +19,13 @@
     "@visx/event": "^2.6.0",
     "@visx/grid": "^2.10.0",
     "@visx/group": "^2.10.0",
+    "@visx/mock-data": "^2.1.2",
     "@visx/scale": "^2.2.2",
     "@visx/shape": "^2.10.0",
+    "@visx/stats": "^2.10.0",
+    "@visx/text": "^2.10.0",
     "@visx/tooltip": "^2.10.0",
     "@visx/wordcloud": "^2.10.0",
-    "@visx/text": "^2.10.0",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0"

pages/playground.tsx

@@ -1,5 +1,10 @@
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
-import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
+import Boxplot from "components/Boxplot";
+import {
+  mockCategoricalData,
+  moreMockCategoricalData,
+  mockBoxPlotData
+} from "data/mocks";
 import React from "react";
 
 import { ColorPalette } from "../components/ColorPalette";
@@ -9,7 +14,7 @@ import styles from "./playground.module.css";
 
 export default function Home() {
   return (
-    <div className={styles.page}>
+    <div className={styles.page} suppressHydrationWarning>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
       <ColorPalette />
@@ -23,7 +28,7 @@ export default function Home() {
         width={800}
         height={500}
         margin={{
-          top: 20,
+          top: 25,
           bottom: 40,
           left: 150,
           right: 20,
@@ -59,6 +64,21 @@ export default function Home() {
           value: word.value,
         }))}
       />
+
+      <h2>
+        <code>{"<Boxplot />"}</code>
+      </h2>
+      <Boxplot
+        width={600}
+        height={400}
+        data={mockBoxPlotData}
+        margin={{
+          top: 20,
+          left: 20,
+        }}
+        strokeWidth={2.5}
+        strokeDashArray="10,4"
+      />
     </div>
   );
 }