CVCM

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    
    <style>         
/*
        *{
        border: 1px solid orange !important;
        }
*/
/*
        To fix/add:
        - hardcoded foh in yc array (because ems --> pix)
        - lineheight in foreign object
        - font scaling less dramatic
        - css separated
        - add details on hover?
        - make it visible on phones
        
        LAYOUT FEEDBACK:
        - instead of arrows pointing to events, maybe a thin line (Robby suggestion)
        - arrange categories better
*/
            
        body{
            font-family: 'Lato', sans-serif;
            font-size:100%; /* flexible baseline  - commonly 16px. Then, as example, 1.25em will result in 20px */
            font-weight: 300;
            margin:0;
            height: 100vh; /*30em; /*500px;*/
            width: 100vw; /*full width of screen*/  /*width:1500px;*/
            overflow-y: hidden;
        }
                
        #wrapper {
            width:100vw;
            height:100vh;
            display:block;
            }
        
        #CVheader {
            height: 10%; /*6em; /*90px;*/
            width: 100%;
/*            background-color:"red";*/
/*            padding-top: .2em; 4px;*/
/*            overflow:auto;*/
            }
        
                #headerleft {
                    width:9em; /*300px;*/
                    height:1.3em;/*40px;*/
                    float:left;
                    position:absolute;
                    color:"black";
                    background-color:#e0e0d9;
                    text-align: center;
                    border-radius: 2em; /*25px;*/
                    }

#headerright {
                    width:10em; /*320px;*/
                    height:1.3em;/*40px;*/
                    float:right;
                    text-align: center;
                    position:absolute;
                    right: 0;
                    color:#716c6c;
/*                    border: 3px solid white;*/
                    background-color:#444;
                    border-radius: 2em; /*25px;*/
                     }

/*                #headerright:hover {
                      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
                      transform: translate3d(0, 0, 0);
                      backface-visibility: hidden;
                      perspective: 1000px;
                    }
*/
                .hoverclass {
                      animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
                      transform: translate3d(0, 0, 0);
                      backface-visibility: hidden;
/*                      perspective: 1px;*/
                }

@keyframes shake {
                    10%, 90% {
                        transform: translate3d(-2px, 1px, 0);
                    }
                    20%, 80% {
                        transform: translate3d(2px, -1px, 0);
                    }
                      30%, 50%, 70% {
                        transform: translate3d(-4px, 3px, 0);
                      }
                      40%, 60% {
                        transform: translate3d(4px, 2px, 0);
                      }
                    }
        
        #content {
            height:85%; 
/*            min-height: 80%;*/
            }
        
        #lifeline {
                width:100vw; /* ensures it stretches the full width of the page */
                height:90%; 
            }

.category_buttons {
              height: 2em; /*height of whole section*/
              display: -webkit-flex;
              display:         flex;
              -webkit-align-items: top;
                      align-items: top;
              -webkit-justify-content: center;
                      justify-content: center;
         }

div.category_buttons div {
                width: 8em;
                height:1.1em;
                line-height: 1.1em; /*needed for vertical align*/
                vertical-align: middle;
                text-align: center;
                background-color: white;
                padding: .3em;
                margin-left: 1em;
                margin-right: 1em;
                border-radius: 2em;
                border:1px solid #9d9999;
                color:#444;
                font-weight: 100
            }    
        
        div.category_buttons > div:first-of-type { /*select first button "all", to be diff color*/
                background-color: rgb(247, 230, 210);
            }    
        
        #footer {
            text-align: center;
            font-size: .7em;
            width:100vw;
	        height:5%; /*2.5em;*/
            line-height: 2.5sem; 
            vertical-align: bottom;
	        bottom:0;
            }
    
        #rotatediv {
            display:flex;
            background-color:#6d6c6c;
            display: block;
            height: 100%;
            width: 100%;
            font-size: 4em;
            color: "white";
