cosine similarity

Click on the various examples

Each example is a random vector in the same "space" as the sample in the top left.

Drag on individual rows

Each row represents one dimension of our vectors. You can drag them back and forth to change the value of our vector for that dimension.

Watch how the similarity bar changes

The bar below each vector is a measure of how similar it is to the sample in the top left.

Whats going on?

Cosine similarity is a technique for getting the "distance" between two vectors in high-dimensional spaces. We intuitively understand distance in 2 and 3 dimensions, but what happens if we have more than that? It can be convenient to calculate a single number that tells us how similar or different two high-dimensional vectors are.

I made this explanation because I'm trying to use find similar blocks and in order to do that I need to understand cosine similarity. They say nothing helps you understand better than trying to explain it!

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body {
      position: fixed;
      top:0;left:0;bottom:0;right:0;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .selected {
      fill: #d33f67;
    }
    .highlighted {
      stroke: #d33f67;
      stroke-width: 3;
    }
    .active {
      pointer-events: none;
    }
    .random {
      cursor: pointer;
    }
    .background {
      fill: #efefef;
    }
    .background.selected  {
      fill: #f8f0f0;
    }
    .row {
      cursor: ew-resize;
    }
  </style>
</head>

var progressWidth = cellSize * range[1] * 2;
    var progress = renter.append("rect").classed("progress", true)
    .attr({
      x: 0,
      y: cellSize * example.length + 30,
      height: 5,
      width: function(d,i) { return cosineSimilarity(example, d) * progressWidth; },
      fill: "#515151",
    })

renter.append("rect").classed("bg", true)
    .attr({
      x: 0,
      y: cellSize * example.length + 30,
      height: 5,
      width: progressWidth,
      fill: "none",
      stroke: "#333333"
    })
    
    renter.filter(function(d,i) {
      return i === selectedIndex;
    })
    .each(function(d,i) {
      d3.select(this).select("rect.background").classed("selected", true);
      d3.select(this).select("rect.progress").classed("selected", true);
      d3.select(this).select("rect.active").classed("highlighted", true);
      d3.select(this).select("rect.bg").classed("highlighted", true);
    })
    
    function rerender() {
      progress.attr({
        width: function(d,i) { return cosineSimilarity(example, d) * progressWidth; }
      })
    }
    
    var explanation = svg.append("g").classed("explanation", true)
    .attr("transform", "translate(" + [422, 15] + ")")
    
    var sexp = new strip2()
    .data(example)
    .update(explanation);
    
    var selected = svg.append("g").classed("selected", true)
    .attr("transform", "translate(" + [544, 15] + ")")
    
    var sexp = new strip2()
    .data(example)
    .update(explanation);
    
    var sel = new strip2()
    .data(selectedData)
    .update(selected);

updateExplanation();
    function updateExplanation() {
      
      // alot of hardcoding going on here...
      sexp.data(example).update(explanation)
      sel.data(selectedData).update(selected)
    }
    
    
    
    
    function cosineSimilarity(u, v) {
      // compute the distance between u and v
      var udotv = 0
      var umag = 0
      var vmag = 0
      for(var i = 0; i < u.length; i++) {
        udotv += u[i] * v[i]
        umag += u[i]*u[i]
        vmag += v[i]*v[i]
      }
      umag = Math.sqrt(umag)
      vmag = Math.sqrt(vmag)
      return udotv/(umag*vmag);
    }
    
    function strip2() {
      // for showing just the cell values
      var cellWidth = 20;
      var cellHeight = 20;
      var rows = 6;
      var cols = 5;
      var fontSize = 14;
      var half = Math.floor(cols/2);
      var colors = d3.scale.ordinal()
        .domain(d3.range(rows))
        .range([
          "#e41a1c",
          "#377eb8",
          "#4daf4a",
          "#984ea3",
          "#ff7f00",
          "#ffff33"
        ])
      var data = [];
      this.update = function(g) {
        var bar = g.selectAll("rect.bar")
         .data(data)
        bar.enter().append("rect").classed("bar", true);
        bar.attr({
          x: function(d,i) { return 0 },
          y: function(d,i) { return i * cellHeight },
          width: cellWidth,
          height: cellHeight,
          fill: function(d,i) { 
            var color = d3.hcl(colors(i))
            var v = (cols-1) - d;
            if(v < half) {
              return color.darker(1 - v/half)
            } else if(v > 2) {

return color.brighter((v-1)/cols)
            } else {
              return color;
            }
          }
        })

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js