Sample PR Chart

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MDIF Portfolio by Freedom House and GNI</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type = "text/css">

body {
                background-color: #fff;
                font-family: sans-serif;
            }

h1 {
                font-size: 24px;
                margin: 20px 0 0 100px;
            }

p {
                font-size: 18px;
                margin: 10px 0 0 100px;
            }

svg {
                background-color: #fff;
            }

circle:hover {
                fill: #28BAEA;
                opacity: .8;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

.axis text {
                font-family: sans-serif;
                font-size: 14px;
            }

</style>

</head>

<body>

<h1>MDIF Portfolio Allocation</h1>
        <p>By Freedom House Press Freedom and GNI/Capita Altas (USD)</p>

//creating canvas 
        var w = 750; 
        var h = 500;
        var padding = [ 40, 10, 50, 100 ];
        //top [0] right [1] bottom [2] left [3]

// building scale generators
        var xScale = d3.scale.linear()
                .range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
            .range([ padding[0], h - padding[2] ]);

var rScale = d3.scale.linear()
            .range([2.5, 20]);

var cValue = d3.scale.ca

// building axis and svg generators
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(5)
            .outerTickSize(0);

var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(6)
            .outerTickSize(0);

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

d3.csv("prData_total.csv", function(data) {

xScale.domain([
                d3.min(data, function(d) {
                    return +d.fh_score-30;
                }),
                d3.max(data, function(d) {
                    return +d.fh_score+20;
                })
            ]);

// max then min because this is the vertical axis
            yScale.domain([
                d3.max(data, function(d) {
                    return +d.gni_percap;
                }),
                d3.min(data, function(d) {
                    return +d.gni_percap;
                })
            ]);

rScale.domain([
                d3.min(data, function(d) {
                    return +d.amount;
                }),
                d3.max(data, function(d) {
                    return +d.amount;
                })
            ]);

var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle");

circles
                .attr("cx", function(d) {
                    return xScale(+d.fh_score);
                })
                .attr("cy", function(d) {
                    return yScale(+d.gni_percap);
                })
                .attr("r", function(d) {
                    return rScale(+d.amount);
                })
                .attr("fill", "#225399")
                .attr("opacity", 0.9)
                .append("title")
                .text(function(d) {
                    return d.country;
                });
            
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - padding[2]) + ")")
                .call(xAxis);

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding[3] + ",0)")
                .call(yAxis);

//simple axis labels
            svg.append("text")
                .attr("class", "x label")
                .attr("text-anchor", "end")
                .attr("x", w-110)
                .attr("y", h-55)
                .attr("font-family", "sans-serif")
                .attr("font-size", "16px")
                .attr("font-weight", "bold")
                .text("Press Freedom");

svg.append("text")
                .attr("class", "y label")
                .attr("text-anchor", "end")
                .attr("y", 105)
                .attr("x", -40)
                .attr("dy", ".75em")
                .attr("transform", "rotate(-90)")
                .attr("font-family", "sans-serif")
                .attr("font-size", "16px")
                .attr("font-weight", "bold")
                .text("GNI/capita");

});

</script>

</body>
    
</html>

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

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