/*            float:center;*/
            text-align: center;
            position:fixed;
            color:rgb(247, 230, 210);
            vertical-align:middle;
            }
        
        h2 {
            margin-left: 1em; /*15px;*/
            margin-right: 1em; /*15px;*/
            margin-bottom: 1em; /*15px;*/           
            font-size: 2em;
        }
        
        h3{
            margin-left: 1em;/*15px;*/
            margin-top: 0em;
            font-weight: 100;
            font-size: 1em;
            }
       
        h2CV {
            margin-bottom: .06em;        
            font-size: 1em; /*12px;*/
            line-height: .6em;
            font-weight: 400;
            color: "black";
        }
        
        h3CV {
            margin-top: 0em;
            font-weight: 100;
            font-size: .8em; /*10px;*/
/*            line-height: 10em;*/
            color: "black";
            }

a {
            color:#494949;
            text-decoration:none;
            }
        
        a:hover {
            font-weight: 400;
            }
    
        .lefty {text-align: left !important;}
        .centry {text-align: center !important;}
        .righty {text-align: right !important;}
        
        .lifelinetext{
            display:none;
            }
        
/* # info was needed for mouse position testing*/
/*
     #info {
         position: absolute;
         bottom: 10px;
         right: 10px;
         background-color: black;
         color: white;
         padding: 25px 50px;
        }
*/
        
    /*-------CATCH ROTATED SMART PHONES AND SCREENS -----------*/

/* for non rotated screens: do not show rotation message */
        #rotatediv {display: none;}

/* only when orientation is in portrait mode: */
        @media screen and (orientation:portrait) {
            #content {display: none;}
            #rotatediv {display: flex;}
        }

/*-------CATCH for iPHONES where body width = "vh" gives problems... -----------*/

/** iPad with landscape orientation. */
    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
      body {
    /*    width:2*1024px; always times 2--> visualization is twice width!*/
      }
    }

/** iPhone 5  */  /*@media screen and (device-aspect-ratio: 40/71) {*/
        @media screen and (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
        body {
    /*    width:2*568px; always times 2--> visualization is twice width!*/
          }
        }
</style>
    
<script>

