Built with blockbuilder.org
forked from jdotnicol's block: fresh block
license: mit |
Built with blockbuilder.org
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> |