Responsive, reusable, modernizr charts

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>W-PCA Scatterplot Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="WPCA scatter plot">
    <meta name="author" content="Michal Škop">
	
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="./d3.scatterplotwithlineplotellipses.js"></script>
    <script src="./d3.tips.js"></script>
    <script src="./modernizr.svg.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css">

.d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 2px;
                pointer-events: none;
                max-width: 400px;
            }
            /* Creates a small triangle extender for the tooltip */
            .d3-tip:after {
                box-sizing: border-box;
                display: inline;
                font-size: 10px;
                width: 100%;
                line-height: 1;
                color: rgba(0, 0, 0, 0.8);
                position: absolute;
                pointer-events: none;
            }
            /* Northward tooltips */
            .d3-tip:after {
                content: "\25BC";
                margin: -1px 0 0 0;
                top: 100%;
                left: 0;
                text-align: center;
            }
            line {
             stroke:gray;
             stroke-width:0;
             opacity: .3;
            }
            .perfect {
              stroke: gray;
              stroke-width:0;
              opacity: 0.7;
            }
            #chart {
              margin-top:30px;
            }
		</style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <h2>Spatial distribution of Czech senate candidates from main parties based on their answers in VAA <a href="https://volebnikalkulacka.cz" class="text-success">VolebniKalkulacka.cz</a> before elections 2012-2014</h2>
        </div>
      </div>
    </nav>
      <div id="graphic" style="max-width:500px"></div>
    <div class="alert alert-info">
      <p>Each ellipse represents senate candidates from one political party from elections in 2012 and 2014 (it is 90% prediction interval for the party). Main parties only.
      <p><a href="https://bl.ocks.org/michalskop/8514867">W-PCA</a> model is used, the model is estimated using 10 biggest parties, the other parties and the senate candidates were projected into the model.

var $graphic = $('#graphic');
var graphic_data_url = 'data.csv';
var graphic_data;
var graphic_aspect_width = 16;
var graphic_aspect_height = 9;
var mobile_threshold = 500;

function drawGraphic() {
    
    var margin = { top: 10, right: 10, bottom: 30, left: 30 };
    var width = $graphic.width() - margin.left - margin.right;

var scatterplotwithlineplot = [{
      "data": spdata,
      "margin": margin,
      "axes": {"labels":{"x":"DIM 1", "y":"DIM 2"}},
      "minmax":{"x":{'min':-1,'max':1},"y":{'min':-1,'max':1},"r":{'min':0,'max':1},"rrange":{'min':0,'max':100}},
      "size":{"width":width,"height":width},
      "lines": linesselected,
      "ellipses": ellipses
    }];

// clear out existing graphics
    $graphic.empty();

var svg = d3.select("#graphic")
        .append("svg")
        .attr("width",scatterplotwithlineplot[0]['size']['width'])
        .attr("height",scatterplotwithlineplot[0]['size']['height']);
        
    /* Initialize tooltip */
    tip = d3.tip().attr('class', 'd3-tip').html(function(d) { 
      return "<span class=\'stronger\'>" + d["name"] + "</span><br>";
    });

/* Invoke the tip in the context of your visualization */
    svg.call(tip)

var sp = d3.scatterplotwithlineplot()
        .data(function(d) {return d.data})
        .margin(function(d) {return d.margin})
        .axes(function(d) {return d.axes})
        .minmax(function(d) {return d.minmax})
        .size(function(d) {return d.size})
        .lines(function(d) {return d.lines})

var scatter = svg.selectAll(".scatterplot")
        .data(scatterplotwithlineplot)
      .enter()
        .append("svg:g")
        .attr("transform", "translate(" + scatterplotwithlineplot[0].margin.left + "," + scatterplotwithlineplot[0].margin.top + ")")
        .call(sp);
}

if (Modernizr.svg) { // if svg is supported, draw dynamic chart
  d3.csv("all_data_ten_5.csv", function(voters) {
    d3.csv("cutting_lines_ten.csv", function(lines) {
      d3.csv("ellipses.csv", function(ells) {
        linesselected = [];
        for (k in lines) {
          if ((parseFloat(lines[k]['loss']) < 1.5) && (parseFloat(lines[k]['cl_beta0']) < 50)) {
              beta = [lines[k]['normal_x'],lines[k]['normal_y']];
              beta0 = lines[k]['cl_beta0'];
              if (beta[1] != 0) {
                lines[k]['a'] = -beta0/beta[1];
                lines[k]['b'] = -beta[0]/beta[1];
              } else {
                lines[k]['a'] = 0;
                lines[k]['b'] = 0;
              }
              //add class for a perfect cut:
              if (lines[k]['loss'] == 0) {
                lines[k]['class'] = 'perfect';
              } else {
                lines[k]['class'] = 'non-perfect';
              }
              lines[k]['name'] = lines[k]["motion:name"];
              linesselected.push(lines[k]);
          }
        }

spdata = [];
        voters.forEach(function(d) {
          spdata.push({"x":d["wpca:d1"],"y":d["wpca:d2"],"r":d["r"],"color":d["color"],"name":d["name"],"opacity":d["opacity"]})
        });
        
        ellipses = ells;
        
        drawGraphic();
        window.onresize = drawGraphic;
    
      })    
    })
  })
} else {
    $graphic.html('<img src="chart.png" width="' + $graphic.width() +' alt="client image" id="client_image_preview" />');
}

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

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

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