D3 Examples - Slopegraph

xxxxxxxxxx
 
<title>Latin America Economic Growth Trend</title>
​
<style>
    .left-labels,
    .labels {
        font-family: sans-serif;
        font-size: 8px;
    }
    
    .chart-title {
        font-family:sans-serif;
        font-size: 16px;
        text-anchor: middle;
        font-weight: bold;
    }
    
    .footer {
        font-family:sans-serif;
    }
</style>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
    <div id="graph-container"></div>
    <div class="footer">
        <p>Data sourced from the World Bank: <a href="https://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD">https://data.worldbank.org/indicator/NY.GNP.PCAP.PP.CD.</a>
        <p>Most recent year available for Argentina is 2006.</p>
    <script>
        
        var width = 480;
        var height = 500;
        
        var margin = {top: 20, bottom: 20, left: 100, right:100};
        
        var leftScale = d3.scale.linear()
            .domain([0.0, 18000.0])
            .range([height - margin.top, margin.bottom]);
        
        var rightScale = d3.scale.linear()
            .domain([0.0, 18000.0])
            .range([height - margin.top, margin.bottom]);   
        
        var currencyFormatter = d3.format("0,.0f");
        
        var svg = d3.select("#graph-container")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
        
        d3.csv('gni_ppp.csv', function(d) {
            data = d;
            
            var lines = svg.selectAll("line")
                .data(data);
                
            lines.enter()
                .append("line")
                .attr("x1", margin.left)
                .attr("x2", width - margin.right)
                .attr("y1", function(d) {
                    return leftScale(parseFloat(d.Expected));
                })
                .attr("y2", function(d) {
                    return rightScale(parseFloat(d.Actual));
                })
                .attr("stroke", "black")
                .attr("stroke-width", 1);
​
            var rightLabels = svg.selectAll(".labels")
                .data(data);
                
            rightLabels.enter()
                .append("text")
                .attr("class","labels")
                .attr("x", width - margin.right + 3)
                .attr("y", function(d) {
                    return rightScale(parseFloat(d.Actual)) + 4;
                })
                .text(function (d) {
                    return d['Country'] + " " + currencyFormatter(d.Actual);
                });
            
            var leftLabels = svg.selectAll(".left-labels")
                .data(data);
                
            leftLabels.enter()
                .append("text")
                .attr("class","left-labels")
                .attr("x", margin.left - 65)
                .attr("y", function(d) {
                    return leftScale(parseFloat(d.Expected)) + 4;
                })
                .text(function (d) {
                    return d['Country'] + " " + currencyFormatter(d.Expected);
                })
                .style("text-anchor","begin");
                
            svg.append("text")
                .attr("x", width / 2)
                .attr("y", margin.top)
                .attr("class", "chart-title")
                .text("Latin America GNI per capita PPP, 1980-2010");
        });
    </script>
</body>
    