Histogram of JS Bytes from HTTP Archive

by rviscomi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

class Bin {
	constructor(data) {
    this.client = data.client;
  	this.bin = +data.bin;
    this.volume = +data.volume;
    this.pdf = +data.pdf;
    this.cdf = +data.cdf;
  }
  
  toPoint() {
  	return [this.bin, this.volume];
  }
  
  toCdfPoint() {
  	return [this.bin, this.cdf * 100];
  }
  
  add(bin) {
  	this.volume += bin.volume;
    this.pdf += bin.pdf;
    this.cdf = Math.max(this.cdf, bin.cdf);
  }
  
  clone() {
  	return new Bin({
    	client: this.client,
      bin: this.bin,
      volume: this.volume,
      pdf: this.pdf,
      cdf: this.cdf
    });
  }
}

const ranksUrl = 'https://storage.googleapis.com/http-archive-beta.appspot.com/imgSavingsHistogram.json';
fetch(ranksUrl)
	.then(response => response.text())
  .then(nljson => `[${nljson.replace(/\n/g, ',')}]`)
  .then(jsonStr => JSON.parse(jsonStr))
	.then(data => {
  data = data.map((data) => new Bin(data));
  
  let outliers = null;
  let desktop = data.filter(({client}) => client=='desktop').reduce((data, current) => {
  	if (current.cdf < 0.95) data.push(current);
    else if (outliers) outliers.add(current);
    else outliers = current;
    return data;
  }, []);
  const desktopOutliers = outliers.clone();
  outliers = null;
  let mobile = data.filter(({client}) => client=='mobile').reduce((data, current) => {
  	if (current.cdf < 0.95) data.push(current);
    else if (outliers) outliers.add(current);
    else outliers = current;
    return data;
  }, []);
  let desktopCDF = desktop.map(data => data.toCdfPoint());
  desktopCDF.push(desktopOutliers.toCdfPoint());
  let mobileCDF = mobile.map(data => data.toCdfPoint());
  mobileCDF.push(outliers.toCdfPoint());
  const series = [{
  	data: desktop.map((data) => data.toPoint()),
    pointPadding: 0,
    groupPadding: 0,
    pointPlacement: 'between',
    name: 'Desktop'
  },{
  	data: mobile.map((data) => data.toPoint()),
    pointPadding: 0,
    groupPadding: 0,
    pointPlacement: 'between',
    name: 'Mobile'
  },{
  	data:...