34:["$","title",null,{"children":"Visualization of multivariate time series | Matija Piškorec | Observable"}] 3c:T2bc5,tsnejs = {// create main global object var tsnejs = tsnejs || { REVISION: 'ALPHA' }; (function(global) { "use strict"; // utility function var assert = function(condition, message) { if (!condition) { throw message || "Assertion failed"; } } // syntax sugar var getopt = function(opt, field, defaultval) { if(opt.hasOwnProperty(field)) { return opt[field]; } else { return defaultval; } } // return 0 mean unit standard deviation random number var return_v = false; var v_val = 0.0; var gaussRandom = function() { if(return_v) { return_v = false; return v_val; } var u = 2*Math.random()-1; var v = 2*Math.random()-1; var r = u*u + v*v; if(r == 0 || r > 1) return gaussRandom(); var c = Math.sqrt(-2*Math.log(r)/r); v_val = v*c; // cache this for next function call for efficiency return_v = true; return u*c; } // return random normal number var randn = function(mu, std){ return mu+gaussRandom()*std; } // utilitity that creates contiguous vector of zeros of size n var zeros = function(n) { if(typeof(n)==='undefined' || isNaN(n)) { return []; } if(typeof ArrayBuffer === 'undefined') { // lacking browser support var arr = new Array(n); for(var i=0;i 1e-7) Hhere -= pj * Math.log(pj); } // adjust beta based on result if(Hhere > Htarget) { // entropy was too high (distribution too diffuse) // so we need to increase the precision for more peaky distribution betamin = beta; // move up the bounds if(betamax === Infinity) { beta = beta * 2; } else { beta = (beta + betamax) / 2; } } else { // converse case. make distrubtion less peaky betamax = beta; if(betamin === -Infinity) { beta = beta / 2; } else { beta = (beta + betamin) / 2; } } // stopping conditions: too many tries or got a good precision num++; if(Math.abs(Hhere - Htarget) < tol) { done = true; } if(num >= maxtries) { done = true; } } // console.log('data point ' + i + ' gets precision ' + beta + ' after ' + num + ' binary search steps.'); // copy over the final prow to P at row i for(var j=0;j 0 ? 1 : x < 0 ? -1 : 0; } var tSNE = function(opt) { var opt = opt || {}; this.perplexity = getopt(opt, "perplexity", 30); // effective number of nearest neighbors this.dim = getopt(opt, "dim", 2); // by default 2-D tSNE this.epsilon = getopt(opt, "epsilon", 10); // learning rate this.distance = getopt(opt, "distance", L2); // X to distances this.iter = 0; } tSNE.prototype = { // this function takes a set of high-dimensional points // and creates matrix P from them using gaussian kernel initDataRaw: function(X) { var N = X.length; var D = X[0].length; assert(N > 0, " X is empty? You must have some data!"); assert(D > 0, " X[0] is empty? Where is the data?"); var dists = xtod(X, this.distance); // convert X to distances using gaussian kernel this.P = d2p(dists, this.perplexity, 1e-4); // attach to object this.N = N; // back up the size of the dataset this.initSolution(); // refresh this }, // this function takes a given distance matrix and creates // matrix P from them. // D is assumed to be provided as a list of lists, and should be symmetric initDataDist: function(D) { var N = D.length; assert(N > 0, " X is empty? You must have some data!"); // convert D to a (fast) typed array version var dists = zeros(N * N); // allocate contiguous array for(var i=0;i\\`\n\\`\\`\\`\nAnd then:\n\\`\\`\\`\ntrace_data = (await Files.text(text)).split(\\'\\\\n\\').map(x => x.split(\\',\\').map(x => Number(x)))\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"trace_data = (await d3.text('https://gist.githubusercontent.com/matijapiskorec/58b45e174bd8fd42ed2054cb47aaf59f/raw/bc9d2e3c832d0925d55b4f35df090af8fb74dcd4/trace_example.txt')).split('\\n').map(x => x.split(',').map(x => Number(x)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\n let heatmap_data = [\n {\n z: trace_data,\n type: 'heatmap'\n }\n ];\n \n let layout = {\n title: 'Multivariate time series',\n annotations: [],\n width: 0.75*width,\n height: 400,\n xaxis: {\n ticks: '',\n side: 'bottom',\n title: 'time',\n showgrid: false\n },\n yaxis: {\n ticks: '',\n ticksuffix: ' ',\n autosize: false,\n title: 'neuron index',\n showgrid: false\n }\n };\n \n const div = DOM.element('div');\n Plotly.newPlot(div, heatmap_data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`# TSNE\nWe visualize t-SNE embedding of multivariate time series. You can use [tsne-js](https://github.com/scienceai/tsne-js) by loading it like this:\n\\`\\`\\`\ntsne = require( \"https://wzrd.in/standalone/tsne-js@latest\" )\n\\`\\`\\`\nBut here we used Karpathy's [tSNEJS](https://github.com/karpathy/tsnejs), motivated by [tsne.js](https://beta.observablehq.com/@fil/tsne-js) Observable example.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof canvas = {\n const W = width * widthRatio, H = width * heightRatio;\n const canvas = DOM.element('canvas');\n canvas.width = W * devicePixelRatio;\n canvas.height = H * devicePixelRatio;\n canvas.style.width = W + 'px';\n canvas.style.height = H + 'px';\n canvas.value = canvas.getContext('2d')\n canvas.value.scale(devicePixelRatio, devicePixelRatio);\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"viewof perplexity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"model = new tsnejs.tSNE({\n dim: 2,\n perplexity: perplexity\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"draw = {\n canvas.fillStyle = 'rgba(255,255,255,1.0)';\n canvas.fillRect(0,0,width*widthRatio,width*heightRatio);\n const X = d3.scaleLinear().domain(d3.extent(solution, d => d[0])).range([20,width*widthRatio-20]);\n const Y = d3.scaleLinear().domain(d3.extent(solution, d => d[1])).range([20,width*heightRatio-20]);\n const radius = 50 / Math.sqrt(10 + trace_data.length);\n solution.forEach((point,i) => {\n \tlet k = trace_data[i];\n canvas.beginPath();\n canvas.arc(X(point[0]), Y(point[1]), radius, 0, 2*Math.PI);\n canvas.strokeStyle = 'black';\n canvas.stroke();\n\t canvas.fillStyle = 'gray';\n canvas.fill();\n });\n return md`We draw a circle for each of the points whose positions are informed by the solution array.`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"solution = {\n model.initDataRaw(trace_data);\n var cost = 100, cost0 = 0;\n while (Math.abs(cost - cost0) > 1e-6) {\n cost = cost0;\n \tcost0 = cost * 0.9 + 0.1 * model.step();\n \tyield model.getSolution();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"widthRatio = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"heightRatio = 0.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null