2b:null 2c:["$","title",null,{"children":"graphic.sg t-SNE | Yin Shanyang | Observable"}] 31:T53e,chart = { const width = 960 const height = 960 const margin = 16 const data = images.map((image, index) => ({ image, position: positions[index] })) // return null const domains = data.reduce((memo, { position: [ x, y ] }) => ({ x: [ Math.min(memo.x[0], x), Math.max(memo.x[1], x) ], y: [ Math.min(memo.y[0], y), Math.max(memo.y[1], y) ], }), { x: [Infinity, -Infinity], y: [Infinity, -Infinity] }) const scales = { x: d3.scaleLinear().domain(domains.x).range([margin, width - margin]), y: d3.scaleLinear().domain(domains.y).range([margin, width - margin]) } const svg = d3.select(DOM.svg(width, height)) .style('width', '100%') .style('height', 'auto') const layer = svg.append('g') const node = layer.selectAll('image').data(data) .enter().append('svg:image') .attr('xlink:href', (d) => d.image) .attr('width', 16) .attr('height', 16) .attr('x', (d) => scales.x(d.position[0])) .attr('y', (d) => scales.y(d.position[1])) .attr('transform', 'translate(-8, -8)') const zoom = d3.zoom() .scaleExtent([0.5, 40]) .translateExtent([[-100, -100], [width + 100, height + 100]]) .on('zoom', () => layer.attr('transform', d3.event.transform)) svg.call(zoom) return svg.node() }32:T2d0c,tSNE = { // 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.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); // 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;iProgress\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"md`\n### model\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"mutable step = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"iterations = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"positions = {\n let i = 0\n while (i < iterations) {\n model.step()\n mutable step = ++i\n yield model.getSolution()\n // await Promises.delay(1)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"model = {\n const model = new tSNE.tSNE({\n dim: 2,\n perplexity: 15\n })\n model.initDataRaw(embeddings)\n return model\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`\n### data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"images = d3.text('https://gist.githubusercontent.com/yinshanyang/aba1659fb307f3f640a99afedf0006a6/raw/387006be2b3f9c3567b10e6e91a33cda0637e7ac/images.csv')\n .then(d3.csvParseRows)\n .then((data) => data.map(([ d ]) => d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"embeddings = d3.text('https://gist.githubusercontent.com/yinshanyang/aba1659fb307f3f640a99afedf0006a6/raw/387006be2b3f9c3567b10e6e91a33cda0637e7ac/embeddings.csv')\n .then(d3.csvParseRows)\n .then((data) => data.map((d) => d.map((dd) => +dd)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\n### imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"