2b:null 2c:["$","title",null,{"children":"tsne world cities | Yin Shanyang | Observable"}] 31: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 name)\n .sort((a, b) => d3.ascending(a, b))\n ])\n selector.value = mutable city\n selector.oninput = () => mutable city = selector.value\n return selector\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"chart = {\n const hack = update\n const svg = d3.select(DOM.svg(width, height))\n .style('width', '100%')\n .style('height', 'auto')\n \n const clear = svg.append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('opacity', 0)\n .on('click', () => mutable city = '')\n \n const node = svg.selectAll('circle').data(data)\n .enter().append('circle')\n .attr('r', ({ pop }) => scales.r(pop))\n .attr('fill', ({ country }) => scales.c(country))\n .each(function () {\n const _this = d3.select(this)\n _this.append('title')\n .text(({ name }) => name)\n })\n .on('click', ({ name }) => mutable city = name)\n\n node\n .attr('transform', ({ x, y }) => `translate(${x}, ${y})`)\n .attr('opacity', ({ name }) => city === '' ? 1 : name === city ? 1 : 0.2)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"md`### computations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"// hack value so that state mutations don’t trigger a complete recalculation of the model\nmutable update = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"simulation = {\n const simulation = d3.forceSimulation(data)\n .alphaDecay(0.005)\n .alpha(0.1)\n .force('tsne', (alpha) => {\n model.step()\n const positions = model.getSolution()\n\n center.x.domain(d3.extent(positions.map((d) => d[0])))\n center.y.domain(d3.extent(positions.map((d) => d[1])))\n\n data.forEach((d, i) => {\n d.x += alpha * (center.x(positions[i][0]) - d.x)\n d.y += alpha * (center.x(positions[i][1]) - d.y)\n })\n })\n .force('collide', d3.forceCollide().radius(d => 1.5 + scales.r(d.pop)))\n .on('tick', () => mutable update = simulation.alpha())\n \n return simulation\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: 15\n })\n // model.initDataRaw(distances)\n model.initDataRaw(data.map(({ lat, lon, pop }) => [ normalizations.lat(lat), normalizations.lon(lon), normalizations.pop(pop) ]))\n return model\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"data = cities\n .sort((a, b) => d3.descending(+a[2015], +b[2015]))\n .map((d) => ({\n lat: +d.Latitude,\n lon: +d.Longitude,\n pop: +d[2015],\n country: +d['Country Code'],\n name: d['Urban Agglomeration'],\n x: width / 2,\n y: height / 2\n }))\n .slice(0, 800)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"normalizations = ({\n lat: d3.scaleLinear().domain(d3.extent(data.map(({ lat }) => lat))).range([0, 1]),\n lon: d3.scaleLinear().domain(d3.extent(data.map(({ lon }) => lon))).range([0, 1]),\n pop: d3.scaleSqrt().domain(d3.extent(data.map(({ pop }) => pop))).range([0, 1])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"distances = data.map((d) => data.map((e) => d3.geoDistance([d.lon, d.lat], [e.lon, e.lat])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"scales = ({\n r: d3.scaleSqrt().domain([0, 100000]).range([0.2, 24]),\n c: d3.scaleSequential(d3.interpolateRainbow)\n .domain(d3.extent(data.map(({ country }) => country)))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"center = ({\n x: d3.scaleLinear().range([\n width / 2 - height / 2 + margin,\n width / 2 + height / 2 - margin\n ]),\n y: d3.scaleLinear().range([\n margin,\n height - margin\n ])\n})","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 = 30","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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"cities = d3.csv('https://gist.githubusercontent.com/Fil/b07d09162377827f1b3e266c43de6d2a/raw/80526bdd6ecd48751578dec41bd31a961ea1805f/cities.csv')","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"