xxxxxxxxxx
<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="d3.v3.js"></script>-->
<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