nelsonallende/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The life of Me</title>
    <style>

        body {
            font: 10px sans-serif;
        }

        h2 {
            margin-top: 0;
            color: black;
        }

        div.tooltip {
            position: absolute;
            text-align: center;
            width: 100px;
            height: 28px;
            padding: 2px;
            font: 12px sans-serif;
            background: lightsteelblue;
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }


    </style>
</head>
<body>

<svg width="900" height="1200"></svg>


<script src="https://d3js.org/d3.v4.js"></script>

<script>

    const margin = {top: 50, right: 50, bottom: 50, left: 50};

    const svg = d3.select("svg");
    const width = +svg.attr("width") - margin.left - margin.right;
    const height = +svg.attr("height") - margin.top - margin.bottom;

    // content area of your visualization (note: g elements do NOT have dimensions)
    const vis = svg.append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    const weeks = 52;
    const years = 90;

    const padding = 1;

    const partsOfLife = new Array();

    /** Define parts of life **/
    partsOfLife.push(new Part("Early Years", '#EF476F', weeks * 2));
    partsOfLife.push(new Part("Playgroup", '#FFD166', weeks*2));
    partsOfLife.push(new Part("Kindergarten", '#06D6A0', weeks*2));
    partsOfLife.push(new Part("Primary School", '#118AB2', weeks*6));
    partsOfLife.push(new Part("Bezirksschule", '#073B4C', weeks*3));
    partsOfLife.push(new Part("Apprenticeship", '#586BA4', weeks*4));
    partsOfLife.push(new Part("Intermediate Year", '#EEB4B3', weeks*1));
    partsOfLife.push(new Part("Studies", '#C179B9', weeks*1.5));
    partsOfLife.push(new Part("Future..?!", "lightgrey", weeks*69.5));

    /** Fill in DataArray **/
    const data = new Array();

    var counter = 0;

    for (var i = 0; i < partsOfLife.length; i++) {
        for (var j = 0; j < partsOfLife[i].duration; j++) {
            var p = partsOfLife[i];
            data[counter] = new Part(p.name, p.color, p.duration);
            data[counter].id = counter;
            counter++;
        }
    }
    console.log(data);

    /** Create scale and axes **/
    const xScale = d3.scaleBand()
        .domain(d3.range(1, weeks + 1))
        .range([0, width]);

    var t = d3.transition()
        .duration(2000)
        .ease(d3.easeLinear);

    vis.append("g").transition(t).call(d3.axisTop(xScale));

    const yScale = d3.scaleBand()
        .domain(d3.range(0, years + 1))
        .range([0, height]);

    vis.append("g").transition(t).call(d3.axisLeft(yScale));

    /** Tooltip div **/
    const div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    //    var rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0,10]); //experimental

    vis.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", d => xScale((d.id % weeks) + 1))
        .attr("y", d => yScale(Math.floor(d.id / weeks)))
        .attr("width", xScale.bandwidth())
        .attr("height", yScale.bandwidth())
        .style("fill", d => d.color)
        .style("opacity", 1)
        .style("stroke", "white")
        .on("mouseover", function (d) {
//            d3.select(this).attr("y", (yScale(Math.floor(d.id / weeks))+2)) //experimental
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.html(d.name + "<br> " + d.duration/52 + " Years")
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");

            const periodeInLife = d.name; //To keep track of the Period in Life
            d3.selectAll("rect").filter(function(d){return d.name == periodeInLife})    //filtering the period
                .style("stroke", function(d){return d3.rgb(d.color).darker(1)})         //Assigning the color for highlighting effect
                .style("fill", function(d){return d3.rgb(d.color).darker(-1)})          //Making the color lighter

        })
        .on("mouseout", function (d) {
//            d3.select(this).attr("y", yScale(Math.floor(d.id / weeks))); //experimental
            div.transition()
                .duration(500)
                .style("opacity", 0);

            d3.selectAll("rect").style("fill", function(d){return d.color}).style("stroke", "white") //Back to default parameters
        });

    /**
     * Class for life part data
     * @param name Name of part
     * @param color CSS color for part
     * @param duration Duration in weeks
     * @constructor
     */
    function Part(name, color, duration) {
        this.name = name;
        this.color = color;
        this.duration = duration;
    }

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>The life of Me</title>
	<style>

	body {
	font: 10px sans-serif;
	}

	h2 {
	margin-top: 0;
	color: black;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 100px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}


	</style>
	</head>
	<body>

	<svg width="900" height="1200"></svg>


	<script src="https://d3js.org/d3.v4.js"></script>

	<script>

	const margin = {top: 50, right: 50, bottom: 50, left: 50};

	const svg = d3.select("svg");
	const width = +svg.attr("width") - margin.left - margin.right;
	const height = +svg.attr("height") - margin.top - margin.bottom;

	// content area of your visualization (note: g elements do NOT have dimensions)
	const vis = svg.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`);

	const weeks = 52;
	const years = 90;

	const padding = 1;

	const partsOfLife = new Array();

	/ Define parts of life /
	partsOfLife.push(new Part("Early Years", '#EF476F', weeks * 2));
	partsOfLife.push(new Part("Playgroup", '#FFD166', weeks*2));
	partsOfLife.push(new Part("Kindergarten", '#06D6A0', weeks*2));
	partsOfLife.push(new Part("Primary School", '#118AB2', weeks*6));
	partsOfLife.push(new Part("Bezirksschule", '#073B4C', weeks*3));
	partsOfLife.push(new Part("Apprenticeship", '#586BA4', weeks*4));
	partsOfLife.push(new Part("Intermediate Year", '#EEB4B3', weeks*1));
	partsOfLife.push(new Part("Studies", '#C179B9', weeks*1.5));
	partsOfLife.push(new Part("Future..?!", "lightgrey", weeks*69.5));

	/ Fill in DataArray /
	const data = new Array();

	var counter = 0;

	for (var i = 0; i < partsOfLife.length; i++) {
	for (var j = 0; j < partsOfLife[i].duration; j++) {
	var p = partsOfLife[i];
	data[counter] = new Part(p.name, p.color, p.duration);
	data[counter].id = counter;
	counter++;
	}
	}
	console.log(data);

	/ Create scale and axes /
	const xScale = d3.scaleBand()
	.domain(d3.range(1, weeks + 1))
	.range([0, width]);

	var t = d3.transition()
	.duration(2000)
	.ease(d3.easeLinear);

	vis.append("g").transition(t).call(d3.axisTop(xScale));

	const yScale = d3.scaleBand()
	.domain(d3.range(0, years + 1))
	.range([0, height]);

	vis.append("g").transition(t).call(d3.axisLeft(yScale));

	/ Tooltip div /
	const div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// var rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0,10]); //experimental

	vis.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("x", d => xScale((d.id % weeks) + 1))
	.attr("y", d => yScale(Math.floor(d.id / weeks)))
	.attr("width", xScale.bandwidth())
	.attr("height", yScale.bandwidth())
	.style("fill", d => d.color)
	.style("opacity", 1)
	.style("stroke", "white")
	.on("mouseover", function (d) {
	// d3.select(this).attr("y", (yScale(Math.floor(d.id / weeks))+2)) //experimental
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div.html(d.name + "<br> " + d.duration/52 + " Years")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");

	const periodeInLife = d.name; //To keep track of the Period in Life
	d3.selectAll("rect").filter(function(d){return d.name == periodeInLife}) //filtering the period
	.style("stroke", function(d){return d3.rgb(d.color).darker(1)}) //Assigning the color for highlighting effect
	.style("fill", function(d){return d3.rgb(d.color).darker(-1)}) //Making the color lighter

	})
	.on("mouseout", function (d) {
	// d3.select(this).attr("y", yScale(Math.floor(d.id / weeks))); //experimental
	div.transition()
	.duration(500)
	.style("opacity", 0);

	d3.selectAll("rect").style("fill", function(d){return d.color}).style("stroke", "white") //Back to default parameters
	});

	/**
	* Class for life part data
	* @param name Name of part
	* @param color CSS color for part
	* @param duration Duration in weeks
	* @constructor
	*/
	function Part(name, color, duration) {
	this.name = name;
	this.color = color;
	this.duration = duration;
	}

	</script>

	</body>
	</html>