tmcw/index.html

## index.html
<!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="http://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>
	<!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="http://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>