tfjs-vis

tfjs-vis is a small library for in browser visualization intended for use with TensorFlow.js.

Its main features are:

• A set of visualizations useful for visualizing model behaviour
• A set of high level functions for visualizing objects specific to TensorFlow.js
• A way to organize visualizations (the visor) of model behaviour that won't interfere with your web application

The library also aims to be flexible and make it easy for you to incorporate custom visualizations using tools of your choosing, such as d3, Chart.js or plotly.js.

Example Screenshots

Training Metrics

Model Evauation

Model Internals

Activations and custom visualizations

Demos

• Visualizing Training with tfjs-vis
• Looking inside a digit recognizer

Installation

You can install this using npm with

npm install @tensorflow/tfjs-vis

or using yarn with

yarn add @tensorflow/tfjs-vis

You can also load it via script tag using the following tag, however you need to have TensorFlow.js also loaded on the page to work. Including both is shown below.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>

API

See https://js.tensorflow.org/api_vis/latest/ for interactive API documentation.

Sample Usage

const data = [
  { index: 0, value: 50 },
  { index: 1, value: 100 },
  { index: 2, value: 150 },
];

// Get a surface
const surface = tfvis.visor().surface({ name: 'Barchart', tab: 'Charts' });

// Render a barchart on that surface
tfvis.render.barchart(surface, data, {});

Issues

Found a bug or have a feature request? Please file an issue on the main TensorFlow.js repository

Building from source

To build the library, you need to have node.js installed. We use yarn instead of npm but you can use either.

First install dependencies with

yarn

or

npm install

Then do a build with

yarn build

or

npm run build

This should produce a tfjs-vis.umd.min.js file in the dist folder that you can use.

Changelog

We are moving release notes to GitHub releases feature

This file is now only for historical purposes. For an example see https://github.com/tensorflow/tfjs/releases/tag/tfjs-vis-v1.4.3

[1.0.0] 2019-03-06

Major version upgrade including a number of breaking changes.

Changed

All render.* functions now take a surface as their first parameter. This unifies the convention used in these functions and show.* functions.

In heatmap and confusionMatrix params, xLabels/yLabels has been renamed to xtickLabels/yTickLabels to more clearly distinguish it from the axis label (xLabel/yLabel).

Removed

show.confusionMatrix has been removed in favor of using render.confusionMatrix

[0.5.0] 2018-1-31

Added

Support for rendering heatmaps with render.heatmap.

Sourcemaps now include sourcesContent to improve editor experience, particularly for typescript users.

[0.4.0] 2018-12-07

Changed

confusionMatrix now shades the diagonal by default. The chart also has improved contrast between the text and the chart cells.

bugfixes for metrics.confusionMatrix on Safari

Improvements to chart rendering options to help prevent situations where the container div grows on each render if dimensions were not specified in code or constrained by css.

[0.3.0] 2018-11-06

Added

fontSize can now be passed into render.* methods zoomToFit and yAxisDomain are new options that linecharts and scatterplots take to allow finer control over the display of the yAxis xAxisDomain option added to scatterplots.

Changed

show.history and show.fitCallbacks now take an optional opts parameter. These allow passing configuration to the underlying charts as well as overriding which callbacks get generated by show.fitCallbacks.

show.history and show.fitCallbacks will now automatically group a metric with its corresponding validation metric and display them on the same chart. For example if you have ['acc', 'val_acc', 'loss', 'val_loss'] as your metrics, these will be rendered on two charts, one for the loss metrics and one for the accuracy metrics.