Skip to content
The Data Explorer is nteract's automatic visualization tool.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Fix tests Jan 13, 2020
doc_data Update more docs Jan 12, 2020
profiles Migrate source files Jan 9, 2020
scripts Migrate source files Jan 9, 2020
.gitignore Initial commit Jan 8, 2020
babel.config.js Trying to make styleguidist docs Jan 10, 2020

Binder <ORG_NAME>

nteract Data Explorer

Data Explorer Examples

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 />

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

Hacking on the nteract Data Explorer

For expedited development, we recommend using the Jupyter Extension to contribute.

Note: the desktop app can be used instead, but you'll have to manually reload to see changes


1. Setup the monorepo

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


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 🎉

You can’t perform that action at this time.