isabella232 / data-explorer

The Data Explorer is nteract's automatic visualization tool.

nteract Data Explorer

Interactive Documentation

Read @emeek's post on designing the data explorer.

Using the Data Explorer

yarn add @nteract/data-explorer

Install react and styled-components if you are not already using them.

yarn add react styled-components

The data prop must be a tabular data resource application/vnd.dataresource+json

// Default import complete with right side toolbar
import DataExplorer from "@nteract/data-explorer";

<DataExplorer data={data} />;

Or, with custom Toolbar position:

// Individual components as named imports
import { DataExplorer, Toolbar, Viz } from "@nteract/data-explorer";

<DataExplorer data={data}>
  <Toolbar />
  <Viz />
</DataExplorer>;

// Toolbar is optional
<DataExplorer data={data}>
  <Viz />
</DataExplorer>;

Hacking on the nteract Data Explorer

For expedited development, you can run npm run styleguide and the data explorer documentation will be run live locally and you can experiment with the settings and data.

Installation

1. Setup the monorepo

Navigate to the base directory of the repo and install all dependencies

yarn

2. Setup Jupyter Extension

Note: this requires Python >= 3.6

Now, install the Python package

cd applications/jupyter-extension
pip install -e .
jupyter serverextension enable nteract_on_jupyter

3. Build JS assets and run a Jupyter server with hot reloading

First we need to run the webpack server to live reload javascript and html assets. Anywhere in the nteract repository, run

npx lerna run hot --scope nteract-on-jupyter --stream

In another terminal, go to the directory that you want to run notebooks from and run

jupyter nteract --NteractConfig.asset_url="http://localhost:8080/"

The --NteractConfig.asset_url flag tells the Jupyter server where the webpack server will be serving the assets.

Once the assets have been built, you won't need to refresh the page, but you may need to manually refresh the page if it loads before the assets are built.

4. Initialize data explorer in the notebook

In the notebook launched from step 3, run the following code in a cell before anything else ⬇️

import pandas as pd
pd.options.display.html.table_schema = True
pd.options.display.max_rows = None

Now you are ready to contribute 🎉