ranged charts

forked from anonymous's block: nate central limit theorem demo

forked from theredpea's block: nate central limit theorem demo

<!DOCTYPE html>
<html> 
<head>
  
  <meta charset="utf-8">

.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 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>

Modified http://c3js.org/js/c3.min-4c5bef8f.js to a secure url

https://d3js.org/d3.v3.min.js

https://c3js.org/js/c3.min-4c5bef8f.js