D3 Examples - ranged charts

xxxxxxxxxx
 
<!DOCTYPE html>
<html> 
<head>
  <!-- trying to demo what they did here with Java: https://onlinestatbook.com/2/sampling_distributions/clt_demo.html Except without Java -->
  <meta charset="utf-8"><!-- Load c3.css -->
​
  <link href="https://c3js.org/css/c3-b03125fa.css" rel="stylesheet" type="text/css">
  <!-- Load d3.js and c3.js -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://c3js.org/js/c3.min-4c5bef8f.js"></script> 
  <style>
    
    .c3-axis-x .domain,
    .c3-axis-y .domain,
    .c3-axis-x .tick line,
    .c3-axis-y .tick line{
      display:none;
    }
    .tick text,
    .c3-axis-y-label,
    .c3-axis-x-label {
      font-size:1.5em;
    }
    .c3-axis-y .tick  text{
      display:none;
    }
    .c3-axis-y .tick:nth-child(2n)  text{
      display:block;
    }
     .c3-circles-min,
    .c3-circles-max {
      display:none;
    }
    .c3-lines-min {
      /* Because max has it covered */
      display:none;
    }
    
    .c3-lines-max path {
      stroke-width:0px;
      stroke:transparent;
    }
    
    .c3-ygrids line {
      /*was going for  a grey background white-line look, but... */
      stroke: rgba(0,0,0,0.1);
      stroke-dasharray: none;
    }
    
    .c3-ygrids line:nth-child(2n){
      /*stroke:rgba(0,0,0,0.05);
      */
      stroke-dasharray: 3 3;
    }
    
    .c3-ygrid-line line {
      stroke : rgba(0,0,00,.5);
    }
    
    .c3-xgrid-line line {
      stroke :rgba(19,160,243,0.8);
    }
    .buy-in  rect{
      fill: rgba(19,160,243,0.2);
      /*
      #13e3e2;
      */
      fill-opacity:1!important;
      
    }
    .tip {
      position:relative;
      background-color:rgba(19,160,243,1);
      color:white;
      padding:1em;
      line-height:0;
      
        font-size:1.5em;
    }
    .range.tip {
            width:450px;
        margin-left:80px;
      box-sizing:border-box;
    }
    .arrow.tip {
      width:200px;
      /* If it were directly lining up
      
      margin-left:530px;
      */
      margin-left:465px;
      margin-bottom:0px;
      margin-top:40px;
      /*Gotta leave room for the triangles */
      margin-bottom:40px;
    }
    
    .range.tip.bottom {
      /*height:200px;
      */
    }
    .range.tip.top {
      margin-bottom:40px;
      padding:0.5em;
      
    }
    body {
      font-family:Calibri, sans-serif;
    }
    .amt {
      font-size:2.2em;
    }
  
/* https://css-tricks.com/snippets/css/css-triangle/*/
    .arrow-right,
    .arrow-left {
      
    position:absolute;
}
.range.tip.top .arrow-right,
.range.tip.top .arrow-left{
  bottom:-30px;
}
    
.range.tip.bottom .arrow-right,
.range.tip.bottom .arrow-left{
  top:-30px;
}
    
.range.tip .arrow-right{     
  left:0px;
}
    
.range.tip .arrow-left{     
  right:0px;
}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid rgba(19,160,243,1);
}
    
    .arrow .arrow-right {
  position:absolute;
      top:-30px;
      left:0px;
    }
.arrow .arrow-right.dir {
  left:auto;
  right:-50px;
  border-width:70px;
  top:-22px;
 }
​
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent; 
  
  border-right:30px solid rgba(19,160,243,1); 
}
  </style>
</head>
​
<body>
  <div class="range tip top">
    <p>Stuff happens here</p>
    <div class="arrow-right"></div>
    <div class="arrow-left"></div>
  </div>
  <div id="c1"></div>
  <div id="c2"></div>
  <div class="arrow tip right bottom">
    
    <div class="arrow-right"></div>
    <p>Stuff happens</p>
    <div class="arrow-right dir"></div>
  </div>
  <div class="range tip bottom">
    <div class="arrow-right"></div>
    <div class="arrow-left"></div>
    <p class="exp">A few words here and there</p>
    <p class="amt">$45.5-$34.2</p>
  </div>
   <script>
    
