hamilton/calendar.html

## calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calendar - iodide</title>
<link rel="stylesheet" type="text/css" href="iodide.iodide-server.css">
</head>
<body>
<script id="jsmd" type="text/jsmd">
%% meta
{
  "title": "calendar",
  "viewMode": "presentation",
  "lastSaved": "2018-06-21T04:30:30.301Z",
  "lastExport": "2018-06-21T05:03:25.578Z"
}

%% resource
https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js

%% css
div.cal {
  max-width: 100% !important;
  width: 900px;
  margin: auto;
}

div.perc {
  font-weight:300;
  margin:auto;
  width: 400px;
  text-align:center;
}

span.perc {
  font-weight:900;
}

%% js
const DOY = (d) => {
    let st = new Date(d.getFullYear(), 0, 0);
  let diff = d - st;
  let oneDay = 1000 * 60 * 60 * 24;
  let dow = d.getDay() // x coord
  let year = d.getFullYear() - start.getFullYear()
  return Math.floor(diff / oneDay)
}

const WOY = (d) => {
  return Math.floor(DOY(d)/7)
}


d3.select('div.cal').selectAll('*').remove()

let svg = d3.select('div.cal')
	.append('svg')
	.attr('width', '1200px')
	.attr('height', '700px');

let birthday = [1985, 10-1,28]
let start = new Date(...birthday,0,0,0)
let end = new Date(...birthday,0,0,0)
end.setDate(end.getDate() + 80 * 365 + 1)
let days = d3.timeDay.range(start,end)
let TODAY = new Date()
days.forEach(d=>{
  let args = {
    top:10,
    left:10
  }
  let dow = d.getDay() // x coord
  let year = d.getFullYear() - start.getFullYear()
  let weekOfYear = WOY(d)//Math.floor(diff / oneDay / 7);
  let rectSize = 4
  svg.append('rect')
  	.attr('x', Math.floor(year / 20) * (52 * rectSize + 10) + args.left + weekOfYear * rectSize)
  	.attr('y', args.top + dow*rectSize + (year % 20) * (7 + 1) * rectSize)
  	.attr('width', rectSize-1)
  	.attr('height', rectSize-1)
  	.attr('fill', d <= TODAY ? 'gray' : 'lightgray')
})

var percentSoFar = (TODAY - start) / (80 * 365 * 24 * 60 * 60 * 1000)

%% js
let sp = d3.select('span.perc').html(d3.format(".0%")(percentSoFar))

%% md
# calendar

<div class='perc'>
  Percent lived to 80 yrs so far: <span class='perc'></span>
</div>


<div class='cal'></div>

%% js
</script>
<div id='page'></div>
<script src='iodide.iodide-server.js'></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>calendar - iodide</title>
	<link rel="stylesheet" type="text/css" href="iodide.iodide-server.css">
	</head>
	<body>
	<script id="jsmd" type="text/jsmd">
	%% meta
	{
	"title": "calendar",
	"viewMode": "presentation",
	"lastSaved": "2018-06-21T04:30:30.301Z",
	"lastExport": "2018-06-21T05:03:25.578Z"
	}

	%% resource
	https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js

	%% css
	div.cal {
	max-width: 100% !important;
	width: 900px;
	margin: auto;
	}

	div.perc {
	font-weight:300;
	margin:auto;
	width: 400px;
	text-align:center;
	}

	span.perc {
	font-weight:900;
	}

	%% js
	const DOY = (d) => {
	let st = new Date(d.getFullYear(), 0, 0);
	let diff = d - st;
	let oneDay = 1000 * 60 * 60 * 24;
	let dow = d.getDay() // x coord
	let year = d.getFullYear() - start.getFullYear()
	return Math.floor(diff / oneDay)
	}

	const WOY = (d) => {
	return Math.floor(DOY(d)/7)
	}


	d3.select('div.cal').selectAll('*').remove()

	let svg = d3.select('div.cal')
	.append('svg')
	.attr('width', '1200px')
	.attr('height', '700px');

	let birthday = [1985, 10-1,28]
	let start = new Date(...birthday,0,0,0)
	let end = new Date(...birthday,0,0,0)
	end.setDate(end.getDate() + 80 * 365 + 1)
	let days = d3.timeDay.range(start,end)
	let TODAY = new Date()
	days.forEach(d=>{
	let args = {
	top:10,
	left:10
	}
	let dow = d.getDay() // x coord
	let year = d.getFullYear() - start.getFullYear()
	let weekOfYear = WOY(d)//Math.floor(diff / oneDay / 7);
	let rectSize = 4
	svg.append('rect')
	.attr('x', Math.floor(year / 20) * (52 * rectSize + 10) + args.left + weekOfYear * rectSize)
	.attr('y', args.top + dowrectSize + (year % 20) (7 + 1) * rectSize)
	.attr('width', rectSize-1)
	.attr('height', rectSize-1)
	.attr('fill', d <= TODAY ? 'gray' : 'lightgray')
	})

	var percentSoFar = (TODAY - start) / (80 * 365 * 24 * 60 * 60 * 1000)

	%% js
	let sp = d3.select('span.perc').html(d3.format(".0%")(percentSoFar))

	%% md
	# calendar

	<div class='perc'>
	Percent lived to 80 yrs so far: <span class='perc'></span>
	</div>


	<div class='cal'></div>

	%% js
	</script>
	<div id='page'></div>
	<script src='iodide.iodide-server.js'></script>
	</body>
	</html>