NPM library (javascript)

HiPlot is released as a React component in an NPM package, and can be embeded 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 by creating a github issue

Getting started

Download hiplot in your favorite package manager

>>> npm install hiplot  # if using npm
>>> yarn add hiplot # 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 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
    dark: boolean;
    // 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: string, selection: string[]) {
    // 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>
}