D3 Examples - boxplot

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