SpaceActuary/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

d3-dsv - parse tab-separated values
d3-format - number formatting
d3-scale - position encodings
d3-array - data processing
d3-axis - axes

forked from mbostock's block: Bar Chart

  
## data.tsv

          
            letter
            frequency

            
              A
              .08167

            
              B
              .01492

            
              C
              .02782

            
              D
              .04253

            
              E
              .12702

            
              F
              .02288

            
              G
              .02015

            
              H
              .06094

            
              I
              .06966

            
              J
              .00153

            
              K
              .00772

            
              L
              .04025

            
              M
              .02406

            
              N
              .06749

            
              O
              .07507

            
              P
              .01929

            
              Q
              .00095

            
              R
              .05987

            
              S
              .06327

            
              T
              .09056

            
              U
              .02758

            
              V
              .00978

            
              W
              .02360

            
              X
              .00150

            
              Y
              .01974

            
              Z
              .00074

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

.bar {
  fill: steelblue;
  stroke: steelblue;
  stroke-width: 3px;
}

.bar:hover {
  fill: brown;
}

.axis--x text {
  display: none;
}

  table {
    display: absolute;
    top: 50;
    left: 500;
  }

  td {
    text-align: right;
    vertical-align: bottom;
  }

  th {
    text-align: left;
    vertical-align: bottom;
  }
</style>
<svg width="960" height="500"></svg>
<table>
  <tr><th>Layer</th><td>Current<br/>Value</td><td>Mean</td><td>Std Dev</td><td>C.V.</td></tr>
  <tr class='tot-sum'><th>Total</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr class='ltd-sum'><th>Limited</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr class='xs-sum'><th>Excess</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr> </tr>

</table>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 30},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var mu = Math.log(800),
    sigma = 2.5,
    retention = 500e3

var numberFormat = d3.format(',.2s')

var capped = function(x){ return Math.min(x, retention); }

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  y.domain([0, 2e6]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).tickSize(0));

  g.append("g")
      .attr("class", "axis axis--y")
      .attr("transform", "translate(" + margin.left + ",0)")
      .call(d3.axisLeft(y).ticks(3, ".1s"))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Claim Severity");

   g.append("g")
      .attr("class", "tot-sum")
      .attr("transform", "translate(" + (0.5 * width - margin.right) + "," + margin.top + ")")
    .append("text")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")

   g.append("g")
      .attr("class", "ltd-sum")
      .attr("transform", "translate(" + (0.5 * width - margin.right) + "," + (2 * margin.top) + ")")
    .append("text")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")

   g.append("g")
      .attr("class", "xs-sum")
      .attr("transform", "translate(" + (0.5 * width - margin.right) + "," + (3 * margin.top) + ")")
    .append("text")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")

var totals = [], limiteds = [], excesses = [];

var resample = function(n) {

  var samples = d3.range(n).map(function(i){ return jStat.lognormal.sample(mu, sigma); })

  totals.unshift(d3.sum(samples));
  limiteds.unshift(d3.sum(samples, capped));
  excesses.unshift(totals[0] - limiteds[0]);

  console.log(totals[0], limiteds[0], excesses[0])
  x.domain(d3.range(n));

  var lines = g.selectAll(".bar")
    .data(samples)

  var t = d3.transition().duration(1000)

  var textTween = function(newVal) {
    	var that = d3.select(this);
    	var oldVal = that.attr('data-value') || 0;
      var i = d3.interpolateNumber(oldVal, newVal);
      return function(t) {
        that.text(numberFormat(i(t)));
      };
    }

  lines.enter().append("line")
      .attr("class", "bar")
      .attr("x1", function(d, i) { return x(i); })
      .attr("x2", function(d, i) { return x(i); })
      .attr("y1", function(d) { return height; })
      .attr("y2", function(d) { return height; })
  .merge(lines).transition(t)
      .attr("y1", function(d) { return y(d); })
      .attr("y2", function(d) { return height; });

  var summary3 = function(data){
    return [
      data[0],
      d3.mean(data),
      (data.length < 2) ? 0 : Math.sqrt(d3.variance(data)),
    	(data.length < 2) ? 0 : Math.sqrt(d3.variance(data)) / d3.mean(data)
    ];
  }

  var totalData = summary3(totals);
  var limitedData = summary3(limiteds);
  var excessData = summary3(excesses);


  console.log("totalData", totalData)
  d3.selectAll('.tot-sum td').data(totalData)
    .transition(t)
    	.tween("text", textTween)
    	.attr('data-value', (d) => { return d; })

  d3.selectAll('.ltd-sum td').data(limitedData)
    .transition(t)
    	.tween("text", textTween)
    	.attr('data-value', (d) => { return d; })

  d3.selectAll('.xs-sum td').data(excessData)
    .transition(t)
    	.tween("text", textTween)
    	.attr('data-value', (d) => { return d; })

  //console.log('[' + data.map(d3.format(".2f")).join(",") + ']')

  if (totals.length < 50) setTimeout(function() { resample(n); }, 2500);
  console.log(totals.length)
};

  resample(420);

