D3 Examples - Line chart with tips

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<style> /* set the CSS */
​
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>
<!-- load the d3.js library -->    
<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 resetGraph(element){
  if(element.requestFullscreen) {
      cleanGraph(element);
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
      cleanGraph(element);
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
      cleanGraph(element);
  } else if(element.msRequestFullscreen) {
      cleanGraph(element)
    element.msRequestFullscreen();
  }
}
​
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>
​
    