jdotnicol/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## eu.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              eu.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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 width = 960;
  var height = 500;
  var center = [10, 72];
  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>
	<!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 width = 960;
	var height = 500;
	var center = [10, 72];
	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>