t-SNE and a force

This is a t-SNE representation of an array of (random) circles : red, green, blue, opacity and radius are 5 independent dimensions.

The t-SNE is computed by a javascript worker, using science.ai's implementation.

A force is created that tries to:

follow the positions given by t-SNE
orient the space so that "reds" are more towards the bottom
collide the circles.

Based on t-SNE worker

Built with blockbuilder.org, so double-thank-you to @enjalot.

See also t-SNE Voronoi

forked from Fil's block: t-SNE and a force

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script> 
const maxIter = 400,
    width = 400,
    x = d3.scaleLinear()
    .domain([-200, 200])
    .range([0, width]),
    area = d3.area()
       .x((d,i) => i)
       .y0(width+90)
       .y1((d,i) => width + 90 - parseInt(3 * d||0));

d3.queue()
    .defer(d3.text, 'tsne.min.js')
    .defer(d3.text, 'worker.js')
    .await(function (err, t, w) {

const worker = new Worker(window.URL.createObjectURL(new Blob([t + w], {
            type: "text/javascript"
        })));

const data = d3.range(500).map(d => [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]);

const svg = d3.select('body').append('svg')
            .attr('width', width + 100)
            .attr('height', width + 100);

const circles = svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .attr('r', d => d.r = 3 + 8 * d[4] * d[4])
            .attr('stroke-width', 0.3)
            .attr('fill', d => d3.rgb(d[0] * 256, d[1] * 256, d[2] * 256))
            .attr('stroke', d => d3.rgb(d[0] * 256, d[1] * 256, d[2] * 256))
            .attr('opacity', d => 0.3 + 0.7 * d[3]);

const cost = svg.append('path')
            .attr('fill', '#aaa');

let pos = data.map(d => [Math.random() - 0.5, Math.random() - 0.5]);
        let costs = [];
  
        let s = 0, c = 1;

});
  </script>
</body>

https://d3js.org/d3.v4.min.js