lukeisontheroad · April 20, 2017 21:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style type="text/css">
    body {
        background: linear-gradient(to top, #8e9eab, #eef2f3);
        font-family: 'Roboto', sans-serif;
    }
    
    svg {
        box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }
    
    table,
    tr,
    td {
        padding: 0px;
        margin: 0px;
        border: 0px;
        -webkit-border-horizontal-spacing: 0px;
        -webkit-border-vertical-spacing: 0px;
    }
    
    table {
        width: 848px;
        height: 1458px;
        table-layout: fixed;
    }
    
    td {
        height: 16px;
        font-size: 8px;
        text-align: center;
    }
    
    .center {
        display: flex;
        justify-content: center;
    }
    
    #axis {
        position: relative;
    }
    
    #chart {
        position: absolute;
        top: 16px;
        left: 16px;
    }
    
    #tooltip {
        position: absolute;
        text-align: center;
        width: 120px;
        height: 84px;
        padding: 2px;
        font: 12px sans-serif;
        color: white;
        background: rgba(0, 0, 0, 0.7);
        border: 0px;
        border-radius: 8px;
        opacity: 0;
        z-index: 1000;
    }
    
    #child {
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left top 0;
        top: 220px;
        left: -30px;
    }
    
    #adult {
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left top 0;
        top: 660px;
        left: -30px;
    }
    
    #senior {
        position: absolute;
        transform: rotate(-90deg);
        transform-origin: left top 0;
        top: 1300px;
        left: -30px;
    }
    </style>
 </head>

 <body>
    <div id="tooltip"></div>
    <div class="center">
        <h1>Lukas's life in weeks (born 08.05.1989)</h1>
    </div>
    <div class="center">
        <div id="axis">
            <div class="legend">
                <div id="child">Child</div>
                <div id="adult">Adult</div>
                <div id="senior">Senior</div>
            </div>
            <div id="scale"></div>
            <div id="chart"></div>
        </div>
    </div>
    <script>
    var size = 16,
        fontSize = 6,
        years = 91;
    var now = new Date();
    var then = new Date("1989-05-08");
    var tooltip = d3.select("#tooltip");

    var lifeSpans = [{
        "name": "Child",
        "colorDark": '#388E3C',
        "color": '#4CAF50'
    }, {
        "name": "Adult",
        "colorDark": '#00796B',
        "color": '#009688'
    }, {
        "name": "Senior",
        "colorDark": '#283593',
        "color": '#303F9F'
    }];

    var events = [{
        "name": "Brother born",
        "date": new Date("1990-11-07"),
        "color": 'red'
    }, {
        "name": "Finished obligatory school",
        "date": new Date("2006-07-08"),
        "color": 'orange'
    }, {
        "name": "Finished apprenticeship",
        "date": new Date("2010-06-07"),
        "color": 'blue'
    }, {
        "name": "Started FHNW",
        "date": new Date("2014-09-14"),
        "color": 'yellow'
    }];

    var tbl = document.createElement('table');
    for (var i = 0; i < 92; i++) {
        var tr = tbl.insertRow();
        for (var j = 0; j <= 52; j++) {
            if (i == 0) {
                var td = tr.insertCell();
                td.appendChild(document.createTextNode((j < 1) ? '' : j));
            }

            if (i > 0 && j == 1) {
                var td = tr.insertCell();
                td.appendChild(document.createTextNode(i - 1));
            }

            if (i > 0 && j == 1) {
                var td = tr.insertCell();
                td.appendChild(document.createTextNode(''));
                td.setAttribute('colspan', '52');
            }
        }
    }
    document.getElementById('scale').appendChild(tbl);

    var getLifeSpan = function(year) {
        if (year <= 20) return lifeSpans[0];
        if (year < 60) return lifeSpans[1];
        return lifeSpans[2];
    }


    var colorGroupDark = function(year) {
        if (year <= 20) {
            return '#2E7D32';
        } else if (year <= 50) {
            return "#004D40";
        }
        return "#212121";
    }

    function isLeapYear(year) {
        var d = new Date(year, 1, 28);
        d.setDate(d.getDate() + 1);
        return d.getMonth() == 1;
    }

    Date.prototype.addDays = function(days) {
        var dat = new Date(this.valueOf());
        dat.setDate(dat.getDate() + days);
        return dat;
    }

    Date.prototype.toString = function() {
        var dat = new Date(this.valueOf());
        dat.setDate(dat.getDate());
        return dat.getDate() + '.' + (dat.getMonth() + 1) + '.' + dat.getFullYear();
    }



    var weeksSince = Math.round((now - then) / 604800000);
    var weeks = [];
    var previousYears = 0;

    for (var year = 0; year < years; year++) {
        for (var week = 0; week < 52; week++) {
            var from = then.addDays(previousYears + week * 7);
            var to = then.addDays(previousYears + (week + 1) * 7);
            weeks.push({
                "from": from,
                "to": to,
                "x": week * size,
                "y": year * size,
                "week": week + 1,
                "year": year,
                "past": from < new Date(),
                "lifeSpan": getLifeSpan(year),
                "event": events.filter((e) => e.date < to && e.date > from)
            });
        }
        previousYears += isLeapYear(year) ? 366 : 365;
    }


    d3.select("#chart")
        .append("svg")
        .attr('height', years * size)
        .attr('width', 52 * size)
        .selectAll("rect")
        .data(weeks)
        .enter()
        .append("rect")
        .attr("width", size)
        .attr("height", size)
        .attr("x", (d) => d.x)
        .attr("y", (d) => d.y)
        .style("stroke", 'black')
        .style("stroke-width", 1)
        .style("stroke-opacity", .1)
        .style("fill", (d) => (d.event.length > 0)? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
        .on("mouseover", function(d) {
            d3.select(this)
                .style("fill", colorGroupDark(d.year))
                .style("stroke-opacity", 0.3);

            tooltip.transition()
                .duration(200)
                .style("opacity", .9);

            tooltip.html('Week: ' + d.week + '<br/>Age: ' + d.year + '<br>From: ' + d.from + '<br/>To: ' + d.to + '<br/>Event: ' + ((d.event.length > 0)? d.event[0].name: '<br/>Kein Event'))
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 70) + "px");
        })
        .on("mouseout", function(d) {
            d3.select(this)
                .transition()
                .duration(500)
                .style("fill", (d) => (d.event.length > 0)? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
                .style("stroke-width", 1)
                .style("stroke-opacity", .1);
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	body {
	background: linear-gradient(to top, #8e9eab, #eef2f3);
	font-family: 'Roboto', sans-serif;
	}

	svg {
	box-shadow: 0px 0px 40px 5px rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	}

	table,
	tr,
	td {
	padding: 0px;
	margin: 0px;
	border: 0px;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	}

	table {
	width: 848px;
	height: 1458px;
	table-layout: fixed;
	}

	td {
	height: 16px;
	font-size: 8px;
	text-align: center;
	}

	.center {
	display: flex;
	justify-content: center;
	}

	#axis {
	position: relative;
	}

	#chart {
	position: absolute;
	top: 16px;
	left: 16px;
	}

	#tooltip {
	position: absolute;
	text-align: center;
	width: 120px;
	height: 84px;
	padding: 2px;
	font: 12px sans-serif;
	color: white;
	background: rgba(0, 0, 0, 0.7);
	border: 0px;
	border-radius: 8px;
	opacity: 0;
	z-index: 1000;
	}

	#child {
	position: absolute;
	transform: rotate(-90deg);
	transform-origin: left top 0;
	top: 220px;
	left: -30px;
	}

	#adult {
	position: absolute;
	transform: rotate(-90deg);
	transform-origin: left top 0;
	top: 660px;
	left: -30px;
	}

	#senior {
	position: absolute;
	transform: rotate(-90deg);
	transform-origin: left top 0;
	top: 1300px;
	left: -30px;
	}
	</style>
	</head>

	<body>
	<div id="tooltip"></div>
	<div class="center">
	<h1>Lukas's life in weeks (born 08.05.1989)</h1>
	</div>
	<div class="center">
	<div id="axis">
	<div class="legend">
	<div id="child">Child</div>
	<div id="adult">Adult</div>
	<div id="senior">Senior</div>
	</div>
	<div id="scale"></div>
	<div id="chart"></div>
	</div>
	</div>
	<script>
	var size = 16,
	fontSize = 6,
	years = 91;
	var now = new Date();
	var then = new Date("1989-05-08");
	var tooltip = d3.select("#tooltip");

	var lifeSpans = [{
	"name": "Child",
	"colorDark": '#388E3C',
	"color": '#4CAF50'
	}, {
	"name": "Adult",
	"colorDark": '#00796B',
	"color": '#009688'
	}, {
	"name": "Senior",
	"colorDark": '#283593',
	"color": '#303F9F'
	}];

	var events = [{
	"name": "Brother born",
	"date": new Date("1990-11-07"),
	"color": 'red'
	}, {
	"name": "Finished obligatory school",
	"date": new Date("2006-07-08"),
	"color": 'orange'
	}, {
	"name": "Finished apprenticeship",
	"date": new Date("2010-06-07"),
	"color": 'blue'
	}, {
	"name": "Started FHNW",
	"date": new Date("2014-09-14"),
	"color": 'yellow'
	}];

	var tbl = document.createElement('table');
	for (var i = 0; i < 92; i++) {
	var tr = tbl.insertRow();
	for (var j = 0; j <= 52; j++) {
	if (i == 0) {
	var td = tr.insertCell();
	td.appendChild(document.createTextNode((j < 1) ? '' : j));
	}

	if (i > 0 && j == 1) {
	var td = tr.insertCell();
	td.appendChild(document.createTextNode(i - 1));
	}

	if (i > 0 && j == 1) {
	var td = tr.insertCell();
	td.appendChild(document.createTextNode(''));
	td.setAttribute('colspan', '52');
	}
	}
	}
	document.getElementById('scale').appendChild(tbl);

	var getLifeSpan = function(year) {
	if (year <= 20) return lifeSpans[0];
	if (year < 60) return lifeSpans[1];
	return lifeSpans[2];
	}


	var colorGroupDark = function(year) {
	if (year <= 20) {
	return '#2E7D32';
	} else if (year <= 50) {
	return "#004D40";
	}
	return "#212121";
	}

	function isLeapYear(year) {
	var d = new Date(year, 1, 28);
	d.setDate(d.getDate() + 1);
	return d.getMonth() == 1;
	}

	Date.prototype.addDays = function(days) {
	var dat = new Date(this.valueOf());
	dat.setDate(dat.getDate() + days);
	return dat;
	}

	Date.prototype.toString = function() {
	var dat = new Date(this.valueOf());
	dat.setDate(dat.getDate());
	return dat.getDate() + '.' + (dat.getMonth() + 1) + '.' + dat.getFullYear();
	}



	var weeksSince = Math.round((now - then) / 604800000);
	var weeks = [];
	var previousYears = 0;

	for (var year = 0; year < years; year++) {
	for (var week = 0; week < 52; week++) {
	var from = then.addDays(previousYears + week * 7);
	var to = then.addDays(previousYears + (week + 1) * 7);
	weeks.push({
	"from": from,
	"to": to,
	"x": week * size,
	"y": year * size,
	"week": week + 1,
	"year": year,
	"past": from < new Date(),
	"lifeSpan": getLifeSpan(year),
	"event": events.filter((e) => e.date < to && e.date > from)
	});
	}
	previousYears += isLeapYear(year) ? 366 : 365;
	}


	d3.select("#chart")
	.append("svg")
	.attr('height', years * size)
	.attr('width', 52 * size)
	.selectAll("rect")
	.data(weeks)
	.enter()
	.append("rect")
	.attr("width", size)
	.attr("height", size)
	.attr("x", (d) => d.x)
	.attr("y", (d) => d.y)
	.style("stroke", 'black')
	.style("stroke-width", 1)
	.style("stroke-opacity", .1)
	.style("fill", (d) => (d.event.length > 0)? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
	.on("mouseover", function(d) {
	d3.select(this)
	.style("fill", colorGroupDark(d.year))
	.style("stroke-opacity", 0.3);

	tooltip.transition()
	.duration(200)
	.style("opacity", .9);

	tooltip.html('Week: ' + d.week + '<br/>Age: ' + d.year + '<br>From: ' + d.from + '<br/>To: ' + d.to + '<br/>Event: ' + ((d.event.length > 0)? d.event[0].name: '<br/>Kein Event'))
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 70) + "px");
	})
	.on("mouseout", function(d) {
	d3.select(this)
	.transition()
	.duration(500)
	.style("fill", (d) => (d.event.length > 0)? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
	.style("stroke-width", 1)
	.style("stroke-opacity", .1);
	});
	</script>
	</body>

	</html>