D3 Examples - classic 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="yearsChart.js"></script>
  <style>
    body { 
      padding: 1rem;
​
    }
  </style>
</head>
​
<body>
  
  <h1>hello world</h1>
    
  <div id="month-chart">month-chart</div>
  <div id="year-chart">year-chart</div>
  
  
  
<script>
(async function() {
const {data} = await axios.get('fddata.json');
const cf = crossfilter(data);
cf.onChange(cfChanged);
const values = cf.dimension(d => d.v);
const dates = cf.dimension((d) => {
    const dateObj = new Date(d.d);
    const timestamp = dateObj.getTime() / 1000;
    return timestamp;
});
const months = cf.dimension((d) => {
    const dateObj = new Date(d.d);
    // use 1-12 instead of 0-11
    return dateObj.getMonth() + 1;
});
const years = cf.dimension((d) => {
    const dateObj = new Date(d.d);
    return dateObj.getFullYear();
});
// define dimension groups
const valuesGroup = values.group();
const datesGroup = dates.group();
const monthsGroup = months.group();
const yearsGroup = years.group(); 
// - yearly total
const yearsByTotal = years.group().reduceSum(d => {
  return d.v;
});
// - monthly total
const monthsByTotal = months.group().reduceSum(d => {
  return d.v;
});
// monthly min, max, median, [75%, 25% hopefully?]
const monthReducer = reductio()
.valueList(d => d.v)
.min(true)
.max(true)
.median(true)
.count(true);
monthReducer(monthsGroup);  
     
//   formatData(data);
//   console.log('ybt', yearsByTotal.all().map(v => {
//     return {
//      key: v.key,
//       value: v.value * 86400,
//     };
    
//   }));
  renderYearsChart(data);
  
     
     
})();
    
    function cfChanged() {
      console.log('cf changed!');
    }
</script>
</body>
​
    