--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <script src="../bower_components/d3/d3.min.js"></script>
+ <script src="../src/namespaces.js"></script>
+ <script src="../src/graphing/radar.js"></script>
+
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
+ <style>
+ svg {
+ padding: 20px;
+ }
+ svg circle {
+ fill: transparent;
+ stroke: #cacaca;
+ }
+ svg text {
+ font: 14px 'Open Sans';
+ fill: #7a7a7a;
+ }
+ svg line {
+ stroke: #cacaca;
+ }
+
+ </style>
+</head>
+<body>
+</body>
+ <script>
+ var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 500);
+ radarGraph.plot();
+ </script>
+</html>
--- /dev/null
+tr.graphing.Radar = function (svg, size, radar) {
+ var self = {};
+
+ svg.attr('width', size).attr('height', size);
+
+ function plotLines() {
+ svg.append('line')
+ .attr('x1', size / 2)
+ .attr('y1', 0)
+ .attr('x2', size / 2)
+ .attr('y2', size)
+ .attr('stroke-width', 5);
+ };
+
+ self.plot = function () {
+ plotLines();
+
+ };
+
+ return self;
+};
--- /dev/null
+describe('tr.graphing.Radar', function () {
+ function buildSvg() {
+ return d3.select("body").append("svg");
+ }
+
+ it('sets the size', function () {
+ var svg = buildSvg();
+ spyOn(svg, 'attr').andReturn(svg);
+
+ var radarGraph = new tr.graphing.Radar(svg, 500);
+
+ expect(svg.attr).toHaveBeenCalledWith('width', 500);
+ expect(svg.attr).toHaveBeenCalledWith('height', 500);
+ });
+
+ describe('lines', function () {
+ it('plots a vertical line in the center', function () {
+ var svg = buildSvg();
+ spyOn(svg, 'append').andReturn(svg);
+ spyOn(svg, 'attr').andReturn(svg);
+
+ var radarGraph = new tr.graphing.Radar(svg, 500);
+
+ radarGraph.plot();
+
+ expect(svg.append).toHaveBeenCalledWith('line');
+ expect(svg.attr).toHaveBeenCalledWith('x1', 500 / 2);
+ expect(svg.attr).toHaveBeenCalledWith('y1', 0);
+ expect(svg.attr).toHaveBeenCalledWith('x2', 500 / 2);
+ expect(svg.attr).toHaveBeenCalledWith('y2', 500);
+ expect(svg.attr).toHaveBeenCalledWith('stroke-width', 5);
+ });
+ })
+});