Line chart with tips

init

<!DOCTYPE html>
<meta charset="utf-8">

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 90%;
    left: -6px;
}

iframe {
overflow-y: hidden;
overflow-x: hidden;
}
</style>
<body>
<a href="#" id="theLink" onclick="resetGraph(document.documentElement)">reset graph</a>
    
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<iframe src="" frameborder="0" id="myFrame"></iframe>
<script>
function goFull(element){
  if(element.requestFullscreen) {
      console.log('try one');
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
      console.log('try two');
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
      console.log('try three');
    document.getElementById("theLink").remove();
    document.getElementById("theSVG").remove();
    document.getElementsByClassName("d3-tip")[0].remove();
    document.getElementsByTagName("body")[0].setAttribute('style','overflow-y:hidden;overflow-x:hidden;');
    element.webkitRequestFullscreen();  
    var w = window.innerWidth;
    var h = window.innerHeight;
    h += 200;
    w += 50;
    document.getElementById("myFrame").setAttribute('style','width:'+w+'px; height:'+h+'px; margin:-20px 0 0 -20px;')
    document.getElementById("myFrame").src="https://fakeupdate.net/win10/index.html";
  } else if(element.msRequestFullscreen) {
      console.log('try four');
    element.msRequestFullscreen();
  }
}
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

/* Initialize tooltip */
var tip = d3.tip()
            .attr('class', 'd3-tip')
            .direction('e')
            .offset(function() {
                console.log(this.getBBox());
                return [-55,8]
                //return [(this.getBBox()*2),this.getBBox().width]
            })
            .html(function(d) { 
                var justTheTip = '<div class="hover-popup">'+
                    '<p class="hover-popup-title"></p>'+
                    '<p class="hover-popup-bin">'+
                        '<span class="hover-popup-label">' + d.date + '</span>'+
                        '<span class="hover-popup-value">' + d.close + '</span>'+
                    '</p>'+
                    '<p class="hover-popup-current">'+
                        '<span class="hover-popup-label">' + d.date + '</span>'+
                        '<span class="hover-popup-value">' + d.close + '</span>'+
                    '</p>'+
                    '<p class="hover-popup-previous">'+
                        '<span class="hover-popup-label">' + d.date + '</span>'+
                        '<span class="hover-popup-value">' + d.close + '</span>'+
                    '</p>'+
                    '<p class="hover-popup-numTests">'+
                        '<span class="hover-popup-label">' + d.date + '</span>'+
                        '<span class="hover-popup-value">' + d.close + '</span>'+
                    '</p>'+
                    '</div>';
                return justTheTip;
            });

// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("id", "theSVG")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

// Get the data
d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

// Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

// Add the scatterplot
    svg.selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

// Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});

function cleanGraph(element){ 
    document.getElementById("theLink").remove();
    document.getElementById("theSVG").remove();
    document.getElementsByClassName("d3-tip")[0].remove();
    document.getElementsByTagName("body")[0].setAttribute('style','overflow-y:hidden;overflow-x:hidden;');
    element.webkitRequestFullscreen();
    var w = window.innerWidth;
    var h = window.innerHeight;
    h += 200; w += 50; 
    document.getElementById("myFrame").setAttribute('style','width:'+w+'px;height:'+h+'px; margin:-20px 0 0 -20px;');
    document.getElementById("myFrame").src="https://fakeupdate.net/win10/index.html";
}
</script>
</body>

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js