wboykinm/boxplot.js

## boxplot.js
var app = angular.module('boxplotApp', []);
// CONTROLLER
app.controller('BoxplotController', ['$scope', '$interval',
  function($scope, $interval) {
    $scope.boxplotData = {
      total: 0.2,
      variants: [{
        code: 'a',
        name: 'Primary',
        lift: 0.18,
        range: [0.01,0.2],
        quartiles: [0.08,0.1,0.15,0.18]
      }, {
        code: 'b',
        name: 'Secondary',
        lift: 0.22,
        range: [0,0.4],
        quartiles: [0.03,0.11,0.21,0.3]
      }]
    }
}]);
// 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: {
      chartData: '='
    },
    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;

       // Tristan - replace this with whatever works to use this directive once per variant;
      // For this example I'm just forcing it to use the first variant:
      var plotVariant = scope.chartData.variants[0];

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

      //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", x1(plotVariant.range[0]))
        .attr("x2", x1(plotVariant.quartiles[0]))
        .attr("transform", "translate(0," + height/2 + ")");

      var quartilesHigh = boxPlot.append("line")
        .attr("x1", x1(plotVariant.quartiles[2]))
        .attr("x2", x1(plotVariant.range[1]))
        .attr("transform", "translate(0," + height/2 + ")");

      var plotMax = boxPlot.append("line")
        .attr("y1", height/3.35)
        .attr("y2", height/1.45)
        .attr("transform", "translate(" + x1(plotVariant.range[1]) + ",0)")
        .attr("class", "max");

      var plotMin = boxPlot.append("line")
        .attr("y1", height/3.35)
        .attr("y2", height/1.45)
        .attr("transform", "translate(" + x1(plotVariant.range[0]) + ",0)")
        .attr("class", "min");

      var quartilesMid = boxPlot.append("rect")
        .attr("height",height/2)
        .attr("width",x1(plotVariant.quartiles[2]) - x1(plotVariant.quartiles[0]))
        .attr("transform", "translate(" + x1(plotVariant.quartiles[0]) + "," + height/4 + ")");

      var plotMedian = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.quartiles[1]) + ",0)")
        .attr("class", "median");

      var plotLift = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
        .attr("class", "lift");

      var plotLiftHalo = boxPlot.append("line")
        .attr("y1", height/4)
        .attr("y2", height/1.35)
        .attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
        .attr("class", "liftHalo");
    }
  }
});

## 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: 1.5px;
      stroke-opacity: 0.8;
    }
    .boxPlot rect {
      fill-opacity: 0;
      stroke: #666;
      stroke-width: 1.5px;
      stroke-opacity: 0.8;
    }
    .boxPlot .median {
      stroke:#49ada6;
      stroke-width: 2.5px;
    }
    .boxPlot .lift {
      stroke:#e9d362;
      stroke-width: 4.5px;
      stroke-linecap: round;
    }
    .boxPlot .liftHalo {
      stroke:#666;
      stroke-width: 1px;
      stroke-linecap: round;
    }

    </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.boxplotData = {
	total: 0.2,
	variants: [{
	code: 'a',
	name: 'Primary',
	lift: 0.18,
	range: [0.01,0.2],
	quartiles: [0.08,0.1,0.15,0.18]
	}, {
	code: 'b',
	name: 'Secondary',
	lift: 0.22,
	range: [0,0.4],
	quartiles: [0.03,0.11,0.21,0.3]
	}]
	}
	}]);
	// 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: {
	chartData: '='
	},
	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;

	// Tristan - replace this with whatever works to use this directive once per variant;
	// For this example I'm just forcing it to use the first variant:
	var plotVariant = scope.chartData.variants[0];

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

	//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", x1(plotVariant.range[0]))
	.attr("x2", x1(plotVariant.quartiles[0]))
	.attr("transform", "translate(0," + height/2 + ")");

	var quartilesHigh = boxPlot.append("line")
	.attr("x1", x1(plotVariant.quartiles[2]))
	.attr("x2", x1(plotVariant.range[1]))
	.attr("transform", "translate(0," + height/2 + ")");

	var plotMax = boxPlot.append("line")
	.attr("y1", height/3.35)
	.attr("y2", height/1.45)
	.attr("transform", "translate(" + x1(plotVariant.range[1]) + ",0)")
	.attr("class", "max");

	var plotMin = boxPlot.append("line")
	.attr("y1", height/3.35)
	.attr("y2", height/1.45)
	.attr("transform", "translate(" + x1(plotVariant.range[0]) + ",0)")
	.attr("class", "min");

	var quartilesMid = boxPlot.append("rect")
	.attr("height",height/2)
	.attr("width",x1(plotVariant.quartiles[2]) - x1(plotVariant.quartiles[0]))
	.attr("transform", "translate(" + x1(plotVariant.quartiles[0]) + "," + height/4 + ")");

	var plotMedian = boxPlot.append("line")
	.attr("y1", height/4)
	.attr("y2", height/1.35)
	.attr("transform", "translate(" + x1(plotVariant.quartiles[1]) + ",0)")
	.attr("class", "median");

	var plotLift = boxPlot.append("line")
	.attr("y1", height/4)
	.attr("y2", height/1.35)
	.attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
	.attr("class", "lift");

	var plotLiftHalo = boxPlot.append("line")
	.attr("y1", height/4)
	.attr("y2", height/1.35)
	.attr("transform", "translate(" + x1(plotVariant.lift) + ",0)")
	.attr("class", "liftHalo");
	}
	}
	});
	<!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: 1.5px;
	stroke-opacity: 0.8;
	}
	.boxPlot rect {
	fill-opacity: 0;
	stroke: #666;
	stroke-width: 1.5px;
	stroke-opacity: 0.8;
	}
	.boxPlot .median {
	stroke:#49ada6;
	stroke-width: 2.5px;
	}
	.boxPlot .lift {
	stroke:#e9d362;
	stroke-width: 4.5px;
	stroke-linecap: round;
	}
	.boxPlot .liftHalo {
	stroke:#666;
	stroke-width: 1px;
	stroke-linecap: round;
	}

	</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>