Math

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.sinline {
    fill:none;
    stroke:magenta;
}

.sinradiant {
    fill:magenta;
}

.cosradiant {
    fill:blue;
}

.connector {
    fill:#888;
}

.cosline {
    fill:none;
    stroke:blue;
}

circle {
    fill:none;
    stroke:#888;
}

rect.radiant {
  fill: steelblue;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 60, left: 50},
    width = 640 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.scale.linear()
    .domain([0, 360])
    .range([0, width]);

var x2 = d3.scale.linear()
    .domain([0, Math.PI * 2])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([1, -1])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(d3.range(0, 8).map(function(d) { return d * 45; }))
    .orient("bottom");

var xAxis2 = d3.svg.axis()
    .scale(x2)
    .tickValues([0, Math.PI, Math.PI * 2])
    .tickFormat(function(d) {
        return d ? Math.round(d / Math.PI) + 'π' : 0;
    })
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .tickValues([-1, 0, 1])
    .orient("left");

var d2r = Math.PI / 180;

var sinline = d3.range(0, 360).map(function(d) {
    return [d, Math.sin(d * d2r)];
})

var cosline = d3.range(0, 360).map(function(d) {
    return [d, Math.cos(d * d2r)];
})

var line = d3.svg.line()
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); })

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height + 20) + ")")
    .call(xAxis2);

svg.append("path")
    .attr('class', 'sinline')
    .data([sinline])
    .attr("d", line);

svg.append("path")
    .attr('class', 'cosline')
    .data([cosline])
    .attr("d", line);

var r = height / 2;

var circle = svg.append("circle")
    .attr('class', 'circ')
    .attr("r", r);

var radiant = svg.append('rect')
    .attr('class', 'radiant')
    .attr('height', r)
    .attr('width', 1);

var radiant2 = svg.append('rect')
    .attr('class', 'radiant')
    .attr('height', r)
    .attr('width', 1);

var yradiant = svg.append('rect')
    .attr('class', 'sinradiant')
    .attr('height', 1)
    .attr('width', width);

var xradiant = svg.append('rect')
    .attr('class', 'cosradiant')
    .attr('height', 1)
    .attr('width', width);

var connector = svg.append('rect')
    .attr('class', 'connector')
    .attr('height', 1)
    .attr('width', 1);

d3.select('body').on('mousemove', function() {
    var ex = d3.event.x - r;
    circle.attr('transform', function(d) {
        return 'translate(' + [ex, r] + ')'
    });
    radiant.attr('transform', function(d) {
        return 'translate(' + [ex, r] + ') rotate(' + (x.invert(ex)) + ', 0, 0)'
    });
    radiant2.attr('transform', function(d) {
        return 'translate(' + [ex, r] + ') rotate(' + (x.invert(ex) - 90) + ', 0, 0)'
    });
    var s = Math.sin(x.invert(ex) * d2r);
    var c = Math.cos(x.invert(ex) * d2r);
    yradiant.attr('transform', function(d) {
        return 'translate(' + [0, y(s)] + ')'
    });
    xradiant.attr('transform', function(d) {
        return 'translate(' + [0, y(c)] + ')'
    });
    connector
        .attr('height', function(d) {
            return Math.abs(y(s) - y(c));
        })
        .attr('transform', function(d) {
            return 'translate(' + [ex, y(
                Math.min(c, s)
            )] + ')'
        });
})

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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