@jadesrochers/histograminteract

Histograminteract allows a histogram to select data

The point of this library is to allow selection of data on a histogram
to then change the display of data in a linked figure, plot, or illustration.

The use is when interactivity is desired -

There are plenty of plot libraries with a histogram, this one is specifically for making it interactive.

How to get it set up

Getting the histogram set up is pretty simple, linking it to other data
takes some more work.

import { HistogramDataHighlight } from "@jadesrochers/histograminteract";
const Histogram = props => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "start",
        flexDirection: "column",
        width: "100%"
      }}
    >
      <HistogramDataHighlight
        xdata={props.xdata}
        limitHook={props.limitHook}
        nbins={20}
      />
    </div>
  );
};

Configuring the histogram -

Here are some arguments it can take for configuration:

1. fill - fill color for the histogram bars.
2. highlightfill - The bar color to switch to when a bar is highlighted.
3. nbins - desired number of histogram bins. Uses d3, and this gives it a guideline, it picks what it sees as a good value, sometimes not very close.
4. xticks - how many x ticks to draw
5. yticks - how many y ticks to draw
6. tickformat - a function to format the tick values

Linking with other data -

The histogram needs to be set up with data that is shared to another
display.
I have a codesandbox that illustrates this:
Plot of svg circles; radius is the shared data

How to get it working

The data is randomized, and is lifted a level up so it does not get
regenerated when selections are made.
You need to pass a limitHook to the histogram and linked figure, and then
use the values in the hook to configure data display.
The histogram does this automatically
The limitHook is known to the histogram, and it will use it. The figure you
want linked has to use the limitHook.xlimits.min -and- limitHook.xlimits.max
to determine what data to display.

Some example code:

const Limiter = () => {
  const data = Array.from({ length: 100 }, () => Math.random() * 30 + 4);
  const locationx = Array.from({ length: 100 }, () =>
    Math.floor(Math.random() * 1000)
  );
  const locationy = Array.from({ length: 100 }, () =>
    Math.floor(Math.random() * 1000)
  );
  console.log("rendering Limiter");
  return <Container data={data} locationx={locationx} locationy={locationy} />;
};

const Container = props => {
  const limitHook = useLimits();
  return (
    <div
      style={{
        height: "100%",
        width: "100%"
      }}
    >
      <DataPlot
        data={props.data}
        limitHook={limitHook}
        locationx={props.locationx}
        locationy={props.locationy}
      />
      <p>
        Click and drag to select; selection will be highlighted:
        <br />
        If reset fails, the cursor probably made a selection, just try again.
      </p>
      <Histogram xdata={props.data} limitHook={limitHook} />
      <h4 style={{ marginTop: 0 }}> Point Radius </h4>
    </div>
  );
};