Cloud con círculos

forked from jdotnicol's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://unpkg.com/topojson@3"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
var datos = [
  {text: "Emp",    frequency:  31},
  {text: "Pro",    frequency:  20},
  {text: "Can",     frequency: 58},
  {text: "No",   frequency: 25},
  {text: "Cli",    frequency:  31},
  {text: "Epa",    frequency:  20},
  {text: "Prd",     frequency: 58},
  {text: "Cie",   frequency: 25},
  {text: "Ent",    frequency:  31},
  {text: "Noh",    frequency:  20},
  {text: "Cen",     frequency: 58},
  {text: "Otros",   frequency: 25}
];
    
	var width = 960;
  var height = 500;
  var center = [25, 70];
  var scale = 395;
  
  var projection = d3.geoMercator()
  		.scale(scale)
  		.translate([width / 2, 0])
  		.center(center);
  
  var path = d3.geoPath().projection(projection);
  
  
  var svg = d3.select("body")
  		.append("svg")
  		.attr("height", height)
  		.attr("width", width);
  
  
	var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
 	
  var g = svg.append("g");
    
    var getX = function(feature){
    return path.centroid(feature)[0];
  };
  
  var getY = function(feature){
    return path.centroid(feature)[1];
  };
  
  var getEmissions = function(feature){
    return(feature.properties.data_2013_CO2_MTpc *2 );
  };

// Reads in TOPOjson file into path specified above, however displays circles based on polygon centroids using path.centroid
    
	d3.json("eu.json", function(data) {
    			var geojson = topojson.feature(data, data.objects.eu).features;
    			var nodes = geojson.filter(function(d, i){
            return (d.properties.data_2013_CO2_MTpc !== null);
          })
          .map(function(d){
            //console.log(d);
            var point = path.centroid(d);
            var value = d.properties.data_2013_CO2_MTpc; 
            if (value === null) return {};
            
            var obj = {
              name: d.properties.name,
              label: d.properties.iso_3,
              x: point[0], y: point[1],
              x0: point[0], y0: point[1],
              r: value*2,
              value: value
            };
            //console.log(obj);
            return obj;
          });
    			
   				var simulation = d3.forceSimulation(nodes)
          	.force("charge", d3.forceManyBody().strength(1))
          	.force("collide", d3.forceCollide(function(d) {
          	  return d.r;
         		}).strength(1))
        	  .on('tick', function() {
           		node
              	.attr("cx", function(d) { return d.x; })
              	.attr("cy", function(d) { return d.y; });
          });
    
    			g.datum(nodes);
    
    			var node = g.selectAll("circle")
          .data(function(d) { return d; })
          .enter()
          .append("circle")
          	.attr("r", function(d) { return d.r; })
          	.attr("fill", function(d,i){ return "hsl(" + Math.random() * 360 + ",100%,50%)";});
  });
    
//     d3.json("eu.json", function(data) {
//       var circles = g.selectAll(".circles")
//       .data(topojson.feature(data, data.objects.eu).features)
//       .enter()
//       .append('circle')
// 				.attr('class', 'circles')
// 				.attr("id", "dorling")
//       	.attr('cx', getX)
//       	.attr('cy', getY)
//       	.attr('r', getEmissions)
//       	.style("opacity", 1)
//         .attr("fill",function(d,i){ return "hsl(" + Math.random() * 360 + ",100%,50%)";})

//       .attr('d', path);
//   	});

</script>
</body>

https://d3js.org/d3.v4.js

https://unpkg.com/topojson@3