Statistical Summaries

forked from SpaceActuary's block: Statistical Summaries

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;right:0;bottom:0;left:0; 
    	font-size: 14px;
      font-family: sans-serif; 
    }
    svg { margin: 0px; }
    table {
      margin: 20px;
      border-collapse: collapse;
    }

table, th, td {
      border: 1px solid black;
      padding: 5px;
    }
    rect { fill: steelblue; }
    line { stroke: #222; stroke-width: 1px; }
    circle { fill: #222; }
    
    rect.outline {
      stroke: #000000;
      stroke-width: 1px;
      fill: none;
    }
    
    text.count {
      fill: #000;
      text-anchor: end;
    }
    
    text {
      dominant-baseline: central;
    }
    
  </style>
</head>

<body>
  <script>
    console.clear()
    
    var margin = {top: 20, bottom: 20, left: 20, right: 20},
    		height = 500 - margin.top - margin.bottom, // default height
        width = 900 - margin.left - margin.right;  // default width
    
    var svg = d3.select("body").append("svg")
    						.attr("width", width + margin.left  + margin.right)
              	.attr("height", height + margin.top + margin.bottom)
    					.append("g")
    						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(mydata){
    
      mydata.forEach(function(d){
        d.count = +d.count;
        d.min = +d.min;
        d.p25 = +d.p25;
        d.median = +d.median;
        d.p75 = +d.p75;
        d.max = +d.max;
        d.mean = +d.mean;
      })
      //console.table(mydata);
      
      var maxCount = d3.max(mydata, function(d){ return d.count; }),
          minmin = d3.min(mydata, function(d){ return d.min; }),
          maxmax = d3.max(mydata, function(d){ return d.max; })
          
    	var rows = svg.selectAll("g.row").data(mydata);

countScale
          	.range([0, countWidth]);
          
          paramScale
            .range([0, paramWidth]);
					
          var gRow = d3.select(this).selectAll("g.main").data([chartData])
          
          var gRowEnter = gRow.enter().append("g").attr("class", "main")         
            gRowEnter.append("rect").attr("class", "outline")
            gRowEnter.append("text").attr("class", "level")
            gRowEnter.append("text").attr("class", "count")
            gRowEnter.append("rect").attr("class", "count")

var gParamEnter = gRowEnter.append("g").attr("class", "param")
          
          var boxPlot = MinimalBoxPlot()
              .width(paramWidth)
              .height(height)
              .xValue(paramValue)
              .xDomain(paramScale.domain())
              .xFormat(paramFormat)
          			
          var gParam = gRow.selectAll("g.param")
          		.attr("transform", "translate(" + (levelWidth+countWidth+40) + ",0)")
          		.call(boxPlot)
          
          gRow.attr("transform", "translate(" + 0 + "," + (i * (height + 5)) + ")")
							.attr("width", width)
              .attr("height", height);

var outline = gRow.selectAll("rect.outline")
              .attr("width", width )
              .attr("height", height);
          
          var countText = gRow.selectAll("text.level")
              .text(levelValue(data, i))
              .attr("transform", "translate(" + 10 + "," + (height / 2) + ")");
          
          var countText = gRow.selectAll("text.count")
              .text(countValue(data, i))
              .attr("transform", "translate(" + (levelWidth+20) + "," + (height/2) + ")");
          
          var countRect = gRow.selectAll("rect.count")
              .attr("transform", "translate(" + (levelWidth+30) + "," + (height/4) + ")")
          		.attr("height", height / 2)
          		.attr("width", countScale(countValue(data)));
          
          
        });
      }

chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
      };

chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
      };

chart.countValue = function(_) {
        if (!arguments.length) return countValue;
        countValue = _;
        return chart;
      };

chart.paramValue = function(_) {
        if (!arguments.length) return paramValue;
        paramValue = _;
        return chart;
      };
      
      chart.countFormat = function(_) {
        if (!arguments.length) return countFormat;
        countFormat = _;
        return chart;
      };

chart.paramFormat = function(_) {
        if (!arguments.length) return paramFormat;
        paramFormat = _;
        return chart;
      };
      
      chart.countDomain = function(_) {
        if (!arguments.length) return countScale.domain;
        countScale.domain(_);
        return chart;
      };

