- TensorFlow Visor is a graphic tools for visualizing Machine Learning
- It contains functions for visualizing TensorFlow Models
- Visualizations can be organized in Visors (modal browser windows)
- Can be used with Custom Tools likes d3, Chart.js, and Plotly.js
- Often called tfjs-vis
Using tfjs-vis
To use tfjs-vis, add the following script tag to your HTML file(s):
Example
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>Scatter Plots
Example
const surface = document.getElementById('demo');
const series = ['First', 'Second'];
const serie1 = [];
const serie2 = [];
for (let i = 0; i < 100; i++) {
serie1[i] = {x:i, y:Math.random() * 100};
serie2[i] = {x:i, y:Math.random() * 100};
}
const data = {values: [serie1, serie2], series}
tfvis.render.scatterplot(surface, data);Visualizations can be organized in a Visor (a modal browser window):
Example with a Visor
const series = ['First', 'Second'];
const serie1 = [];
const serie2 = [];
for (let i = 0; i < 100; i++) {
serie1[i] = {x:i, y:Math.random() * 100};
serie2[i] = {x:i, y:Math.random() * 100};
}
const data = {values: [serie1, serie2], series}
tfvis.render.scatterplot({name: "my Plots"}, data);Bar Graphs
Example
const surface = document.getElementById('demo');
const data = [ {index: 0, value: 100}, {index: 1, value: 200}, {index: 2, value: 150}, {index: 2, value: 250}, ];
tfvis.render.barchart(surface, data);Visualizations can be organized in a Visor (a modal browser window):
Example with a Visor
const data = [ {index: 0, value: 100}, {index: 1, value: 200}, {index: 2, value: 150}, {index: 2, value: 250}, ];
tfvis.render.barchart({name:"my Graphs"}, data);Line Graphs
Example
const surface = document.getElementById('demo');
let values = [ {x: 1, y: 20}, {x: 2, y: 30}, {x: 3, y: 5}, {x: 4, y: 12}
];
tfvis.render.linechart(surface, {values});Visualizations can be organized in a Visor (a modal browser window):
Example with a Visor
let values = [ {x: 1, y: 20}, {x: 2, y: 30}, {x: 3, y: 5}, {x: 4, y: 12}
];
tfvis.render.linechart({name: 'my Lines'}, {values});