Histograminteract allows a histogram to link with/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 histograms in my projects are built using this library because I wanted to be able to select data on the map interactively, and came up with it as a result. Sample Data map.

The use is when interactive data selection is desired

There are plenty of plot libraries, this one looks specifically to allow displaying data on a figure/plot/map based on the selection on a linked histogram.

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 the best 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 with another display. The second display needs to be able to use the limits set by the selection on the histogram to determine what data to show. I have a codesandbox that illustrates this:
Plot of svg circles; radius is the shared data

Why to use it

It can make a data display stand out by allowing viewing of just certain sections of data at a time. I have also used it with maps to allowing highlighting data of interest.