Scatterplot with Contour Lines (D3 + R)

<!DOCTYPE html>
<html>
  <head>
    <title>Institutions Argentina</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<script src="https://d3js.org/d3.v3.min.js"></script>
	
	<style type="text/css">
	  body {
          font: 18px sans-serif;
      }
	  .axis path,
      .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
	  .contour-line {
	    fill: none;
	    stroke: lightblue;
	    stroke-width: 1px;
	  }
	  .event {
	    fill: none;
	    stroke: green;
	    stroke-width: 3px
	  }
	  .noevent {
	    fill: red;
	    stroke: red;
	  }
	</style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
var x = d3.scale.linear()
    .range([0, width])
    .domain([0.15,1.025]);
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0.5,4.5]);
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
 .append("text")
  .attr("x", x(1))
  .attr("dx", ".71em")
  .attr("dy", "-.5em")
  .style("text-anchor", "end")
  .text("Balance of parties");
  
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
 .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Effective number of parties");

//contour lines based on https://vis.supstat.com/2012/11/contour-plots-with-d3-and-r/

var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); })
    .interpolate("basis") //https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
    .tension(1);

d3.csv("data.csv", function(error, data) {
  d3.json("contour_lines.json", function(er,cl) {
    svg.selectAll(".contour-line")
      .data(cl.map(function(d) {
        return d3.range(d.x.length).map(function(i) {
          return {x: d.x[i], y: d.y[i]};
        });
      }))
    .enter().append("svg:path")
      .attr("d", line)
      .attr("class","contour-line")
  })
  svg.selectAll(".event")
      .data(data)
    .enter().append("circle")
       .attr("cx", function(d) {
          return x(parseFloat(d.balance_of_parties) + parseFloat(d.random1)/2) 
        })
      .attr("cy", function(d) {
        return y(parseFloat(d.effective_number_of_parties) + parseFloat(d.random2)*2) 
      })
      .attr("r", function(d) {
        return Math.round(parseFloat(d.event_minus_controled)*100 + 1);
      })
      .attr("class","point noevent")
      .filter(function(d) { return (d.event == 1) }) 
        .attr("class","point event")
        .attr("r", function(d) {
          return Math.min(30,Math.round(parseFloat(d.event_minus_controled)*100 + 1));
        })
      
})

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

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

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