Login
  • AI
  • TFJS Visor

TensorFlow.js Visor

 
  • 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);

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
<body>

<h2>TensorFlow Visor</h2>
<div id="demo"></div>

<script>

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);

</script>
</body>
</html>

 

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);

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
<body>

<h2>TensorFlow Visor</h2>

<script>

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);

</script>
</body>
</html>

TensorFlow Visor

 

 

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);

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
<body>

<h2>Tensorflow Visor</h2>
<div id="demo"></div>

<script>
const surface = document.getElementById('demo');

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

tfvis.render.barchart(surface, data);
</script>

</body>
</html>

 

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);

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
<body>

<h2>Tensorflow Visor</h2>

<script>
const data = [
  {index: 0, value: 100},
  {index: 1, value: 200},
  {index: 2, value: 150},
  {index: 3, value: 250},
];

tfvis.render.barchart({name:"my Graphs"}, data);
</script>

</body>
</html>

 TFJS Visor
Login
ADS CODE