D3 Examples - d3 box plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.6/crossfilter.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/0.6.3/reductio.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.0-beta.2/dc.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.0-beta.2/dc.min.css" />
    <link rel="stylesheet" href="style.css" />
  <style>
​
  </style>
</head>
​
<body>
  
  <h1>hello world</h1>
    
  <div id="box-test">bt</div>
  
  <div id="pie-chart">pc</div>
  
  
  <script>
     (async function() {
     const {data} = await axios.get('fddata.json');
     const cf = crossfilter(data);
     cf.onChange(cfChanged);
     const dValue = cf.dimension(d => d.v);
     const dDate = cf.dimension((d) => {
            const dateObj = new Date(d.d);
            const timestamp = dateObj.getTime() / 1000;
            return timestamp;
        });
     const dMonth = cf.dimension((d) => {
            const dateObj = new Date(d.d);
            // use 1-12 instead of 0-11
            return dateObj.getMonth() + 1;
        });
     
     const dYear = cf.dimension((d) => {
            const dateObj = new Date(d.d);
            return dateObj.getFullYear();
        });
     const gValues = dValue.group();
     const gDates = dDate.group();
     const gMonths = dMonth.group();
     const gYears = dYear.group();
     const gYearsByTotal = dYear.group().reduceSum(d => d.v);
     const gMonthsByTotal = dMonth.group().reduceSum(d => d.v);
     
     // regular month dimension with no reductio
     const monthDimension = cf.dimension((d) => {
            const dateObj = new Date(d.d);
            // use 1-12 instead of 0-11
            return dateObj.getMonth() + 1;
        });
     const testGroup = monthDimension.group().reduce(
        function(p,v) {
          p.push(v.v);
          return p;
        },
        function(p,v) {
          p.splice(p.indexOf(v.v), 1);
          return p;
        },
        function() {
          return [];
        }
      );
     
// register post-processing function to add percentiles
// reductio.registerPostProcessor('addPercentiles', (prior) => {
//             const all = prior();
//             return () => {
//                 const updated = all.map((e) => {
//                     const valueList = e.value.valueList;
//                     e.value.p75 = d3.quantile(valueList, 0.75);
//                     e.value.p25 = d3.quantile(valueList, 0.25);
//                     return e;
//                 });
//                 return updated;
//             };
//         });
     
    // monthly min, max, median, 75%, 25%
//     const monthReducer = reductio()
//     .valueList(d => d.v)
//     .min(true)
//     .max(true)
//     .median(true)
//     .count(true);   
     
    // add set the group's reducer to use reductio
//     monthReducer(gMonths); 
     
//     gMonths.post().addPercentiles()();
     
    console.log(testGroup.all());
   
var chart = dc.boxPlot("#box-test");
var pie = dc.pieChart("#pie-chart");
     
    chart
    .width(768)
    .height(480)
    .margins({top: 10, right: 50, bottom: 30, left: 50})
    .dimension(monthDimension)
    .group(testGroup)
//     .x(d3.scaleTime())
    .round(d3.timeMonth.round)
//     .xUnits(d3.timeMonths)
    .elasticY(true);
     
      // this demonstrates solving elasticX manually, avoiding the
  // bug where the rightmost bar/box is not displayed, #792
//   function calc_domain(chart) {
//       var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
//           max = d3.max(chart.group().all(), function(kv) { return kv.key; });
//       max = d3.timeMonth.offset(max, 1);
//       chart.x().domain([min, max]);
//   }
//   chart.on('preRender', calc_domain);
//   chart.on('preRedraw', calc_domain);
     
pie
.width(140)
.height(140)
.radius(70)
.dimension(dYear)
.group(gYears);
​
dc.renderAll();
     
     
 })();
    
    function cfChanged() {
      console.log('cf changed!');
    }
  </script>
</body>
​
    