xxxxxxxxxx<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> <!--<script src="d3.js" charset="utf-8"></script>--> <style type="text/css"> body { background-color: #FFF; font-family: Helvetica; } div{ background-color: #FFF; margin: auto; width: 580px; border: 0px solid #FFF; padding: 5px; } h5{ margin-top: -10px; } h2{ margin-top: -3px; color: #AAA } .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