La Nación (noticias mas leídas por sección) by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
  
  <meta charset="utf-8">
  <title>La Nación</title>
 
  <style>
    body {
      margin-top: 20px;
      margin-left: 20px;
    }
    a {
	    word-wrap: break-word;
    }
  </style>
 
</head>
<body>
  <h1>La Nación</h1>
  <h3>las noticias mas leídas</h3>
  <div id="buttons"></div>  
  <img id="loading" src="">
  <div id="news"></div>  
  
<script>
var secciones = [
  {"id":"ultimas-noticias","text":"Últimas noticias"},
  {"id":"politica","text":"Política"},
  {"id":"economia","text":"Economía"},
  {"id":"exterior","text":"Exterior"},
  {"id":"sociedad","text":"Sociedad"},
  {"id":"seguridad","text":"Seguridad"},
  {"id":"espectaculos","text":"Espectáculos"}
];

var data;
var nice = d3.format(",");
var url;
var seccion; 
var loading = "//especiales.lanacion.com.ar/multimedia/proyectos/15/elecciones/elecciones_2015_caba_grales/img/ln_loader.gif";
var done = "https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png";
d3.select("img#loading").attr("src", done);
  
d3.select("div#buttons").selectAll("button").data(secciones).enter()
  .append("button")
  .attr("type","button")
  .attr("id",function(d,i) { return d.id; })
  .text(function(d,i) { return d.text; });


function refresh(s) {
  
  url = "//www.lanacion.com.ar/mas-popular/" + s + "/json/";
  
  d3.select("div#news").selectAll("p").data([]).exit().remove();
  d3.select("img#loading").attr("src", loading);
  
  $.ajax({
    url: url,
    jsonp: false,
    jsonpCallback: "masleidas",
    dataType: "jsonp",
    success: function( response ) {
      data = response;
      var losp = d3.select("div#news").selectAll("p").data(response.children[0].children).enter().append("p");
      losp.append("a").text( function(d,i) {return d.name;} )
        .attr("data-count", function(d,i) { return d.data.playcount; } )
        .attr("href",function(d,i) { return ((d.data.url[0] == "/") ? "//www.lanacion.com.ar" + d.data.url : d.data.url); } );
      d3.select("img#loading").attr("src", done);
    }
  });
}
  
d3.selectAll("button").on("click", function() {
  seccion = d3.select(this).attr("id");
  refresh(seccion);
});
  
refresh("ultimas-noticias");
</script>
  
</body>
</html>