chart.paramDomain = function(_) {
        if (!arguments.length) return paramScale.domain;
        paramScale.domain(_);
        return chart;
      };
      
      return chart;
    }
    
    function MinimalBoxPlot() {
      
		  var height = 50, // default height
      		width =  400,
          xFormat = d3.format(".3f"),
          xValue = function(d, i){ return i; },
          xScale = d3.scale.linear();
    	    
      function chart(selection) {
        selection.each(function(data, i){
        
          var chartData = data;
          
          console.log(i);
          console.table([chartData]);
          
          var yExt = d3.extent(chartData, function(d){ return d.y; });

xScale.range([0, width]);
					
          var gElement = d3.select(this).selectAll("g.miniboxplot").data([chartData])
          
          var gElementEnter = gElement.enter().append("g").attr("class", "miniboxplot")
            gElementEnter.append("line").attr("class", "range")
            gElementEnter.append("line").attr("class", "p25")
            gElementEnter.append("line").attr("class", "p50")
            gElementEnter.append("line").attr("class", "p75")
            gElementEnter.append("circle").attr("class", "mean")        
          
          gElement.attr("transform", "translate(" + (0) + ",0)")
          
          // range
          var range = gElement.selectAll("line.range")
                .attr("x1", function(d){ return xScale(d.min); })
                .attr("x2", function(d){ return xScale(d.max); })
                .attr("y1", height / 2)
                .attr("y2", height / 2)

// 25th percentile
          var p25 = gElement.selectAll("line.p25")
                .attr("x1", function(d){ return xScale(d.p25); })
                .attr("x2", function(d){ return xScale(d.p25); })
                .attr("y1", 6)
                .attr("y2", height - 6)

// median
          var p50 = gElement.selectAll("line.p50")
                .attr("x1", function(d){ return xScale(d.median); })
                .attr("x2", function(d){ return xScale(d.median); })
                .attr("y1", 2)
                .attr("y2", height - 2)

// 75th percentile
          var p75 = gElement.selectAll("line.p75")
                .attr("x1", function(d){ return xScale(d.p75); })
                .attr("x2", function(d){ return xScale(d.p75); })
                .attr("y1", 6)
                .attr("y2", height - 6)
          
          // mean
          var mean = gElement.selectAll("circle.mean")
                .attr("cy", height / 2)
                .attr("cx", function(d){ return xScale(d.mean); })
                .attr("r", 5)
        });
      }

chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
      };

chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
      };

chart.xValue = function(_) {
        if (!arguments.length) return xValue;
        xValue = _;
        return chart;
      };
      
      chart.xFormat = function(_) {
        if (!arguments.length) return xFormat;
        xFormat = _;
        return chart;
      };

chart.xDomain = function(_) {
        if (!arguments.length) return xScale.domain;
        xScale.domain(_);
        return chart;
      };

return chart;
    }
    
    d3.csv("data.csv", function(mydata){
    
      mydata.forEach(function(d){
        d.count = +d.count;
        d.min = +d.min;
        d.p25 = +d.p25;
        d.median = +d.median;
        d.p75 = +d.p75;
        d.max = +d.max;
        d.mean = +d.mean;
      })
      console.table(mydata);
      
      var maxCount = d3.max(mydata, function(d){ return d.count; }),
          minmin = d3.min(mydata, function(d){ return d.min; }),
          maxmax = d3.max(mydata, function(d){ return d.max; })
        /*  
      thead.selectAll("th").data(["Group", "Count", "Range"])
         .enter().append("th")
           .html(function(d){ return d; })

var tr = tbody.selectAll("tr").data(mydata);

var trEnter = tr.enter().append("tr")

trEnter.append("td").html(function(d, i){ return i; })
      
      var countSVG = trEnter.append("td").html(function(d, i){ return d.count; })
         .append("svg")
            .attr("height", rowHeight)
      			.attr("width", barWidth)
      
      countSVG.append("rect")
            .attr("height", rowHeight)
            .attr("width", function(d){ return d3.round(d.count / maxCount * barWidth); })
      
      var rangeSVG = trEnter.append("td").append("svg")
            .attr("height", rowHeight)
      			.attr("width", rangeWidth)
      
      var rangeScale = d3.scale.linear()
            .domain([minmin, maxmax])
            .range([0, rangeWidth]);
      
      
      
      // reference
      rangeSVG.append("line")
            .attr("x1", function(d){ return rangeScale(0); })
            .attr("x2", function(d){ return rangeScale(0); })
            .attr("y1", 0)
            .attr("y2", rowHeight)
            .attr("stroke-dasharray", "2 2 2 2")
      */
    });
           
    function data(n){
      var samples = d3.range(0, n).map(function(){
        var mean = Math.random() - 0.5,
            sd = Math.random() * 3,
            x = Math.floor(Math.random() * 60) + 20,
            myrand = d3.random.normal(mean, sd);
      
        return d3.range(0, x).map(function(){ return myrand(); });
      });
      
      return samples.map(function(d){
        d = d.sort(d3.ascending)
        return [
          d.length,
          d3.quantile(d, 0),
          d3.quantile(d, 0.25),
          d3.quantile(d, 0.5),
          d3.quantile(d, 0.75),
          d3.quantile(d, 1),
          d3.mean(d)
        ]
      })
    }
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js