2b:null 2c:["$","title",null,{"children":"Personalities | Yin Shanyang | Observable"}] 31:Tb33,renderTsne = (selection, data) => { // get embeddings const embeddings = getEmbeddings(data) // init model const model = new tSNE.tSNE({ dim: 2, perplexity: 15 }) model.initDataRaw(embeddings) // render chart const nodes = data.map(({ user, scores }) => ({ label: user, scores: scores .filter((score) => ({})), x: 0, y: 0 })) const width = 960 const height = 960 const margin = 16 const scales = { x: d3.scaleLinear() .domain([0, traits.length]) .range([0, 32]) .nice(), w: () => 32 / traits.length, y: d3.scaleLinear() .domain([0, 1]) .range([0, -8]), h: d3.scaleLinear() .domain([0, 1]) .range([0, 16]), c: d3.scaleOrdinal(d3.schemeDark2) .domain(['personality', 'need', 'value']) } const svg = selection.append('svg') .attr('width', width + margin * 2) .attr('height', height + margin * 2) .style('width', '100%') .style('border', '1px solid #aaa') const layer = svg.append('g') const node = layer.selectAll('g').data(nodes) .enter().append('g') .each(function (node) { const _this = d3.select(this) const bars = _this.append('g') .attr('transform', 'translate(-16, 0)') const bar = bars.selectAll('rect').data(node.scores) .enter().append('rect') .attr('width', scales.w) .attr('height', ({ score }) => scales.h(score)) .attr('transform', ({ score }, index) => `translate(${scales.x(index)}, ${scales.y(score)})`) .attr('fill', ({ type }) => scales.c(type)) const text = _this.append('text').datum(node) .text(({ label }) => label) .attr('font-size', 8) .attr('text-anchor', 'middle') .attr('dy', 12) }) // interaction, zoom const zoom = d3.zoom() .scaleExtent([0.5, 100]) .translateExtent([[-100, -100], [width + 100, height + 100]]) .clickDistance(10) .on('zoom', () => layer.attr('transform', d3.event.transform)) svg.call(zoom) function update () { model.step() const positions = model.getSolution() const scales = { x: d3.scaleLinear() .domain(d3.extent(positions.map(([ x ]) => x))) .range([margin, width - margin]), y: d3.scaleLinear() .domain(d3.extent(positions.map(([ x, y ]) => y))) .range([margin, height - margin]) } positions.forEach(([ x, y ], index) => { nodes[index].x = scales.x(x) nodes[index].y = scales.y(y) }) node .attr('transform', ({ x, y }) => `translate(${x}, ${y})`) } function loop () { const iterations = 300 let i = 0 function loop () { if (i === iterations) return update() i++ setTimeout(() => loop(), 0) } loop() } loop() return }32:T6ac,renderHistogram = (selection, data) => { const bins = d3.histogram() .value(({ score }) => score) .domain([0, 1]) .thresholds(10) (data) const width = 300 const height = 120 const margins = [8, 8, 24, 24] const scales = { x: d3.scaleLinear() .domain([0, 1]) .range([margins[3], width - margins[1]]) .nice(), y: d3.scaleLinear() .domain([0, Math.max(Math.ceil(data.length * 0.6 / 10) * 10, d3.extent(bins.map((d) => d.length))[1])]) .range([height - margins[2], margins[0]]), h: d3.scaleLinear() .domain([0, Math.max(Math.ceil(data.length * 0.6 / 10) * 10, d3.extent(bins.map((d) => d.length))[1])]) .range([0, height - margins[0] - margins[2]]) } const axes = { x: d3.axisBottom(scales.x).tickSize(4).ticks(10, 's'), y: d3.axisLeft(scales.y).tickSize(4).ticks(4, 's') } const svg = selection.append('svg') .attr('width', width) .attr('height', height) .style('border', '1px solid #aaa') // .style('width', '100%') const layer = svg.append('g') const bar = layer.selectAll('rect').data(bins) .enter().append('rect') .attr('width', ({ x0, x1 }) => scales.x(x1) - scales.x(x0) - 1) .attr('height', (d) => scales.h(d.length)) .attr('x', ({ x0 }) => scales.x(x0)) .attr('y', (d) => scales.y(d.length)) .attr('fill', '#aaa') const axisX = layer.append('g') .attr('transform', `translate(0, ${scales.y(0)})`) .attr('shape-rendering', 'crispEdges') .call(axes.x) const axisY = layer.append('g') .attr('transform', `translate(${scales.x(0)}, 0)`) .attr('shape-rendering', 'crispEdges') .call(axes.y) return bins }33:T61b,traits = [ { type: 'personality', key: 'big5_openness', label: 'Openness' }, { type: 'personality', key: 'big5_conscientiousness', label: 'Conscientiousness' }, { type: 'personality', key: 'big5_extraversion', label: 'Extraversion' }, { type: 'personality', key: 'big5_agreeableness', label: 'Agreeableness' }, { type: 'personality', key: 'big5_neuroticism', label: 'Emotional Range' }, { type: 'need', key: 'need_challenge', label: 'Challenge' }, { type: 'need', key: 'need_closeness', label: 'Closeness' }, { type: 'need', key: 'need_curiosity', label: 'Curiosity' }, { type: 'need', key: 'need_excitement', label: 'Excitement' }, { type: 'need', key: 'need_harmony', label: 'Harmony' }, { type: 'need', key: 'need_ideal', label: 'Ideal' }, { type: 'need', key: 'need_liberty', label: 'Liberty' }, { type: 'need', key: 'need_love', label: 'Love' }, { type: 'need', key: 'need_practicality', label: 'Practicality' }, { type: 'need', key: 'need_self_expression', label: 'Self-expression' }, { type: 'need', key: 'need_stability', label: 'Stability' }, { type: 'need', key: 'need_structure', label: 'Structure' }, { type: 'value', key: 'value_conservation', label: 'Conservation' }, { type: 'value', key: 'value_openness_to_change', label: 'Openness to Change' }, { type: 'value', key: 'value_hedonism', label: 'Hedonism' }, { type: 'value', key: 'value_self_enhancement', label: 'Self-enhancement' }, { type: 'value', key: 'value_self_transcendence', label: 'Self-transcendence' } ] .filter(({ type }) => filters[type])34:T2d6b,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\n

Cluster by:

\n \n \n personality\n \n \n \n need\n \n \n \n value\n \n \n `\n\n const _form = d3.select(form)\n .on('click', update)\n update()\n \n function update () {\n form.value = _form.selectAll('input').nodes()\n .map((el) => ({ key: d3.select(el).attr('value'), value: el.checked }))\n .reduce((memo, d) => ({ ...memo, [d.key]: d.value }) , {})\n }\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"md`\n### Total Persons: ${personalities.length}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"md`\n## Histogram per Trait\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"histograms = {\n const container = d3.select(DOM.element('div'))\n \n const histograms = container.selectAll('div').data(traits)\n .enter().append('div')\n .style('display', 'inline-block')\n .style('margin-right', '8px')\n .each(function (trait) {\n const data = personalities.map(({ scores }) => scores.find(({ key }) => key === trait.key))\n const _this = d3.select(this)\n const label = _this.append('h3').datum(trait)\n .text(({ type, label }) => `${type}: ${label}`)\n _this.call(renderHistogram, data)\n })\n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"md`\n## t-SNE\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"tsne = {\n const data = personalities\n const container = d3.select(DOM.element('div'))\n container.call(renderTsne, data)\n \n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`\n### utils\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"getEmbeddings = (data) => data\n .map(({ scores }) => scores.map(({ score }) => score))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`\n### data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"personalities = JSON.parse(await Files.text(file))\n .map(({ user_screen_name, json }) => ({\n user: user_screen_name,\n scores: [\n ...json.personality,\n ...json.needs,\n ...json.values\n ]\n }))\n .map((d) => ({\n ...d,\n scores: traits\n .map((trait) => ({\n ...trait,\n score: d.scores.find(({ trait_id }) => trait_id === trait.key).percentile\n })) \n }))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"md`\n### imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"