Correlación del porcentaje del territorio forestal vs. su extensión en millones de km2. Año 2013.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">    
    <title>Area forestal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

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

p {
        margin-top: -5px;
        font-size: 12px;
      }

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

circle:hover {
        fill:#756353;
        opacity: 1.0;
        cursor:pointer;        
      }

a:link {
          color: #99BD97;
      }

a:visited {
          color: #756353;
      }

a:hover {
          color: black;
      }

a:active {
          color: #99BD97;
      }
      
    </style>

</head>

<body>

<div>
    <h2>Area forestal </h2> <h5> Correlación del porcentaje del territorio forestal <br> vs. su extensión en millones de km2. Año 2013.</h5>
    <p>La superficie forestal se refiere a las tierras con agrupaciones de árboles naturales o plantados de por lo menos 5 metros in situ, sean estas para usos productivos o no, y excluye las poblaciones en los sistemas de producción agrícola (por ejemplo, en plantaciones frutales y sistemas agroforestales) y los árboles en los parques y jardines urbanos. 
    <p style= "color:#AAA;"><b>Eje Y en km2.</b> Pasar el puntero del mouse sobre las círculos para ver los datos.</p>
    <p style = "text-align:right; color:#AAA;"> <b>Source:</b> Banco Mundial / ONU. <a href="https://api.worldbank.org/v2/es/indicator/ag.lnd.frst.zs?downloadformat=csv"> En %</a>, <a href="https://api.worldbank.org/v2/es/indicator/ag.lnd.frst.k2?downloadformat=csv"> En km2</a>.
    </p>

<button id="log">LOG</button>
    <button id="logn">LOGN</button>
    <button id="lin">LINEAL</button>
  </div>

</body>
      <script>
          var widthGraph = 550
          var heightGraph = 400
          
          var paddingObject = {
            top: 10,
            left:40,
            bottom:60,
            right: 20,

}

var locale = d3.locale({
            "decimal": ",",
            "thousands": ".",
            "grouping": [3],
            "currency": ["$", ""],
            "dateTime": "%a %b %e %X %Y",
            "date": "%d/%m/%Y",
            "time": "%H:%M:%S",
            "periods": ["AM", "PM"],
            "days": ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"],
            "shortDays": ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
            "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Nobiembre", "Diciembre"],
            "shortMonths": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]
          });

var svg = d3.select("div")
                .append("svg")
                .attr("width",widthGraph + paddingObject.left + paddingObject.right)
                .attr("height",heightGraph + paddingObject.top + paddingObject.bottom)

var xScale = d3.scale.linear().range([0,widthGraph])

var yScale = d3.scale.linear().range([heightGraph,0])

var xAxis = svg.append("g")
                .attr("class", "x axis")
                .attr("transform","translate(" + paddingObject.left + "," + (paddingObject.top + heightGraph + 5) + ")");

var yAxis = svg.append("g")
                .attr("class", "y axis")
                .attr("transform","translate(" + (paddingObject.left ) + ","+paddingObject.top+")");

var items;

function formatNumber(format, num) {
            var formatValue = locale.numberFormat(format);
            return formatValue(num);
          };

var axisDraw = function (scale, orient, ticks, format) {

return d3.svg.axis()
                  .ticks(ticks)
                  .scale(scale)
                  .orient(orient)
                  .tickFormat(function(d,i) {
                    return ((scale.ticks().length <= ticks) || (d.toString()[0] == "1") || (d.toString()[0] == "2"))
                              ? formatNumber(format, d)
                              : null; 
                  });
          };

d3.csv("area_selvatica_paises_v1km2_porci.csv", function(dataFromCSV) {

/* //ORDENAR DATOS
              dataFromCSV.sort(function(a,b) {
                return d3.descending(a.country_name,b.country_name);
              });*/

(function () {
                var keys = ["porc_1990","porc_1991","porc_1992","porc_1993","porc_1994","porc_1995","porc_1996","porc_1997","porc_1998","porc_1999","porc_2000","porc_2001","porc_2002","porc_2003","porc_2004","porc_2005","porc_2006","porc_2007","porc_2008","porc_2009","porc_2010","porc_2011","porc_2012","porc_2013"];

dataFromCSV.map(function (d) {
                  keys.forEach(function (k) {
                    d[k] = d[k]/100;
                  });
                  return d;
                });

})();
              
              xScale.domain(d3.extent(dataFromCSV,function(d,i) { return +d.porc_2013}))
              yScale.domain(d3.extent(dataFromCSV,function(d,i) { return +d.km2_2013}))

items = d3.select("svg").selectAll("circle")
                        .data(dataFromCSV);

//ENTER
              items.enter()
                .append("circle")
                .attr("cx",function(d,i) {
                  return paddingObject.left + xScale(+d.porc_2013)
                })
                .attr("fill", "black")
                .attr("cy", heightGraph + paddingObject.top )
                .attr("r","0px")            
                .append("title")
                .text(function(d) {
                  return d.country_name + " tiene un area forestal del " + formatNumber(".2%", d.porc_2013) +", equivalente a " + formatNumber(",0f",d.km2_2013) + " km2 "
                });;

//EXIT
              items.exit().remove()

//UPDATE
              items
                .sort(function(a,b) {
                  return d3.descending(+a.km2_2013,+b.km2_2013)})                        
                .transition()
                .delay(function(d,i) {
                  return i*30
                })

.duration(3000)
                .attr("cy",function(d,i) {
                  return paddingObject.top + yScale(+d.km2_2013)
                })
                .attr("cx",function(d,i) {
                  return paddingObject.left + xScale(+d.porc_2013)
                })
                .attr("r","5px")
                .attr("fill", "#547553")
                .attr("opacity", "0.6")

xAxis.call(axisDraw(xScale, "bottom", 20, ".0%"));

yAxis.call(axisDraw(yScale, "left", 20, ".2s"));

});

d3.select("#log")
            .on("click", function () {
              yScale = d3.scale.log().range([heightGraph,0]);
              yScale.domain(d3.extent(items.data(),function(d,i) { return +d.km2_2013}));

refreshItems();
              refreshAxis(20);
            });

d3.select("#logn")
            .on("click", function () {
              yScale = d3.scale.log().range([heightGraph,0]).base(Math.E);
              yScale.domain(d3.extent(items.data(),function(d,i) { return +d.km2_2013}));

refreshItems();
              refreshAxis(20);
            });

d3.select("#lin")
            .on("click", function () {
              yScale = d3.scale.linear().range([heightGraph,0]);
              yScale.domain(d3.extent(items.data(),function(d,i) { return +d.km2_2013}));

refreshItems();
              refreshAxis(20);
            });

var refreshItems = function (ticks) {
            items
                .sort(function(a,b) {
                  return d3.descending(+a.km2_2013,+b.km2_2013)})                        
                .transition()
                .delay(function(d,i) {
                  return i*30
                })
                .duration(3000)
                .attr("cy",function(d,i) {
                  return paddingObject.top + yScale(+d.km2_2013)
                });
          };

var refreshAxis = function (ticks) {
            yAxis.selectAll(".tick")
                .remove();

yAxis.call(axisDraw(yScale, "left", ticks, ".2s"));
          };
            
    </script>
      }
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js