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.js"></script>
    <style type="text/css">
    body {
        background: linear-gradient(to top, #8e9eab, #eef2f3);
        font-family: 'Roboto', sans-serif;
    }
    
    .center {
        display: flex;
        justify-content: center;
    }
    
    #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;
    }
    </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="chart"></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 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;
    }

    var margin = {
        top: 25,
        right: 25,
        bottom: 25,
        left: 25
    };

    var xScale = d3.scaleLinear()
        .domain([0, 53])
        .range([0, 52 * size]);

    var yScale = d3.scaleLinear()
        .domain([0, 91])
        .range([0, 91 * size]);

    var svg = d3.select("#chart")
        .append("svg")
        .attr('height', years * size + margin.top + margin.bottom)
        .attr('width', 52 * size + margin.left + margin.right)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`)
        .append("g").call(d3.axisTop(xScale))
        .append("g").call(d3.axisLeft(yScale))
        .selectAll("node")
        .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)
        .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);
        })
        .style("fill", (d) => (d.event.length > 0) ? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
    </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.js"></script>
	<style type="text/css">
	body {
	background: linear-gradient(to top, #8e9eab, #eef2f3);
	font-family: 'Roboto', sans-serif;
	}

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

	#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;
	}
	</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="chart"></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 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;
	}

	var margin = {
	top: 25,
	right: 25,
	bottom: 25,
	left: 25
	};

	var xScale = d3.scaleLinear()
	.domain([0, 53])
	.range([0, 52 * size]);

	var yScale = d3.scaleLinear()
	.domain([0, 91])
	.range([0, 91 * size]);

	var svg = d3.select("#chart")
	.append("svg")
	.attr('height', years * size + margin.top + margin.bottom)
	.attr('width', 52 * size + margin.left + margin.right)
	.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`)
	.append("g").call(d3.axisTop(xScale))
	.append("g").call(d3.axisLeft(yScale))
	.selectAll("node")
	.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)
	.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);
	})
	.style("fill", (d) => (d.event.length > 0) ? d.event[0].color : (d.from > now) ? getLifeSpan(d.year).color : getLifeSpan(d.year).colorDark)
	</script>
	</body>

	</html>