boxplot by wboykinm

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="//d3js.org/d3.v3.min.js"></script>
    <script src="boxplot.js"></script>
  </body>
</html>

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");
    }
  }
});