manhattan distance

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?

I first made cosine similarity to try and visualize the process. @mumrah forked the block and modified it to use Manhattan Distance

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!

forked from mumrah's block: manhattan distance

<!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 manhattanDistance(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 manhattanDistance(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 manhattanDistance(u, v) {
      // compute the distance between u and v
      var d = 0;
      for(var i = 0; i < u.length; i++) {
        d += Math.abs(u[i] - v[i])
      }
      return 1.0 - d / (4 * u.length);
    }
    
    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.category20()
        .domain(d3.range(rows))
      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