// MAIN DRAW CVCM FUNCTION!
    function draw(data){

var environment = "CV"; // to ensure colorcodings match the CV or CM page
        
    //Width and height of CV visualization
        var w = 2*window.screen.availWidth; //because the visualization is spread over two lengths of the window!
        var h = 1/2*window.screen.availHeight;

var margin = {top: 0, right: 0, bottom: 0, left:0};
         width = w - margin.left - margin.right;
         height = h - margin.top - margin.bottom;
//        window.width = w - margin.left - margin.right;
//        window.height = h - margin.top - margin.bottom;
    
    //Sizing variables for lifeline visualization
        var arrowlinewidth = 5;
        var arrowlineheight = 60;
        var arrowheadbasewidth = 15;
        var arrowheadlength = 15;
        var arrowtextdistance = 5;
        
        var lifelineheight = ".7em";
        var relypos = 4/9; // where life line will be drawn on y axes 
        var lifelinemarginL = 40; // margin space at start of life line    
        var lifelinemarginR = 100; // margin space at end of life line

// Find full domains of input data
          var lifeline_extent = d3.extent(data,function(d){
              return d['age'];
          });
            var arrowheight_extent = d3.extent(data,function(d){
              return d['arrowheight'];
          });
        
        //Setting scales    
        var xScale = d3.scale.linear()
                        .domain(lifeline_extent)
                        .range([lifelinemarginL, width-lifelinemarginR]);
                        
        var yScale = d3.scale.linear()
                        .domain(arrowheight_extent)
                        .range([0, height]);

//xScale(#years) --> # pixels on time axes
                            //xScale.invert(#pixels) --> #years
                            //xScale.invert(lifelinemargin) --> 0 years (born)
                            //xScale.invert(0) --> -1.3670886075 years (margin on left side, in years)    
        
//Create SVG element that holds the CV
        var svg = d3.select("body").select("#content")
                    .append("svg")
                    .attr("id","lifeline")
                    .attr("width", .5*width)
                    .attr("height", height)
                    .attr("viewBox", "0 0 "+.52*width+" "+height+"")
                    
         
//Create one large horizontal life-line
        var lifeline = svg.append("rect")
              .attr("x", 0)
              .attr("y", relypos*height)
              .attr("width", width) //line across full length of div!
              .attr("height", lifelineheight)
              .attr("fill", "#716c6c"); 
            
// CREATE ARROW GROUPS at AGE LOCATIONS 
        var lifearrows = svg.append("g")
                                 .attr("id","lifearrows");
        
        var arrows = lifearrows.selectAll("g")
                                 .data(data) //when I add: function(d){return d.age;},arrows at same age go missing
                                 .enter()
                                 .append("g")
                                 .attr("transform", function(d) { return "translate(" + xScale(d.age) + ",0)" ;} )  
                                 .attr("class","arrow")
                                 .attr("id", function(d, i) { return ("arrow" + d.index); })

arrows.append("rect")
                    .attr("width", arrowlinewidth)
                    .attr("height", arrowlineheight)
                    .attr("x", 0)
                    .attr("y", relypos*height)
                    .attr("height", function(d) { return d.arrowheight; })
                    .attr("fill", "#716c6c")                
            
                arrows.append("path")
                    .attr('d', function(d) { 
                        var x = - .5*arrowheadbasewidth + .5*arrowlinewidth;
                        var y = relypos*height + d.arrowheight; // starting coord. of triangle
                        var lr = arrowheadbasewidth, ld = arrowheadlength, ll = -.5*arrowheadbasewidth; 
                        return 'M ' + x +' '+ y + ' l ' + lr + ' 0 l ' + ll + ' ' + ld + ' z';
                    })
                    .attr("stroke", "#716c6c")
                    .attr("stroke-width", 2)
                    .attr("fill", "#716c6c")                                                                  
         
        // interaction with arrows:
        function arrowclick(d3Element){ 
            console.log("you clicked an arrow")
            lt = d3.selectAll(".lifelinetext")
            var curelement = +d3Element.__data__.index;
            };
        
        function arrowmouseover(d3Element){ 
//            d3Element.style.cursor = "pointer";
            lt = lifelinetextgroup.selectAll(".lifelinetext")
            var curelement = +d3Element.__data__.index;
            console.log(curelement)
            lt[0][curelement].style.display="flex"
            };
        
        function arrowmouseout(d3Element){ 
//            d3Element.style.cursor = "default";
            lt = lifelinetextgroup.selectAll(".lifelinetext")
            var curelement = +d3Element.__data__.index;
            console.log(curelement)
            
            lt[0][curelement].style.display="none"
            };
        
      arrows.on("mouseover", function(d) { arrowmouseover(this); })
            .on("mouseout", function(d) { arrowmouseout(this); })  
            .on("click", function() { arrowclick(this); }) 
          
                
// ROTATE ARROWS WHERE INDICATED      
 for(var i=0; i<data.length ; i++){                
     if(data[i].direction === "up"){  // NEW: use data on arrow direction: if data.direction == up, flip arrow;   
        var selection = d3.select("#arrow" + data[i].index +"");
        selection.attr("transform", function(d) { return "rotate(-180,0,"+ relypos*height + ") translate(-"+xScale(data[i].age)+",0)";} )
        }
        };
        
        
// Create text labels for all events using FOREIGNOBJECT
var textgroup = svg.append("g")
                   .attr("id","textgroup");
            
// Calculate forgeign object box sizes:
    var foh = "10em"; // ems - foreign object height can be large, it is the outside box only 
    var fow = 210; // pixels - foreign object width can be large, it is the outside box only 
    var bleedoverleft = 1; // years - x-position of text boxes in years, left of the actual event
    var fotwmax = 2.8; // years - maximum width of foreign object text label boxes
    var fotwmin = fotwmax-.2; // years - minimum width of foreign object text label boxes
        
// 1. calculate space between the current event's year and the prior and after event
    //xScale.invert(#pixels) --> zero point is margin: "prior to born" in #years 
    var dyears = [Math.abs(xScale.invert(0))];  
    for(var i=1; i < data.length; i++){
        var obj = data[i].age - data[i-1].age;
        dyears.push(obj);
        }    
    //xScale.invert(#pix) -> #years after the very last lifeline event     
    dyears[dyears.length] = xScale.invert(width)-data[data.length-1].age;

// 2. determine x and y-coordinate current event text box in YEARS
    var xc = [], yc = [];     
    for(var i=0; i < dyears.length-1; i++){ 
        // if there is >bleedoverleft years on the left side of the event:
            if(dyears[i] > bleedoverleft){
                var xct = data[i].age - bleedoverleft; //fixed amount to the left of arrow
                var yct = relypos*height + data[i].arrowheight + arrowheadlength + arrowtextdistance;
            }
        // if there is 1 < X < bleedover years on the left side of the event:
            if(dyears[i] <= bleedoverleft & dyears[i] > 0){ // >0 because first entry has negatiev years
                var xct = data[i].age - dyears[i]; 
                var yct = relypos*height + data[i].arrowheight + arrowheadlength + arrowtextdistance;
            }
            xc.push(xct);
            yc.push(yct);
    }    
    // Adjust x coodinate list manually:    
        // change first x coordinate
        xc[0]=-.7*bleedoverleft;
        // add a last element of xc and yc vector to ensure math goes well: indicates the end of the timeline:
        xc[xc.length]=xScale.invert(width)-.9;
        yc[yc.length]=yScale.invert(relypos*height);

// 3. foreign object text box width (fotw) --> determine width & position for current event text box in YEARS
    var fotw = [];
    for(var i=0; i<dyears.length-1; i++){                
        var obj = (xc[i+1] - xc[i]);
        fotw.push(obj);
    }
    
    // manually adjust width of label positions:
        fotw[fotw.length-2] = fotw[fotw.length-2]-11;  // width of one before last one
        
        fotw[fotw.length-1] = fotw[fotw.length-1]-2;  // width of last one (death)
        xc[xc.length-1]=[fotw.length-1]-1.8;//+xScale.invert(0);
        
//        debugger;
        
        fotw[4]=2.4;    // one too small one
        fotw[5]=2.6;    // one too small one
        xc[4]=xc[4]-1.8;//+xScale.invert(0);
        
    // for all fotw > max value, clip to max vaule
    for(var i=0; i<=fotw.length-1; i++){
        if(fotw[i]>fotwmax){fotw[i]=fotwmax}
    };

// 4. Apply these calculated measures for all TEXT boxes          
    textgroup.selectAll('foreignObject')
        .data(data) //, function(d) { return d.event_header, d.event_details, d.direction; })
        .enter()
        .append('foreignObject')
        .attr("id", function(d,i) { return ("textbox" + d.index); })
        .attr("x", function(d,i) { 
            if(d.align === "left"){return xScale(xc[i]); }
            if(d.align === "center"){return xScale(xc[i]); }
            if(d.align === "right"){return xScale(xc[i]-.8); } // shift these blocks bit to the left
            })    
        .attr("y", function(d,i) { 
//            debugger;
            if(d.direction === "up"){return relypos*height - data[i].arrowheight - arrowheadlength - 125; }
            if(d.direction === "down"){return yc[i]; }
            })  
        .attr('width', function(d,i) {return xScale(fotw[i]) }) 
        .attr('height', foh)
        .attr("class", function(d) { 
            if(d.align === "left"){return "lefty";}
            if(d.align === "center"){return "centry";}
            if(d.align === "right"){return "righty";}
        })
        .html(function(d,i) { return '<div style="width:' + xScale(fotw[i]) + 'px;"><h2CV>' + d.event_header + '</h2CV></div><div style="width:' + xScale(fotw[i]) + 'px;"><h3CV style="line-height:20%;">' + d.event_details + '</h3CV></div>'} )
//debugger;
       
    
    d3.selectAll("foreignObject")
        .on("mouseover", function(d) { textmouseover(this); })
        .on("mouseout", function(d) { textmouseout(this); })  
    
        function textmouseover(d3Element){ 
            var curelement = +d3Element.__data__.index;
            console.log(curelement)
            q = document.getElementsByClassName("lifelinetext")
            q[curelement].style.display="flex"
            };
        
        function textmouseout(d3Element){ 
            var curelement = +d3Element.__data__.index;
            console.log(curelement)
            q = document.getElementsByClassName("lifelinetext")
            q[curelement].style.display="none"
            };
        
     
    
// put date labels inside timeline:
var lifelinetextgroup = svg.append("g")
                   .attr("id","lifelinetextgroup");
    
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
        
lifelinetextgroup.selectAll("text")
   .data(data) //, function(d) { return d.date}) <-- causes skip of data again
   .enter()
   .append("text")
   .attr("class", "lifelinetext")
   .attr("id", function(d,i) {return "lt"+i+""})
   .text(function(d,i) { 
    if(d.date.getDate() == "1") {return d3.time.format(""+month[d.date.getMonth()]+" "+d.date.getDate()+"st "+d.date.getFullYear()+"");}
    if(d.date.getDate() == "2") {return d3.time.format(""+month[d.date.getMonth()]+" "+d.date.getDate()+"nd "+d.date.getFullYear()+"");}
    if(d.date.getDate() == "3") {return d3.time.format(""+month[d.date.getMonth()]+" "+d.date.getDate()+"rd "+d.date.getFullYear()+"");}
    else {return d3.time.format(""+month[d.date.getMonth()]+" "+d.date.getDate()+"th "+d.date.getFullYear()+"");}
    })
   .attr("text-anchor", "middle")
   .attr("x", function(d,i) {return xScale(d.age);  })
   .attr("y", function(d,i) {return (relypos*height + 8); })
   .attr("font-family", "Garamond")
//   .attr("font-size", "9px")
   .attr("font-size", ".6em")
   .attr("fill", "white");

// create INTERACTIVE CATEGORY buttons!    
    function key_func(d){ 
            return d.index;
            };
        
    function update(cat,duration) {  // cat is button category name
            console.log("updating")
            
        // GROUP data by category:  
        var grouped = d3.nest()          //grouping. In this case: group data by category
            .key(function(d){               
                    return d['category'];    
                })
            .entries(data);  //passes data through nest pipeline

debugger; 
        
            if(cat.slice(0,4) === "all") {
                    
                    console.log("show all events")
                     var data_to_enter = data;
                    
                }else{
                // filter data for giving category: filter()
                var filtered = grouped.filter(function(d) {
                    if(d.key.slice(0,4) === cat.slice(0,4)) {
                        return d.key;}
                        });  
                var data_to_enter = filtered[0].values;
                };
               
        // UPDATE arrow style based on button press
            var arrows = d3.select("#lifearrows").selectAll("g")
                            .data(data_to_enter,key_func) // key func needed to get the correct index of the arrow

// change style of arrow that are not highlighted: the .exit group
            arrows.exit().transition()
                            .duration(duration)
                            .style("opacity", .1);

// update all other arrows:
                arrows.transition().duration(duration)
                                .style("opacity", 1)

// UPDATE text style based on button press
            function fo_styling_exit(d){
                if(environment == "CM") { // we are in CM mode
                     return "#a7a7a7";
                    } else {
                     return "#ebebeb";}
                };
            
            function fo_styling_enter(d){

if(environment == "CM") { // we are in CM mode
                     return "#f4f0f0";
                    } else {
                     return "black";}
                };
            
            
            var fos = d3.selectAll("foreignObject")
                            .data(data_to_enter,key_func) // key func needed to get the correct index of the arrow

// change style of arrow that are not highlighted: the .exit group
                fos.exit().transition()
                            .duration(duration)
                            .attr("fill",fo_styling_exit)
                            .attr("color",fo_styling_exit)
                            
            // update all other arrows:
                fos.transition().duration(duration)
                             .attr("fill",fo_styling_enter)
                            .attr("color",fo_styling_enter)

}; // end of update function
        
    var categories = ["all","life events","education","professional"];
    var buttons = d3.select("#content")
            .append("div")
            .attr("class","category_buttons")
            .selectAll("div")
            .data(categories)
            .enter()
            .append("div")
            .text(function(d){return d;});

buttons.on("click",function(d){
        // first select all the buttons:
        d3.select(".category_buttons")
            .selectAll("div")
            .transition().duration(500)
                .style("background-color", "white")

d3.select(this) //selects current element (which is button)
            .transition().duration(500)
                .style("background-color", "rgb(247, 230, 210)")
        
        update(d,500);                       
        
        cg = d;
        return cg;
        
        });

buttons.on("mouseover", function(d) {d3.select(this).style("cursor", "pointer")} )
          .on("mouseout", function(d) {d3.select(this).style("cursor", "default")} )  
        
    
//    
    
    // Functions that moves (and recolors) the whole lifeline depending on header click or mouse position -->    
    var ease = "sin";   //"poly"//"linear" // "cubic", "
    var transitiondurationCVCM =2000; // is transition speed of the *moving*
    
    function changeElementColorCM(d3Element){
        var curelement = d3.select("body");
        var colour = d3.rgb(curelement.attr("style"));

d3Element
        .style("background", colour)
        .transition().delay(500).duration(1500).ease(ease)  // transition speed of background re-coloring
          .style("background", "grey")
        
        d3.select("body").select("#content").select("svg")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("viewBox", ""+.5*width+" 0 "+ .5*width+" "+height+"")

d3.select("body").select("#content").select("svg").select("rect")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("color","white")
            .attr("fill","white")

d3.selectAll("rect")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("color","white")
            .attr("fill", "white")  
       d3.selectAll("path")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("stroke", "white")
            .attr("fill", "white")

d3.selectAll("foreignObject")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("fill","white")
            .attr("color","white")

d3.selectAll("text")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .style("fill","gray")

d3.select("body").select("#wrapper").select("#CVheader").select("#headerright")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .style("color","white");

function changeElementColorCV(d3Element){
        var curelement = d3.select("body");
        var colour = d3.rgb(curelement.attr("style"));

d3Element
        .style("background", colour)
        .transition().delay(500).duration(1500).ease(ease) // transition speed of background re-coloring
        .style("background", "white")
    
        d3.select("body").select("#content").select("svg")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("viewBox", "0 0 "+.52*width+" "+height+"")

d3.select("body").select("#content").select("svg").select("rect")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("color","#716c6c")
            .attr("fill","#716c6c")
        
        d3.selectAll("rect")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("color","#716c6c")
            .attr("fill", "#716c6c")  
        d3.selectAll("path")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("stroke", "#716c6c")
            .attr("fill", "#716c6c")

d3.selectAll("foreignObject")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .attr("fill","#716c6c")
            .attr("color","#716c6c")

d3.selectAll("text")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .style("fill","white")

d3.select("body").select("#wrapper").select("#CVheader").select("#headerright")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .style("color","#716c6c");

d3.select("body").select("#wrapper").select("#CVheader").select("#headerleft")
            .transition().duration(transitiondurationCVCM).ease(ease)
            .style("color","black");
        
        environment = "CV";
        console.log(environment)
        if (typeof cg !== 'undefined') {
                update(cg,2200)
                console.log(cg)
                }               
        } // end of changeElementColorCV   
    
    
    // Function that will give the position of cursor 
    // and cause interactions with page at certain mouse positions:
    function GetcursorPos(p){
        // PageX and PageY are position values
        //        info.innerHTML = 'Position X : ' + p.pageX;
        var maxX = screen.width;
        var posX = p.pageX/maxX; 
        
        // Get current screen (CV or CM), through background color:
        var curelement = d3.select("body");
        var colour = d3.rgb(curelement.attr("style"));
        
        if(colour.r == 255) {  // white, CV environment    
            if(posX > .85) {
                changeElementColorCM(d3.select("body")); 
            }
            if(posX <= .85) {
                changeElementColorCV(d3.select("body")); 
            }
            
             }
        
        if(colour.r == 128) {  // dark, CM environment
            if(posX < .15) {
                changeElementColorCV(d3.select("body")); 
            }
            if(posX >= .15) {
                changeElementColorCM(d3.select("body")); 
            }
            
            }   
        } //End getcursorpos
        
        addEventListener('mousemove', GetcursorPos, false);
      
        
// Set up button functionality of two header texts (CV and CM)    
    var headerr = d3.select("#headerright");
    headerr.on({
      "mouseover": function(d) {
        d3.select(this).style("cursor", "pointer")
      },
      "mouseout": function(d) {
        d3.select(this).style("cursor", "default")
      }
    });    
    var headerl = d3.select("#headerleft")    
    headerl.on({
      "mouseover": function(d) {
        d3.select(this).style("cursor", "pointer")
      },
      "mouseout": function(d) {
        d3.select(this).style("cursor", "default")
      }
    });  
  
//Here, the action after clicking the CV and CM button is defined:  
    headerr.on("click", function() {
        console.log("you clicked the CM header")
        var curelement = d3.select("body");
        var colour = d3.rgb(curelement.attr("style"));
        if(colour.r == 255) {
            changeElementColorCM(d3.select("body")); 
            }
        });

headerl.on("click", function() {
        console.log("you clicked the CV header")
        var curelement = d3.select("body");
        var colour = d3.rgb(curelement.attr("style"));
        if(colour.r == 128) {
            changeElementColorCV(d3.select("body")); 
            }
        });

}; // end draw function
    
    
    
</script>  
</head>
   
   
    
<body style="style.background= rgb(255, 255, 255);">

<div id="rotatediv"><p><br>Rotate device (or widen browser window) for better view</p></div> 
    
    
    <div id="wrapper">
      
    <div id="CVheader" style="style.background= rgb(0, 0, 255);">
        <h2 id="headerleft">Curriculum Vitae</h2>
        <h2 id="headerright" >Curriculum Mortem</h2>
    </div>
    
      
    <div id="content">
        <script type="text/javascript">
        
            // Reading data from CSV   
            formatdate = d3.time.format("%m/%d/%y")
            
            function formatage(inputdate){
                var birthdate = 1980 + 1/12*8;
                var age = inputdate.getFullYear() + 1/12*(inputdate.getMonth()+1) - birthdate   ;
                return age;
            }
            
            d3.csv("CVCMdata.csv",function(d){
            // transform the data here into needed variables
                d['date'] = formatdate.parse(d['date']); // to extract data format
                d['age'] = formatage(d['date']);
                d['arrowheight']=+d["arrowheight"]; // to make it from strings into numbers
                
                return d;
            },draw);           
    
        </script> 
    </div> 
     

    <div id="footer">
     Source: Data on past events collected throughout the years, future predictions made using <a href="https://fatefulday.eu" target="_blank">fatefulday.eu </a>   |   <a href="https://sara-maria.github.io/" target="_blank">Sara Maria 2016</a>
    </div>
      
</div> 
    
    <script>
    
        // Javascript media query event handler to window size change
    if (matchMedia) {
      var mq = window.matchMedia("(min-width: 680px)");
      mq.addListener(WidthChange);
      WidthChange(mq);
        
      var mqr = window.matchMedia("(orientation: portrait)");
      mqr.addListener(RotationChange);
      RotationChange(mqr);    
    };

// Javascript function for header button changes on window resize
    function WidthChange(mq) {
      if (mq.matches) {
        // window width is at least 660px
          var hr = document.getElementById("headerright");
            hr.textContent = 'Curriculum Mortem'
            hr.style.width = "10em";
          var hl = document.getElementById("headerleft");
            hl.textContent = 'Curriculum Vitae';
            hl.style.width = "9em";
          
      } else {
        // window width is less than 660px
          var hr = document.getElementById("headerright");
            hr.textContent = 'CM';
            hr.style.width = "3.6em";
          var hl = document.getElementById("headerleft");
            hl.textContent = 'CV';
            hl.style.width = "3.6em";
      }
    };
    
    
    // CATCH ROTATED SMART PHONES AND SCREENS //
    function RotationChange(mqr) {
    // If there are matches, we're in portrait
    if(mqr.matches) {  
        // Portrait orientation
        console.log("rotated to portrait");
//        document.getElementById("lifeline").style.background="rgb(0,0,255)"
    } else {  
        // Landscape orientation
        console.log("rotated back to landscape");
//        console.log(document.body.style.width);
//        debugger;
//        var w = 2*window.screen.availWidth;
//        var h = window.screen.availHeight;
//        
////      document.body.style.width = "20*560px";
//        document.getElementById("lifeline").style.background="rgb(0,255,0)"; //green
////        document.getElementById("lifeline").style.width=w
//        document.body.style.width = w;
    }
    };

</script>
    
    
    
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js