2b:null 2c:["$","title",null,{"children":"t-SNE Explorer | Yin Shanyang | Observable"}] 31:Tb53,inspector = { const data = [selected || hovered] const container = d3.select(DOM.element('div')) container .style('display', 'flex') .style('flex-direction', 'row') .style('width', '100%') .style('height', '320px') const image = container.selectAll('div.image').data(data) .enter().append('div') .classed('image', true) .style('width', '320px') .style('height', '320px') .style('background-color', '#333') .style('background-size', 'contain') .style('background-position', 'center center') .style('background-repeat', 'no-repeat') image .style('background-image', (d) => `url(${d ? d.content_url : ''})`) const enrichments = container.selectAll('div.enrichments').data(data) .enter().append('div') .classed('enrichments', true) .style('width', '320px') .style('height', '320px') .style('margin-left', '4px') .style('overflow', 'auto') const enrichment = enrichments.selectAll('div.enrichment').data(data[0] ? data[0].enrichments : []) .enter().append('div') .classed('enrichment', true) .style('position', 'relative') .style('width', '100%') .style('height', '10px') .style('margin-bottom', '1px') .style('background', '#f0f0f0') .style('font-family', 'sans-serif') .style('line-height', '10px') .style('font-size', '10px') .style('overflow', 'hidden') .each(function (d) { const _this = d3.select(this) const bar = _this.append('div') .style('position', 'absolute') .style('top', 0) .style('bottom', 0) .style('left', 0) .style('background', '#e0e0e0') .style('width', `${d.score * 100}%`) const tag = _this.append('div') .style('position', 'absolute') .style('top', 0) .style('bottom', 0) .style('left', 0) .style('margin-left', '4px') .text(d.tag) const score = _this.append('div') .style('position', 'absolute') .style('top', 0) .style('bottom', 0) .style( d.score > 0.5 ? 'right' : 'left', d.score > 0.5 ? `${(1 - d.score) * 100}%` : `${d.score * 100}%` ) .style( d.score > 0.5 ? 'margin-right' : 'margin-left', '4px' ) .text(d3.format('.2f')(d.score)) }) const details = container.selectAll('div.details').data(data) .enter().append('div') .classed('details', true) .style('width', '320px') .style('height', '320px') .style('margin-left', '4px') .style('overflow', 'auto') const link = details.selectAll('a').data(data) .enter().append('a') .attr('href', (d) => d ? d.url : '') .text((d) => d ? d.url : null) return container.node() }32:T8ce,chart = { // return null const domains = positions.reduce((memo, [ 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] }) domains.z = [0, maxLikes] const scales = { x: d3.scaleLinear().domain(domains.x).range([margin, width - margin]), y: d3.scaleLinear().domain(domains.y).range([margin, width - margin]), z: d3.scaleSequential(d3.interpolateYlGn).domain(domains.z).clamp(true) } const svg = d3.select(DOM.svg(width, height)) .style('width', '100%') .style('height', 'auto') const deselectLayer = svg.append('g') const heatmapLayer = svg.append('g') const nodeLayer = svg.append('g') const deselect = deselectLayer.append('rect') .attr('width', width) .attr('height', height) .attr('opacity', 0) .on('click', () => mutable selected = null) const heatmap = heatmapLayer.selectAll('rect').data(data) .enter().append('rect') .attr('transform', (d) => `translate(${scales.x(d.position[0])}, ${scales.y(d.position[1])})`) .attr('width', 16) .attr('height', 16) .attr('x', -8) .attr('y', -8) .attr('stroke', (d) => scales.z(d.likes)) .attr('stroke-width', 6) .attr('opacity', 0.8) const node = nodeLayer.selectAll('image').data(data) .enter().append('svg:image') .attr('xlink:href', (d) => d.content_url) .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)') .on('mouseover', (d) => mutable hovered = d) .on('mouseout', (d) => mutable hovered = null) .on('click', (d) => mutable selected = d) const selection = svg.selectAll('circle.selected').data(selected ? [selected] : []) .enter().append('circle') .classed('selected', true) .attr('r', 12) .attr('cx', (d) => scales.x(d.position[0])) .attr('cy', (d) => scales.y(d.position[1])) .attr('fill', 'none') .attr('stroke', '#f00') .attr('stroke-width', 1) return svg.node() }33: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;i likes).sort((a, b) => a > b ? 1 : a < b ? -1 : 0), quantile))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":889,"value":"quantileInput = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"md`\n### model\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"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}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"model = {\n const model = new TSNE.tSNE({\n dim: 2,\n perplexity: 30\n })\n model.initDataRaw(vectors)\n return model\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"md`### data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"// url, tag, score, likes\nraws = d3.csvParse(\n await Files.text(file),\n ({ url, content_url, description, tag, score, likes }) => ({\n url,\n content_url,\n description,\n tag,\n score: +score,\n likes: +likes\n })\n)\n.filter(({ tag }) => tag)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":743,"value":"grouped = {\n const tags = getUnique(raws, 'tag')\n const urls = getUnique(raws, 'url')\n\n const vectors = urls.map((url) => {\n const filtered = raws.filter((d) => d.url === url)\n const { content_url, description, likes } = filtered[0]\n\n let scores = {}\n for (let i = filtered.length; i--;) {\n scores[filtered[i].tag] = filtered[i].score\n }\n \n const vectors = []\n \n for (let i = 0; i < tags.length; i++) {\n vectors.push(scores[tags[i]] || 0)\n }\n \n const enrichments = Object.keys(scores)\n .map((tag) => ({ tag, score: scores[tag] }))\n .sort((a, b) => a.score > b.score ? -1 : a.score < b.score ? 1 : 0)\n\n return {\n url,\n content_url,\n description,\n likes,\n enrichments,\n vectors\n }\n })\n \n return vectors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"vectors = grouped.map(({ vectors }) => vectors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"data = positions.map((position, index) => ({ ...grouped[index], position }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":647,"value":"getUnique = (data, key) => {\n let keys = {}\n for (let i = data.length; i--;) {\n const d = data[i]\n keys[d[key]] = true\n }\n keys = Object.keys(keys)\n return keys\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"md`\n### state\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"mutable step = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"mutable selected = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"md`### constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"height = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"margin = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"