D3 Examples - wca_rightPanelHistogram

xxxxxxxxxx
 
<!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 = [116.9];
//     var rawData = [90, 199, 555, 98, 120];
//     var rawData = [0.32, 0.33, 0.45, 0.46, 0.55, 0.65, 0.64, 0.76, 0.78, 0.77, 0.79, 0.44];
//     var thisProvider = [0.75];
    
    
    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 dims = {
      frameWidth : 310,
      frameHeight : 100,
      margin : {top: 9, right: 15, bottom: 22, left: 15},
      width : function() { return this.frameWidth - this.margin.left - this.margin.right },
      height : function() { return this.frameHeight - 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
    };
​
    var barStyle = {
      'fill' : '#A75B1D',
      'stroke' : '#703d13',
      'stroke-width' : '0.75',
      'shape-rendering' : 'geometricPrecision',
      horiz_padding : 0.75,
      vert_margin: 9
    };
    
    var dotStyle = {
      'fill' : '#1A61A4',
      'stroke' : '#134b7f',
      'stroke-width' : 1.5,
      'r' : 3.5
    };
    
    var labelStyle = {
      'text-anchor' : 'middle',
      'font-size' : '6.5px',
      'font-family' : 'sans-serif',
      'fill' : '#FFFFFF',
      'text-rendering' : 'optimizeLegibility'      
    };
    
    var axisStyle = {
      'class' : 'x axis',
      'transform' : 'translate(0,' + dims.height() + ')',
      'fill' : 'none',
      'stroke' : '#979797',
      'stroke-width' : '0.75',
      'opacity' : '0.7',
      'shape-rendering' : 'geometricPrecision',
      'font-size' : '10px',
      'font-family' : 'sans-serif',
      'text-rendering' : 'optimizeLegibility'
    };
    
    //Create SVG element -- the canvas
    var canvas = d3.select("body").append("svg")
      .style('border', 'solid')
      .style('border-width', 'thin')
      .attr(canvasStyle)
      .append("g")
        .attr('transform', 'translate(' + dims.margin.left + "," + dims.margin.top + ")")
    ;
    
    //Set up x-axis scale
    var xScale = d3.scale.linear()
      .domain([xDomainMin, xDomainMax])
      .range([0, dims.width()])
      .nice()
      .clamp(true)
    ;
    
    //Generate histogram bins from dataset 
    var histoData = d3.layout.histogram()
      .bins(xScale.ticks())
      (rawData)
    ;
    
    console.log(histoData);
    
    //Set up y-axis scale, used for the height of each bar
    var yScale = d3.scale.linear()
      .domain([0, d3.max(histoData, function(d) { return d.y; })])
      .range([0, dims.height() - barStyle.vert_margin])
      .nice()
    ;
    
    //Create x-axis
    var xAxis = d3.svg.axis()
      .scale(xScale)
      .tickFormat(scaleFormat)
      .orient("bottom")
    ;
    
        //Insert x-axis
    canvas.append("g")
      .attr(axisStyle)
      .call(xAxis)
    ;
    
    //Make dot for current provider
    var dot = canvas.selectAll("circle")
    .data(thisProvider)
    .enter()
    .append("g")
    .append("circle")
    .attr("cx", function(d) {
      return xScale(d);
    })
    .attr("cy", 0)
    .attr(dotStyle)
    ;
    
    //Make bars to add to svg
    var bars = canvas.selectAll(".bar")
      .data(histoData)
      .enter()
      .append("g")
    ;
    
    //Make rects for each bar
    bars.append("rect")
      .attr("x", function(d) { //horiz positions (left of each bar)
      return xScale(d.x) + barStyle.horiz_padding;
    })
      .attr("y", function(d) { //vert positions (top of each bar)
      return dims.height() - yScale(d.y); //how far down to start drawing each bar
    })
      .attr("width", function(d) {
      return xScale(d.x + d.dx) - xScale(d.x) - 2*barStyle.horiz_padding;
    })
      .attr("height", function(d) {
      return yScale(d.y);
    })
      .attr(barStyle)
    ;
    
    //Add text labels inside each bar
    bars.append("text")
      .attr("x", function(d) {
      return xScale(d.x) + barStyle.horiz_padding;
    })
      .attr("dx", function(d) {
      return ( xScale(d.x + d.dx) - xScale(d.x) - 2*barStyle.horiz_padding ) / 2;
    })
      .attr("y", function(d) {
      return dims.height() - yScale(d.y);
    })
      .attr("dy", function(d) {
//       return (height - (height - yScale(d.y))) / 8;
      return 9;
    })
      .text(function(d) {
      return d.y;
    })
      .attr(labelStyle)
    ;
​
  </script>
</body>
​
    