</script>
	letter	frequency
	A	.08167
	B	.01492
	C	.02782
	D	.04253
	E	.12702
	F	.02288
	G	.02015
	H	.06094
	I	.06966
	J	.00153
	K	.00772
	L	.04025
	M	.02406
	N	.06749
	O	.07507
	P	.01929
	Q	.00095
	R	.05987
	S	.06327
	T	.09056
	U	.02758
	V	.00978
	W	.02360
	X	.00150
	Y	.01974
	Z	.00074
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	}

	.bar {
	fill: steelblue;
	stroke: steelblue;
	stroke-width: 3px;
	}

	.bar:hover {
	fill: brown;
	}

	.axis--x text {
	display: none;
	}

	table {
	display: absolute;
	top: 50;
	left: 500;
	}

	td {
	text-align: right;
	vertical-align: bottom;
	}

	th {
	text-align: left;
	vertical-align: bottom;
	}
	</style>
	<svg width="960" height="500"></svg>
	<table>
	<tr><th>Layer</th><td>Current<br/>Value</td><td>Mean</td><td>Std Dev</td><td>C.V.</td></tr>
	<tr class='tot-sum'><th>Total</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
	<tr class='ltd-sum'><th>Limited</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
	<tr class='xs-sum'><th>Excess</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
	<tr> </tr>

	</table>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jstat/1.5.0/jstat.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 30},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
	y = d3.scaleLinear().rangeRound([height, 0]);

	var mu = Math.log(800),
	sigma = 2.5,
	retention = 500e3

	var numberFormat = d3.format(',.2s')

	var capped = function(x){ return Math.min(x, retention); }

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	y.domain([0, 2e6]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).tickSize(0));

	g.append("g")
	.attr("class", "axis axis--y")
	.attr("transform", "translate(" + margin.left + ",0)")
	.call(d3.axisLeft(y).ticks(3, ".1s"))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Claim Severity");

	g.append("g")
	.attr("class", "tot-sum")
	.attr("transform", "translate(" + (0.5 * width - margin.right) + "," + margin.top + ")")
	.append("text")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")

	g.append("g")
	.attr("class", "ltd-sum")
	.attr("transform", "translate(" + (0.5 * width - margin.right) + "," + (2 * margin.top) + ")")
	.append("text")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")

	g.append("g")
	.attr("class", "xs-sum")
	.attr("transform", "translate(" + (0.5 * width - margin.right) + "," + (3 * margin.top) + ")")
	.append("text")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")

	var totals = [], limiteds = [], excesses = [];

	var resample = function(n) {

	var samples = d3.range(n).map(function(i){ return jStat.lognormal.sample(mu, sigma); })

	totals.unshift(d3.sum(samples));
	limiteds.unshift(d3.sum(samples, capped));
	excesses.unshift(totals[0] - limiteds[0]);

	console.log(totals[0], limiteds[0], excesses[0])
	x.domain(d3.range(n));

	var lines = g.selectAll(".bar")
	.data(samples)

	var t = d3.transition().duration(1000)

	var textTween = function(newVal) {
	var that = d3.select(this);
	var oldVal = that.attr('data-value') \|\| 0;
	var i = d3.interpolateNumber(oldVal, newVal);
	return function(t) {
	that.text(numberFormat(i(t)));
	};
	}

	lines.enter().append("line")
	.attr("class", "bar")
	.attr("x1", function(d, i) { return x(i); })
	.attr("x2", function(d, i) { return x(i); })
	.attr("y1", function(d) { return height; })
	.attr("y2", function(d) { return height; })
	.merge(lines).transition(t)
	.attr("y1", function(d) { return y(d); })
	.attr("y2", function(d) { return height; });

	var summary3 = function(data){
	return [
	data[0],
	d3.mean(data),
	(data.length < 2) ? 0 : Math.sqrt(d3.variance(data)),
	(data.length < 2) ? 0 : Math.sqrt(d3.variance(data)) / d3.mean(data)
	];
	}

	var totalData = summary3(totals);
	var limitedData = summary3(limiteds);
	var excessData = summary3(excesses);


	console.log("totalData", totalData)
	d3.selectAll('.tot-sum td').data(totalData)
	.transition(t)
	.tween("text", textTween)
	.attr('data-value', (d) => { return d; })

	d3.selectAll('.ltd-sum td').data(limitedData)
	.transition(t)
	.tween("text", textTween)
	.attr('data-value', (d) => { return d; })

	d3.selectAll('.xs-sum td').data(excessData)
	.transition(t)
	.tween("text", textTween)
	.attr('data-value', (d) => { return d; })

	//console.log('[' + data.map(d3.format(".2f")).join(",") + ']')

	if (totals.length < 50) setTimeout(function() { resample(n); }, 2500);
	console.log(totals.length)
	};

	resample(420);

	</script>