NPM library (javascript)

HiPlot is released as a React component in an NPM package, and can be embedded in any javascript/React codebase.

Warning

The Javascript library API is very recent, subject to changes, and less used compared to the python API. Please report any bug or suggestion in the issue tracker

Getting started

Download hiplot in your favorite package manager

>>> npm install hiplot-mm  # if using npm
>>> yarn add hiplot-mm # for yarn users

Basic example

import * as hip from "hiplot";

function HiPlotWithData() {
  const experiment = hip.Experiment.from_iterable([
    { opt: "sgd", lr: 0.01, dropout: 0.1 },
    { opt: "adam", lr: 0.1, dropout: 0.2 },
    { opt: "adam", lr: 1, dropout: 0.3 },
    { opt: "sgd", lr: 0.001, dropout: 0.4 },
  ]);
  return <hip.HiPlot experiment={experiment} />;
}

Customizing HiPlot react component

There are two main ways to customize your HiPlot component:

• Either by changing information in the experiment object itself

  For instance, the color map, data types, order/hidden columns in Parallel Plot can be set this way (the related python tutorial can be a good start: More about hiplot.Experiment)

• Or by setting HiPlot’s component properties

  For instance, it is possible to remove the table, or switch to dark mode (see An advanced example)

React properties

export type HiPlotDarkMode = boolean | "auto";

export interface HiPlotProps {
  // Experiment to be displayed. Can be created with `hip.Experiment.from_iterable`
  experiment: HiPlotExperiment | null;
  // Display plugins (by default parallel plot, plotxy, distribution and table)
  plugins: PluginsMap;
  // An object where we can persist changes
  // If not provided, will create a `PersistentStateInMemory` object
  persistentState?: PersistentState;
  // Callbacks when selection changes, filtering, or brush extents change
  onChange: { [k: string]: (type: string, data: any) => void };
  // Enable dark-mode. Use "auto" to follow system / JupyterLab theme.
  dark: HiPlotDarkMode;
  // Adds extra assertions (disabled by default)
  asserts: boolean;
  /* A class that can be used to dynamically fetch experiments
    Examples:
    - WebserverDataProvider: textarea to input URI, fetches experiments from server
    - UploadDataProvider: upload CSV files in your browser
    */
  dataProvider: DataProviderClass;
}

An advanced example

function _Custom() {
  // CI_BUILD
  // Create an experiment, and store it in the state
  // Otherwise, HiPlot detects that the experiment changed
  // and re-renders everything
  function createExperiment() {
    const experiment = hip.Experiment.from_iterable([
      { uid: "a", opt: "sgd", lr: 0.01, dropout: 0.1 },
      { uid: "b", opt: "adam", lr: 0.1, dropout: 0.2 },
      { uid: "c", opt: "adam", lr: 1, dropout: 0.3 },
      { uid: "d", opt: "sgd", lr: 0.001, dropout: 0.4 },
    ]);
    experiment.colorby = "opt";
    // Let's customize the parallel plot - hide some columns
    experiment.display_data[hip.DefaultPlugins.PARALLEL_PLOT] = {
      hide: ["uid", "from_uid"],
    };
    return experiment;
  }
  const [experiment, _s1] = React.useState(createExperiment());
  const [persistentState, _s2] = React.useState(new hip.PersistentStateInURL("hip"));

  // Remove data table
  let plugins = hip.createDefaultPlugins();
  delete plugins[hip.DefaultPlugins.TABLE];

  // And finally retrieve selected rows when they change
  const [selectedUids, setSelectedUids] = React.useState([]);
  function onSelectionChange(_event, selection) {
    // Called every time we slice on the parallel plot
    setSelectedUids(selection.join(", "));
  }
  return (
    <React.Fragment>
      <hip.HiPlot
        experiment={experiment}
        plugins={plugins}
        // Enable dark mode
        dark={true}
        // Remember state in the URL (so you can reload the page and get the same state)
        persistentState={persistentState}
        onChange={{
          selected_uids: onSelectionChange,
        }}
      />
      <p>
        Selected uids:<span>{selectedUids}</span>
      </p>
    </React.Fragment>
  );
}