Skip to content

[tfjs-vis] update readme, add more screenshots #2914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 16, 2020
Merged

[tfjs-vis] update readme, add more screenshots #2914

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d43ccc4
update readme
tafsiri Mar 16, 2020
fc033cf
save
tafsiri Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 43 additions & 27 deletions tfjs-vis/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,30 @@ It's 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 of model behaviour that won't interfere with your web application
* 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

![Training metrics (loss and accuracy) for a model](https://storage.googleapis.com/tfjs-assets/tfjs-vis/tfjs-vis-training.png)

### Model Evauation

![Dataset accuracy metrics in a table and confusion matrix visualization](https://storage.googleapis.com/tfjs-assets/tfjs-vis/tfjs-vis-evaluation.png)

### Model Internals

![Model summary table and histogram of conv2d weights](https://storage.googleapis.com/tfjs-assets/tfjs-vis/tfjs-vis-model-details.png)

### Activations and custom visualizations

![visualization of dataset activations in a conv2d layer and a dense layer](https://storage.googleapis.com/tfjs-assets/tfjs-vis/tfjs-vis-model-internals.png)


## Demos

- [Visualizing Training with tfjs-vis](https://storage.googleapis.com/tfjs-vis/mnist/dist/index.html)
Expand Down Expand Up @@ -40,6 +59,29 @@ below.
<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

```js
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](https://github.com/tensorflow/tfjs/issues/new) on the main [TensorFlow.js repository](https://github.com/tensorflow/tfjs/issues)

## Building from source

Expand Down Expand Up @@ -73,30 +115,4 @@ npm run build
This should produce a `tfjs-vis.umd.min.js` file in the `dist` folder that you can
use.

## Sample Usage

```js
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, {});
```

This should show something like the following

![visor screenshot with barchart](./docs/visor-usage.png)

## Issues

Found a bug or have a feature request? Please file an [issue](https://github.com/tensorflow/tfjs/issues/new) on the main [TensorFlow.js repository](https://github.com/tensorflow/tfjs/issues)

## API

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