DeepLearning With TensorFlowJS 2 - Plotting Tensor Data

This tutorial is based on the book Deep Learning With JavaScript (TensorFlowJS).

Tensors

Tensors are the core data structure of TensorFlow.js 

Tensors can also be thought of as containers for numbers.

They are a generalization of vectors and matrices to potentially higher dimensions. 

The number of dimensions and size of each dimension is called the tensor’s shape.

 

Declaring a tensor

// Pass an array of values to create a vector.

tf.tensor([1, 2, 3, 4]).print();

// Pass a nested array of values to make a matrix or a higher

// dimensional tensor.

tf.tensor([[1, 2], [3, 4]]).print();

//Creates rank-1 tf.Tensor with the provided values, shape and dtype.

tf.tensor1d([1, 2, 3]).print();

//Creates rank-2 tf.Tensor with the provided values, shape and dtype.

// Pass a nested array.

tf.tensor2d([[1, 2], [3, 4]]).print();

(REFERENCE: https://js.tensorflow.org/api/latest/#tensor)

Plotly.js is a charting library that comes with over 40 chart types, 3D charts, statistical graphs, and SVG maps.

(REFERENCE: https://www.w3schools.com/js/js_graphics_plotly.asp )

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.2"> </script> <style> .plots { display: inline-block; } </style> <p> Plot of 'lattitude' feature vs row index<p> <div id="dataSpace" class="plots"></div> <script> <!-- Define train data and test data arrays --> const trainData = { sizeMB: [0.080, 9.000, 0.001, 0.100, 8.000, 5.000, 0.100, 6.000, 0.050, 0.500, 0.002, 2.000, 0.005, 10.00, 0.010, 7.000, 6.000, 5.000, 1.000, 1.000], timeSec: [0.135, 0.739, 0.067, 0.126, 0.646, 0.435, 0.069, 0.497, 0.068, 0.116, 0.070, 0.289, 0.076, 0.744, 0.083, 0.560, 0.480, 0.399, 0.153, 0.149] }; const testData = { sizeMB: [5.000, 0.200, 0.001, 9.000, 0.002, 0.020, 0.008, 4.000, 0.001, 1.000, 0.005, 0.080, 0.800, 0.200, 0.050, 7.000, 0.005, 0.002, 8.000, 0.008], timeSec: [0.425, 0.098, 0.052, 0.686, 0.066, 0.078, 0.070, 0.375, 0.058, 0.136, 0.052, 0.063, 0.183, 0.087, 0.066, 0.558, 0.066, 0.068, 0.610, 0.057] }; <!-- Build TF tensor data from data arrays --> trainXs = tf.tensor2d(trainData.sizeMB, [20, 1]); trainYs = tf.tensor2d(trainData.timeSec, [20, 1]); testXs = tf.tensor2d(testData.sizeMB, [20, 1]); testYs = tf.tensor2d(testData.timeSec, [20, 1]); <!-- Define data trace for visual plotting --> const dataTraceTrain = { x: trainData.sizeMB, y: trainData.timeSec, name: 'trainData', mode: 'markers', type: 'scatter', marker: {symbol: "circle", size: 8} }; const dataTraceTest = { x: testData.sizeMB, y: testData.timeSec, name: 'testData', mode: 'markers', type: 'scatter', marker: {symbol: "triangle-up", size: 10} }; <!-- Plot data --> Plotly.newPlot('dataSpace', [dataTraceTrain, dataTraceTest], { width: 700, title: 'File download duration', xaxis: { title: 'size (MB)' }, yaxis: { title: 'time (sec)' } }); </script>

https://codepen.io/tfjs-book/pen/dgQVze