The waffle view

A fingerprint is one way to draw a dataset. @data-profile/waffle is another: one cell per item in a grid, filled left to right and top to bottom, so each category is a run you read like a line of text. Both build on @data-profile/core, so the items, dimensions and encodings are the same, and on @data-profile/react, so the legends, lists, view switch and renderers are too.

npm install @data-profile/waffle @data-profile/core

useWaffle and WaffleCanvas work like useFingerprint and FingerprintCanvas: cells glide between views, and choosing a legend entry highlights its cells. Underneath, layoutWaffle returns plain data (each cell’s centre and size in a frame 400 wide, with its colour, shape and lightness resolved) if you would rather draw it yourself. Pass columns: 10 with 100 items for the classic one cell per percent.

Running the code below: waffle.tsx

waffle.tsx

import { Legend, ViewSwitch, WaffleCanvas, useWaffle } from "@data-profile/waffle/react";
import "@data-profile/waffle/styles.css";
import { useMemo } from "react";
import { dimensions, library } from "./library";

// The same books as the fingerprint demos, as a waffle: the same views, the same legends, and
// choosing a category highlights its cells.
export default function Waffle() {
  const items = useMemo(() => library(320), []);
  const waffle = useWaffle({ items, dimensions, unit: "books" });
  return (
    <div style={{ maxWidth: 420, display: "grid", gap: 12 }}>
      <ViewSwitch views={waffle.views} value={waffle.viewId} onChange={waffle.setViewId} />
      <WaffleCanvas {...waffle.canvasProps} title="A library" />
      {waffle.layout.legends.map((group) => (
        <Legend key={group.dimensionId} {...waffle.legendProps(group)} />
      ))}
    </div>
  );
}