Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

top 10 news

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>top 10 news</title>
</head>
<body>

<script>
  
var data;
var url = 'https://infovis.it.itba.edu.ar/news/fb_data.php?key=2b9c1508a73a9e713a05420d9887cf13';
d3.json(url, function(error, json) {
  if (error) return console.warn(error);
  var tmp = {"name" : "top10", "children" : [] };
  json.forEach(function(d) {  
    tmp.children.push( {"name": d[1] ,"size": d[2] } );
  });
  data = tmp;
  visualizeit();
});

function visualizeit() {
  var w = 500, format = d3.format(",d");
  var c10 = d3.scale.category10();

var pack = d3.layout.pack()
    .size([w, w])
    .sort(null)
    .padding(5)
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg").attr("width", w).attr("height", w);

var vis = svg.datum(data).selectAll(".node").data(pack.nodes).enter().append("g")
               .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var titles = vis.append("title").text(function(d) { return d.name; });
  var circles = vis.append("circle")
                 .style("fill", function(d,i) { return !d.children ? c10(i) : "white"; })
                 .attr("stroke", "grey")
                 .attr("r", function(d)  { return d.r; })
                 .on("mouseout", function()  { d3.select(this).attr("stroke","grey"); })
                 .on("mouseover", function() { d3.select(this).attr("stroke","black"); });  
}  
</script>

</body>
</html>

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