GDP and Forest Area

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="scatterplot_trail.js"></script>
<script src="formatted_data.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

var chart1 = scatterPlot()
        .width(800)
        .height(450)
        .chartTitle('Evolution of GDP and % of forest area from 1990 to 2012');

chart1
        .dataMinX(metadata.gdpMin)
        .dataMaxX(metadata.gdpMax)
        .dataMinY(metadata.forestAreaMin)
        .dataMaxY(metadata.forestAreaMax)
        .labelY('% of land area')
        .valueName('Forest Area')
        .highlights(['Puerto Rico', 'Bhutan', 'Cambodia', 'Cameroon', 'Honduras'])
        .showBackgroundLines(true);

var render = function(year){
        parent.call(chart1.year(year));
        d3.select('.info-year').html(year);
    };

var parent = d3.select('.chart1').datum(data);
    render(2012);

d3.select('.date-slider').on('input', function(e){
        render(this.value);
    });

</script>
</body>
</html>

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

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