wboykinm/boxplot.js

## boxplot.js
var app = angular.module('boxplotApp', []);
// CONTROLLER
app.controller('BoxplotController', ['$scope', '$interval',
  function($scope, $interval) {
    $scope.boxplot = {lift: {
      total: 0.2,
      variants: [{
        code: 'a',
        name: 'Primary',
        lift: 0.18
      }, {
        code: 'b',
        name: 'Secondary',
        lift: 0.22
      }]
    }}
}]);
// DIRECTIVE
app.directive('boxplotChart', function($parse, $window) {
  return {
    restrict: 'EA',
    //THIS NEEDS REPLACEMENT FOR RESPONSIVE WIDTH/HEIGHT
    template: "<svg></svg>",
    // Uncomment once prepared for craziness
    scope: {
      value: '='
    },
    link: function(scope, elem, attrs) {
      scope.safeApply = scope.$root.safeApply;

      var d3 = $window.d3,
        rawSvg = elem.find('svg');

      var margin = {top: 10, right: 10, bottom: 10, left: 10},
        width = 300 - margin.left - margin.right,
        height = 80 - margin.top - margin.bottom;

      //SET SVG SIZE
      var boxPlot = d3.select(rawSvg[0])
        .attr("width", width)
        .attr("height", height)
        .attr("class","boxPlot");

      var quartilesLow = boxPlot.append("line")
        .attr("x1", 0)
        .attr("x2", width/3)
        .attr("transform", "translate(0," + height/2 + ")");

      var quartilesHigh = boxPlot.append("line")
        .attr("x1", width/3*2)
        .attr("x2", width)
        .attr("transform", "translate(0," + height/2 + ")");

      var plotMean = boxPlot.append("circle")
        //.attr("x", width/2)
        .attr("r", 10)
        .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
        .attr("class", "mean");

      var plotMean = boxPlot.append("circle")
        //.attr("x", width/2)
        .attr("r", 12)
        .attr("transform", "translate(" + width/4*3 + "," + height/2 + ")")
        .attr("class", "lift");
    }
  }
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Boxplot Directive</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
    .boxPlot line {
      fill: #fff;
      stroke: #666;
      stroke-width: 3.5px;
      stroke-linecap: round;
      stroke-opacity: 0.8;
    }
    .boxPlot .mean {
      fill: #49ada6;
    }
    .boxPlot .lift {
      fill: #e9d362;
      stroke:#666;
      stroke-width: 1.5px;
      stroke-opacity: 0.3;
    }

    </style>
  </head>
  <body>
    <div ng-app="boxplotApp" ng-controller="BoxplotController">
      <div boxplot-chart chart-data="BoxplotData"></div>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js'></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="boxplot.js"></script>
  </body>
</html>
	var app = angular.module('boxplotApp', []);
	// CONTROLLER
	app.controller('BoxplotController', ['$scope', '$interval',
	function($scope, $interval) {
	$scope.boxplot = {lift: {
	total: 0.2,
	variants: [{
	code: 'a',
	name: 'Primary',
	lift: 0.18
	}, {
	code: 'b',
	name: 'Secondary',
	lift: 0.22
	}]
	}}
	}]);
	// DIRECTIVE
	app.directive('boxplotChart', function($parse, $window) {
	return {
	restrict: 'EA',
	//THIS NEEDS REPLACEMENT FOR RESPONSIVE WIDTH/HEIGHT
	template: "<svg></svg>",
	// Uncomment once prepared for craziness
	scope: {
	value: '='
	},
	link: function(scope, elem, attrs) {
	scope.safeApply = scope.$root.safeApply;

	var d3 = $window.d3,
	rawSvg = elem.find('svg');

	var margin = {top: 10, right: 10, bottom: 10, left: 10},
	width = 300 - margin.left - margin.right,
	height = 80 - margin.top - margin.bottom;

	//SET SVG SIZE
	var boxPlot = d3.select(rawSvg[0])
	.attr("width", width)
	.attr("height", height)
	.attr("class","boxPlot");

	var quartilesLow = boxPlot.append("line")
	.attr("x1", 0)
	.attr("x2", width/3)
	.attr("transform", "translate(0," + height/2 + ")");

	var quartilesHigh = boxPlot.append("line")
	.attr("x1", width/3*2)
	.attr("x2", width)
	.attr("transform", "translate(0," + height/2 + ")");

	var plotMean = boxPlot.append("circle")
	//.attr("x", width/2)
	.attr("r", 10)
	.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
	.attr("class", "mean");

	var plotMean = boxPlot.append("circle")
	//.attr("x", width/2)
	.attr("r", 12)
	.attr("transform", "translate(" + width/4*3 + "," + height/2 + ")")
	.attr("class", "lift");
	}
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Boxplot Directive</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<style>
	.boxPlot line {
	fill: #fff;
	stroke: #666;
	stroke-width: 3.5px;
	stroke-linecap: round;
	stroke-opacity: 0.8;
	}
	.boxPlot .mean {
	fill: #49ada6;
	}
	.boxPlot .lift {
	fill: #e9d362;
	stroke:#666;
	stroke-width: 1.5px;
	stroke-opacity: 0.3;
	}

	</style>
	</head>
	<body>
	<div ng-app="boxplotApp" ng-controller="BoxplotController">
	<div boxplot-chart chart-data="BoxplotData"></div>
	</div>
	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js'></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="boxplot.js"></script>
	</body>
	</html>