etachov/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MDIF Portfolio by Freedom House and GNI</title>
        <script type="text/javascript" src="http://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>

        <script type="text/javascript">

        //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>

## prData_total.csv

          
            country
            amount
            gni_percap
            fh_score

            
              Bolivia
              1220207.08
              2550
              48

            
              Bosnia and Herzegovina
              1545219.53
              4780
              50

            
              Botswana
              1913549.74
              7770
              41

            
              Brazil
              450000
              11690
              45

            
              Cambodia
              383000
              950
              66

            
              Chile
              3e+05
              15230
              31

            
              Ecuador
              25000
              5760
              62

            
              Georgia
              6174
              3560
              47

            
              Guatemala
              3410793.62
              3340
              60

            
              Hungary
              736877.05
              13260
              35

            
              India
              493397.61
              1570
              39

            
              Indonesia
              1988449.66
              3580
              49

            
              Lesotho
              68750
              1500
              47

            
              Macedonia
              76573.14
              4870
              57

            
              Malaysia
              350000
              10430
              64

            
              Montenegro
              2879229.03
              7250
              39

            
              Nepal
              1408816.22
              730
              55

            
              Nigeria
              2e+05
              2710
              51

            
              Paraguay
              76671.89
              4010
              59

            
              Peru
              3386524.48
              6270
              44

            
              Russia
              5835399.31
              13850
              81

            
              Senegal
              801778.24
              1050
              48

            
              Serbia
              2215724.62
              6050
              37

            
              South Africa
              3385477.47
              7410
              33

            
              Ukraine
              2711033.05
              3960
              63

            
              Venezuela
              25000
              12550
              78

            
              Zambia
              120000
              1810
              61

            
              Zimbabwe
              4449053.9
              860
              73
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>MDIF Portfolio by Freedom House and GNI</title>
	<script type="text/javascript" src="http://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>

	<script type="text/javascript">

	//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>
country	amount	gni_percap	fh_score
Bolivia	1220207.08	2550	48
Bosnia and Herzegovina	1545219.53	4780	50
Botswana	1913549.74	7770	41
Brazil	450000	11690	45
Cambodia	383000	950	66
Chile	3e+05	15230	31
Ecuador	25000	5760	62
Georgia	6174	3560	47
Guatemala	3410793.62	3340	60
Hungary	736877.05	13260	35
India	493397.61	1570	39
Indonesia	1988449.66	3580	49
Lesotho	68750	1500	47
Macedonia	76573.14	4870	57
Malaysia	350000	10430	64
Montenegro	2879229.03	7250	39
Nepal	1408816.22	730	55
Nigeria	2e+05	2710	51
Paraguay	76671.89	4010	59
Peru	3386524.48	6270	44
Russia	5835399.31	13850	81
Senegal	801778.24	1050	48
Serbia	2215724.62	6050	37
South Africa	3385477.47	7410	33
Ukraine	2711033.05	3960	63
Venezuela	25000	12550	78
Zambia	120000	1810	61
Zimbabwe	4449053.9	860	73