CZ: Praha 2010-2014 (WPCA, Python+R, reusable charts)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Scatterplot Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="scatter plot">
    <meta name="author" content="Michal Škop">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="./d3.scatterplotwithlineplot.js"></script>
    <script src="./d3.tips.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/simplex/bootstrap.min.css" />
    <style type="text/css">
			
			text {
			  font-family: sans-serif;
			}
			
			.tick {
			  fill-opacity: 0;
			  stroke: #000000;
			  stroke-width: 1;
			}
			
			.domain {
			    fill: none;
				fill-opacity: 0;
				stroke: black;
				stroke-width: 1;
			}
			.axis line {
				fill: none;
				fill-opacity: 0;
				stroke: black;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
				stroke: gray;
			}
			circle {
			  fill-opacity: .3;
			  stroke: black;
			  stroke-opacity: 0.99;
			}
			circle:hover {
			  fill-opacity: 1;
			}
			.label {
			  font-family: sans-serif;
			  font-size: 15px;
			}
			.cssd {
			  fill: orange;
			  stroke: orange;
			}
			.kscm {
			  fill: red;
			  stroke: red;
			}
			.ods {
			  fill: blue;
			  stroke: blue;
			}
			.top-09 {
			  fill: #b0b;
			  stroke: #b0b;
			}
			.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: 250px;
            }
            /* 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:1;
             opacity: .15;
            }
            .perfect {
              stroke: gray;
              stroke-width:3;
              opacity: 0.5;
            }
            .part-1 {
              stroke: red;
              stroke-width:1;
              opacity: 0.15;
            }
            .part-2 {
              stroke: green;
              stroke-width:1;
              opacity: 0.15;
            }
            .part-3 {
              stroke: blue;
              stroke-width:1;
              opacity: 0.15;
            }

</style>
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="navbar-header">
       <h1 class="navbar-brand">Prague 2010 - 2014</h1>
      </div>
    </div>
    <div id="chart"></div>
    <div class="alert alert-info">
      WPCA
    </div>
    
<script type="text/javascript">
d3.csv("praha-2010-2014-roll-call-votes-wpca-cutting-lines.csv",function(error,lines) {
  d3.csv("praha-2010-2014-roll-call-votes-wpca.csv",function(error,csvdata) {
    linesselected = []
    for (k in lines) {
      if ((parseFloat(lines[k]['w2']) > 0.5) && (parseFloat(lines[k]['cl_beta0']) < 50)) {
      //if (1>0){
          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;
          }
          //colored by perfect cut:
          /*if (lines[k]['loss'] == 0) {
            lines[k]['class'] = 'perfect';
          } else {
            lines[k]['class'] = 'non-perfect';
          }*/
          // colored by time
          if (k < 690) {
            lines[k]['class'] = 'part-1';
          } else {
            if (k < 1815) {
              lines[k]['class'] = 'part-2';
            } else {
              lines[k]['class'] = 'part-3';
            }
          }
          lines[k]['name'] = "i:"+k+"<br>w1:"+lines[k]['w1']+"<br>w2:"+lines[k]['w2']+"<br>loss:"+lines[k]['loss']+"<br>name:"+lines[k]['motion:name'];
          linesselected.push(lines[k]);
      }
    }

spdata = [];
    csvdata.forEach(function(d) {
      spdata.push({"x":d["wpca:d1"],"y":d["wpca:d2"],"r":1,"class":d["class"],"name":d["name"]})
    });
    var scatterplotwithlineplot = [{
      "data": spdata,
      "margin": {top: 10, right: 10, bottom: 30, left: 30},
      "axes": {"labels":{"x":"Dimension 1", "y":"Dimension 2"}},
      "minmax":{"x":{'min':-18,'max':18},"y":{'min':-18,'max':18},"r":{'min':0,'max':1},"rrange":{'min':0,'max':10}},
      "size":{"width":600,"height":400},
      "lines": linesselected
    }];
    
     var svg = d3.select("#chart")
        .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);
    
  });
});
</script>
  </body>
</html>

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

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