wca_rightPanelHistogram

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
//See: https://github.com/d3/d3-3.x-api-reference/blob/master/Histogram-Layout.md#_histogram
//See: https://www.youtube.com/watch?v=0CZ7-f9wXiM
    
//     var rawData = [ 11, 56, 55, 54, 100, 111, 111, 120, 200, 211, 300, 400, 500 ];
//     var rawData = [ 100, 200, 300, 400, 500 ]; 
    var rawData = [ 15.1, 16.9 , 16.01, 15.99, 15.91, 15.98, 16.9, 16.9];
    var thisProvider = [16.9];
//     var rawData = [90, 199, 555, 98, 120];
//     var rawData = [0.32, 0.33, 0.45, 0.46, 0.65, 0.64, 0.76, 0.78, 0.77, 0.79, 0.44];
    
    
    var server_xMin = 15,
        server_xMax = 17,
        intervalLarge = 0.4,
        intervalSmall = 0.2,
        xMin = Math.floor(d3.min(rawData)),
        xMax = Math.ceil(d3.max(rawData)),
        xDomainMin = xMin,
        xDomainMax = xMax,
        numBins = Math.round((server_xMax - server_xMin) / intervalSmall)
    ;
    
    var rateDisplayType = "Decimal";
    
    var scaleFormat = (function(type) {  
      switch(type) {
        case 'Percent':
          return d3.format('%');
        case 'Decimal':
          return d3.format('.1f'); //fixed 1 decimals
        case 'Duration':
          return d3.format(''); //TODO: set this up based on WCA time fmt
        case 'Integer':
          return d3.format('d');
        case 'Text':
          return d3.format(''); //TODO: create ordinal scale
        case 'Currency':
          return d3.format('$');
        default:
          return d3.format('d');
      }
    })(rateDisplayType);

console.log(scaleFormat());
    
    var formatPercent = d3.format('%');
    
    var chartWidth = 310,
        chartHeight = 100;
    
    var dims = {
      margin : {top: 30, right: 30, bottom: 30, left: 30},
      width : function() { return 960 - this.margin.left - this.margin.right },
      height : function() { return 500 - this.margin.top - this.margin.bottom }
    };
    
    var canvasStyle = {
      'width' : dims.width() + dims.margin.left + dims.margin.right,
      'height' : dims.height() + dims.margin.top + dims.margin.bottom,
    };

// bar.append("rect")
//     .attr("x", 1)
//     .attr("width", xScale(histoData[0].dx) + 200)
//     .attr("height", function(d) { return height - yScale(d.y); });

// bar.append("text")
//     .attr("dy", ".75em")
//     .attr("y", 6)
//     .attr("x", xScale(histoData[0].dx) / 2)
//     .attr("text-anchor", "middle")
//     .text(function(d) { return formatCount(d.y); });

// canvas.append("g")
//     .attr("class", "x axis")
//     .attr("transform", "translate(0," + height + ")")
//     .call(xAxis);

//     //In-bar value labels
//     canvas.selectAll("text")
//       .data(dataset)
//       .enter()
//       .append("text")
//       .text(function(d) {
//       return d;
//     })
//       .attr("text-anchor", "middle")
//       .attr("x", function(d, i) {
//       return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
//     })
//       .attr("y", function(d) {
//       return h - (d * 4) + 14;
//     })
//       .attr("font-family", "sans-serif")
//       .attr("font-size", "11px")
//       .attr("fill", "white");

</script>
</body>

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