D3 Examples - Sample PR Chart

xxxxxxxxxx
 
<!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>
​
        <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>
    