​
var start_year = 2017;
​
​
var year_range = d3.range(start_year, start_year + 14);
     
var tooltip_contents = function (data) {
 //data is an array of all the data points for a given x-axis
 return '<em>hi</em>';
};
   
var min = function (d) {
 return d3.min(d); //ignore remaining params
};
var max = function (d) {
 return d3.max(d);
}
​
​
     
     
var range_chart = function (o) {
​
  var on_rendered = function () {
   var max_path_el = d3.selectAll(o.bindto + ' .c3-line-max')[0][0];
​
   var min_path_el = d3.selectAll(o.bindto + ' .c3-line-min')[0][0];
​
   var min_psl = min_path_el.pathSegList;
​
   //reversed path_seg_list of min
   var r_psl = d3
    .range(min_psl.numberOfItems)
    .map(function (_) {
     /* go in reverse order */
     return min_psl
     .getItem(min_psl.numberOfItems - (_ + 1))
    });
​
   r_psl.forEach(function (_) {
    max_path_el.pathSegList
    .appendItem(new SVGPathSegLinetoAbs(
      undefined, _.x, _.y))
   });
​
   d3.select(max_path_el)
   .style({
    fill : 'rgba(0,0,0,0.1)',
    stroke : 'grey'
   });
​
  };
​
  var left_right_zip = d3.zip(o.left_range, o.right_range);
​
​
  var min_range = left_right_zip.map(min);
  var max_range = left_right_zip.map(max);
​
  var min_max_zip = d3.zip(max_range, min_range);
  var spread_range = min_max_zip.map(function (v) {
    return v[0] - v[1];
    d3.max(v) - d3.min(v)
   });
  var mean_range = min_max_zip.map(function (v) {
    return d3.mean(v);
   });
​
  var columns = [
   ['year'].concat(year_range),
   ['min'].concat(min_range),
   ['max'].concat(max_range),
   ['mean'].concat(mean_range),
  ];
​
  var chart = c3.generate({
    regions : o.regions,
    size : {
     height : 500,
      width:960
    },
    padding :{
      bottom: 20
    },
    onrendered : on_rendered,
    axis : {
     y : {
      label : {
       text : o.y,
       position : 'outer-middle'
      },
      padding : 0,
      tick : {
       values : d3.range(
        Math.floor(d3.min(min_range)), 
        Math.ceil(d3.max(max_range)), 
        o.y_tick_height)
      }
     },
     x : {
      label : {
       text : o.x,
       position : 'outer-center'
      }
     }
    },
    grid : {
     y : {
      show : true,
      lines : [{
        value : 0
       }
      ],
     },
     x: { 
      lines : [{
        value : 2023
​
      },{
        value : 2024
​
      }]
     }
    },
    bindto : o.bindto,
    //point: {show:false},
    //Show them; use CSS to hide the ones you don't want
    //tooltip : { contents: mean_range_contents},
    legend : {
     show : false
    },
    data : {
     x : 'year',
     columns : columns,
     colors : {
      spread : 'grey',
      mean : 'black',
      left : 'grey',
      right : 'red',
       max: 'black',
​
     }
    }
   });
}
​
range_chart({
  bindto: '#c1',
  x: 'X axis',
  y: 'Y axis',
  y_tick_height:0.5 ,
  regions: [{
    axis : 'x',
    start : 2017,
    end : 2024,
    class : 'buy-in'
   }
  ],
  
    left_range : [4.5, 0, -0.2, -0.5, -0.4, -0.6, -2.7, -2.3, -2.6, -2.6, -2.6, -2.6, -2.6, -2.6],
   right_range : [7, -0.8, -0.9, -0.9, -1, -1, -2.9, -3.3, -2.6, -2.6, -2.6, -2.6, -2.6, -2.6]
});
​
range_chart({
  bindto: '#c2',
  x: 'X axis',
  y: 'Y axis',
  y_tick_height:10 ,
  regions: [{
    axis : 'x',
    start : 2017,
    end : 2024,
    class : 'buy-in'
   }
  ],
  
    left_range :   [-36, .62, 3,  5,  6,  8, 41, 34, 41, 43, 44, 45, 46, 48],
   right_range : [-68, 10, 13, 19, 13, 15, 42, 51, 45, 43, 44, 45, 46, 48]
});
  </script>
    </body>
    </html>
    