Calculating the relative angle difference between two vectors

Here are the math-y bits, courtesy of @ch402:

var a2 = Math.atan2(source.y, source.x);
var a1 = Math.atan2(compare.y, compare.x);
var sign = a1 > a2 ? 1 : -1;
var angle = a1 - a2;
var K = -sign * Math.PI * 2;
var angle = (Math.abs(K + angle) < Math.abs(angle))? K + angle : angle;

forked from shancarter's block: Calculating the relative angle difference between two vectors

<!doctype html>
<meta charset="utf-8">
<style>
body {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
}
svg > g > line {
  stroke: #ddd;
  shape-rendering: crispEdges;
}
svg  text {
  text-anchor: middle;
}
g line {
  stroke: black;
}
.compare line {
  stroke-dashArray: 2, 4;
}
.handle circle {
  fill: yellow;
  fill-opacity: 0.8;
  stroke: black;
  stroke-opacity: 0.15;
}
.handle text {
  fill: grey;
  text-anchor: middle;
}
.difference {
  fill-opacity: 0.4;
}
</style>
<svg>
  <defs>
    <marker id="arrowhead" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="8" markerHeight="8" orient="auto">
      <path d="M0,0L10,5L0,10z" />
    </marker>
  </defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
"use strict";

var width = 960,
      height = 500;

var svg = d3.select("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var drag = d3.drag()
      .on("drag", function(d) { d.x = d3.event.x; d.y = d3.event.y; update(); });

var arc = d3.arc()
      .cornerRadius(4);

var format = d3.format(".2f")

// Origin
  svg.append("line")
      .attr("y1", -height / 2)
      .attr("y2", height / 2);

svg.append("line")
      .attr("x1", -width / 2)
      .attr("x2", width / 2)

svg.append("circle")
      .attr("r", 4);

// Difference
  var differenceArc = svg.append("g")
      .datum({});

var differencePath = differenceArc.append("path")
      .attr("class", "difference");

var differenceText = differenceArc.append("text");

// Source vector
  var sourceVector = svg.append("g")
      .attr("class", "source")
      .datum({x: 0, y: -150});

var sourceHandle = sourceVector.append("g")
      .attr("class", "handle")
      .call(drag);

var sourceLine = sourceVector.append("line")
      .attr("marker-end", "url(#arrowhead)");

sourceHandle.append("circle")
      .attr("r", 10);

var sourceText = sourceHandle.append("text")
      .attr("dy", -15);

// Compare vector
  var compareVector = svg.append("g")
      .attr("class", "compare")
      .datum({x: -250, y: -75});

var compareHandle = compareVector.append("g")
      .attr("class", "handle")
      .call(drag);

var compareLine = compareVector.append("line")
      .attr("marker-end", "url(#arrowhead)");

compareHandle.append("circle")
      .attr("r", 10);

var compareText = compareHandle.append("text")
      .attr("dy", -15);

// Update
  function update() {
    var source = sourceVector.datum(),
        compare = compareVector.datum();

var sourceLength = Math.sqrt(source.x * source.x + source.y * source.y),
        compareLength = Math.sqrt(compare.x * compare.x + compare.y * compare.y);

// The math-y bits
    var a2 = Math.atan2(source.y, source.x);
    var a1 = Math.atan2(compare.y, compare.x);
    var sign = a1 > a2 ? 1 : -1;
    var angle = a1 - a2;
    var K = -sign * Math.PI * 2;
    var angle = (Math.abs(K + angle) < Math.abs(angle))? K + angle : angle;

sourceLine
        .attr("x2", (d) => d.x)
        .attr("y2", (d) => d.y);

sourceHandle
        .attr("transform", (d) => `translate(${d.x}, ${d.y})`);

sourceText
        .text(`${source.x}, ${source.y}`)

compareLine
        .attr("x2", (d) => d.x)
        .attr("y2", (d) => d.y);

compareHandle
        .attr("transform", (d) => `translate(${d.x}, ${d.y})`)

compareText
        .text(`${compare.x}, ${compare.y}`);

arc
        .innerRadius(20)
        .outerRadius(Math.max(30, Math.min(sourceLength, compareLength) * 0.9))
        .startAngle(a2 + Math.PI / 2)
        .endAngle(a2 + angle + Math.PI / 2);

differencePath
        .style("fill", angle > 0 ? "cyan" : "magenta")
        .attr("d", arc());

differenceText
        .attr("transform", "translate(" + arc.centroid() + ")")
        .text(Math.abs(Math.round(360 * angle / (Math.PI * 2))) + "º " + (angle > 0 ? "starboard" : "port"))
  }
  update();

</script>

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