tufte 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: 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="//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.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");
    }
  }
});