Countries GDP/growth (radius)

_.md

[ Launch: Countries GDP/growth (radius) ] 84c03f04c3d364473359 by poezn
[ Launch: Countries GDP/growth (radius) ] fe6fceaece88fd1221a1 by poezn
[ Launch: Countries GDP/growth (opacity) ] e87d7188fa63f4e76f31 by poezn
[ Launch: Force Countries ] 4341604f51fda6e6ce1f by poezn

config.json

{"description":"Countries GDP/growth (radius)","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"country_codes.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"geo.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true,"thumbnail":"http://i.imgur.com/OMH2HWU.png"}

country_codes.json

{"ad":[42.5000,1.5000],"ae":[24.0000,54.0000],"af":[33.0000,65.0000],"ag":[17.0500,-61.8000],"ai":[18.2500,-63.1667],"al":[41.0000,20.0000],"am":[40.0000,45.0000],"an":[12.2500,-68.7500],"ao":[-12.5000,18.5000],"ap":[35.0000,105.0000],"aq":[-90.0000,0.0000],"ar":[-34.0000,-64.0000],"as":[-14.3333,-170.0000],"at":[47.3333,13.3333],"au":[-27.0000,133.0000],"aw":[12.5000,-69.9667],"az":[40.5000,47.5000],"ba":[44.0000,18.0000],"bb":[13.1667,-59.5333],"bd":[24.0000,90.0000],"be":[50.8333,4.0000],"bf":[13.0000,-2.0000],"bg":[43.0000,25.0000],"bh":[26.0000,50.5500],"bi":[-3.5000,30.0000],"bj":[9.5000,2.2500],"bm":[32.3333,-64.7500],"bn":[4.5000,114.6667],"bo":[-17.0000,-65.0000],"br":[-10.0000,-55.0000],"bs":[24.2500,-76.0000],"bt":[27.5000,90.5000],"bv":[-54.4333,3.4000],"bw":[-22.0000,24.0000],"by":[53.0000,28.0000],"bz":[17.2500,-88.7500],"ca":[60.0000,-95.0000],"cc":[-12.5000,96.8333],"cd":[0.0000,25.0000],"cf":[7.0000,21.0000],"cg":[-1.0000,15.0000],"ch":[47.0000,8.0000],"ci":[8.0000,-5.0000],"ck":[-21.2333,-159.7667],"cl":[-30.0000,-71.0000],"cm":[6.0000,12.0000],"cn":[35.0000,105.0000],"co":[4.0000,-72.0000],"cr":[10.0000,-84.0000],"cu":[21.5000,-80.0000],"cv":[16.0000,-24.0000],"cx":[-10.5000,105.6667],"cy":[35.0000,33.0000],"cz":[49.7500,15.5000],"de":[51.0000,9.0000],"dj":[11.5000,43.0000],"dk":[56.0000,10.0000],"dm":[15.4167,-61.3333],"do":[19.0000,-70.6667],"dz":[28.0000,3.0000],"ec":[-2.0000,-77.5000],"ee":[59.0000,26.0000],"eg":[27.0000,30.0000],"eh":[24.5000,-13.0000],"er":[15.0000,39.0000],"es":[40.0000,-4.0000],"et":[8.0000,38.0000],"eu":[47.0000,8.0000],"fi":[64.0000,26.0000],"fj":[-18.0000,175.0000],"fk":[-51.7500,-59.0000],"fm":[6.9167,158.2500],"fo":[62.0000,-7.0000],"fr":[46.0000,2.0000],"ga":[-1.0000,11.7500],"gb":[54.0000,-2.0000],"gd":[12.1167,-61.6667],"ge":[42.0000,43.5000],"gf":[4.0000,-53.0000],"gh":[8.0000,-2.0000],"gi":[36.1833,-5.3667],"gl":[72.0000,-40.0000],"gm":[13.4667,-16.5667],"gn":[11.0000,-10.0000],"gp":[16.2500,-61.5833],"gq":[2.0000,10.0000],"gr":[39.0000,22.0000],"gs":[-54.5000,-37.0000],"gt":[15.5000,-90.2500],"gu":[13.4667,144.7833],"gw":[12.0000,-15.0000],"gy":[5.0000,-59.0000],"hk":[22.2500,114.1667],"hm":[-53.1000,72.5167],"hn":[15.0000,-86.5000],"hr":[45.1667,15.5000],"ht":[19.0000,-72.4167],"hu":[47.0000,20.0000],"id":[-5.0000,120.0000],"ie":[53.0000,-8.0000],"il":[31.5000,34.7500],"in":[20.0000,77.0000],"io":[-6.0000,71.5000],"iq":[33.0000,44.0000],"ir":[32.0000,53.0000],"is":[65.0000,-18.0000],"it":[42.8333,12.8333],"jm":[18.2500,-77.5000],"jo":[31.0000,36.0000],"jp":[36.0000,138.0000],"ke":[1.0000,38.0000],"kg":[41.0000,75.0000],"kh":[13.0000,105.0000],"ki":[1.4167,173.0000],"km":[-12.1667,44.2500],"kn":[17.3333,-62.7500],"kp":[40.0000,127.0000],"kr":[37.0000,127.5000],"kw":[29.3375,47.6581],"ky":[19.5000,-80.5000],"kz":[48.0000,68.0000],"la":[18.0000,105.0000],"lb":[33.8333,35.8333],"lc":[13.8833,-61.1333],"li":[47.1667,9.5333],"lk":[7.0000,81.0000],"lr":[6.5000,-9.5000],"ls":[-29.5000,28.5000],"lt":[56.0000,24.0000],"lu":[49.7500,6.1667],"lv":[57.0000,25.0000],"ly":[25.0000,17.0000],"ma":[32.0000,-5.0000],"mc":[43.7333,7.4000],"md":[47.0000,29.0000],"me":[42.0000,19.0000],"mg":[-20.0000,47.0000],"mh":[9.0000,168.0000],"mk":[41.8333,22.0000],"ml":[17.0000,-4.0000],"mm":[22.0000,98.0000],"mn":[46.0000,105.0000],"mo":[22.1667,113.5500],"mp":[15.2000,145.7500],"mq":[14.6667,-61.0000],"mr":[20.0000,-12.0000],"ms":[16.7500,-62.2000],"mt":[35.8333,14.5833],"mu":[-20.2833,57.5500],"mv":[3.2500,73.0000],"mw":[-13.5000,34.0000],"mx":[23.0000,-102.0000],"my":[2.5000,112.5000],"mz":[-18.2500,35.0000],"na":[-22.0000,17.0000],"nc":[-21.5000,165.5000],"ne":[16.0000,8.0000],"nf":[-29.0333,167.9500],"ng":[10.0000,8.0000],"ni":[13.0000,-85.0000],"nl":[52.5000,5.7500],"no":[62.0000,10.0000],"np":[28.0000,84.0000],"nr":[-0.5333,166.9167],"nu":[-19.0333,-169.8667],"nz":[-41.0000,174.0000],"om":[21.0000,57.0000],"pa":[9.0000,-80.0000],"pe":[-10.0000,-76.0000],"pf":[-15.0000,-140.0000],"pg":[-6.0000,147.0000],"ph":[13.0000,122.0000],"pk":[30.0000,70.0000],"pl":[52.0000,20.0000],"pm":[46.8333,-56.3333],"pr":[18.2500,-66.5000],"ps":[32.0000,35.2500],"pt":[39.5000,-8.0000],"pw":[7.5000,134.5000],"py":[-23.0000,-58.0000],"qa":[25.5000,51.2500],"re":[-21.1000,55.6000],"ro":[46.0000,25.0000],"rs":[44.0000,21.0000],"ru":[60.0000,100.0000],"rw":[-2.0000,30.0000],"sa":[25.0000,45.0000],"sb":[-8.0000,159.0000],"sc":[-4.5833,55.6667],"sd":[15.0000,30.0000],"se":[62.0000,15.0000],"sg":[1.3667,103.8000],"sh":[-15.9333,-5.7000],"si":[46.0000,15.0000],"sj":[78.0000,20.0000],"sk":[48.6667,19.5000],"sl":[8.5000,-11.5000],"sm":[43.7667,12.4167],"sn":[14.0000,-14.0000],"so":[10.0000,49.0000],"sr":[4.0000,-56.0000],"st":[1.0000,7.0000],"sv":[13.8333,-88.9167],"sy":[35.0000,38.0000],"sz":[-26.5000,31.5000],"tc":[21.7500,-71.5833],"td":[15.0000,19.0000],"tf":[-43.0000,67.0000],"tg":[8.0000,1.1667],"th":[15.0000,100.0000],"tj":[39.0000,71.0000],"tk":[-9.0000,-172.0000],"tm":[40.0000,60.0000],"tn":[34.0000,9.0000],"to":[-20.0000,-175.0000],"tr":[39.0000,35.0000],"tt":[11.0000,-61.0000],"tv":[-8.0000,178.0000],"tw":[23.5000,121.0000],"tz":[-6.0000,35.0000],"ua":[49.0000,32.0000],"ug":[1.0000,32.0000],"um":[19.2833,166.6000],"us":[38.0000,-97.0000],"uy":[-33.0000,-56.0000],"uz":[41.0000,64.0000],"va":[41.9000,12.4500],"vc":[13.2500,-61.2000],"ve":[8.0000,-66.0000],"vg":[18.5000,-64.5000],"vi":[18.3333,-64.8333],"vn":[16.0000,106.0000],"vu":[-16.0000,167.0000],"wf":[-13.3000,-176.2000],"ws":[-13.5833,-172.3333],"ye":[15.0000,48.0000],"yt":[-12.8333,45.1667],"za":[-29.0000,24.0000],"zm":[-15.0000,30.0000],"zw":[-20.0000,30.0000]}

data.tsv

geo.json

inlet.js

var countryCodes = tb.country_codes;
var geo = tb.geo;
var data = {};
_.each(tb.data, function(d, i) {
  data[d.key] = { value: +d.gdp, growth: +d.growth, country: d.country}
});
var width = 960,
    height = 500;

var rScale = d3.scale.sqrt()
.domain([0, d3.max(tb.data, function(d, i) { return d.gdp })])
.range([0, 43]);

var colorGrowth = "#F9C327";
var colorShrinking = "#605757";

var duration = 0.5;

var scaleRingSizeFactor = d3.scale.linear()
.domain([d3.min(tb.data, function(d, i) { return d.growth }), 0, d3.max(tb.data, function(d, i) { return d.growth })])
.range([-0.01, 0, 1])

var scaleRingSize = d3.scale.linear()
.domain([0, duration])
.range([0, 43])

var timeScaleOpacity = d3.scale.linear()
.domain([0, duration / 2, duration])
.range([1, 0.7, 0.1])

var projection = d3.geo.equirectangular()
    .scale(928)
    .translate([419, 1138])

var foci = {};
_.each(countryCodes, function(coords, code) {
	foci[code] = projection([coords[1], coords[0]]);
});

var path = d3.geo.path()
.projection(projection);

var nodes = _.chain(countryCodes)
.map(function(d, key) { 
  return { 
    label: data[key] ? data[key].country : null,
    id: key,
    x: foci[key][0],
    y: foci[key][1],
    growth: data[key] ? data[key].growth : null,
    value: data[key] ? data[key].value : null,
    radius: rScale(data[key] ? data[key].value : 0)
  } 
})
.filter(function(d, i) { 
  //return true;
  return ["al","at","by","be","ba","bg","hr","cz","dk","ee","fi","fr","de","gr","hu","is","ie","it","lv","lt","lu","mk","mt","md","mc","nl","no","pl","pt","ro","ru","rs","sk","si","es","se","ch","ua","gb"].indexOf(d.id) >= 0;
})
.value();


g.selectAll("path")
.data(geo.features) 
.enter().append("path")
.attr({
  "d": path,
  "id": function(d) { return d.id} ,
  "fill": "#E6E6E6"
});


var node = g.selectAll("g.node");
 
function tick(e) { 
  var k = 0.1 * e.alpha;

  // Push nodes toward their designated focus.
  _.each(nodes, function(o, i) {   
    o.y += (foci[o.id][1] - o.y) * k;
    o.x += (foci[o.id][0] - o.x) * k; 
    o.coords = [o.x, o.y]
  });
  
  _.each(nodes, collide(0.5));

  node.attr("transform", function(d) { return "translate(" + [d.x, d.y].join(" ") + ")"; })
 
} 

var padding = 1.5, // separation between same-color circles
    clusterPadding = 9, // separation between different-color circles
    maxRadius = 11;

// Resolves collisions between d and all other circles.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(nodes);
  return function(d) {
    var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
    quadtree.visit(function(quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var x = d.x - quad.point.x,
            y = d.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
        if (l < r) {
          l = (l - r) / l * alpha;
          d.x -= x *= l;
          d.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
}

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .gravity(0)
    .charge(function(d, i) {
      return -d.value / 5819
    })
.linkDistance(function(d, i) {
  return rScale(d.value)
})
    .on("tick", tick);


tributary.init = function(g) {
  node = node.data(nodes);
  
  var bubbles = node.enter().append("g")
  .attr({
    "class": "node",
    "id": function(d) { return "bubble-" + d.label },
    "transform": function(d) {
      return "translate(" + [d.tx, d.ty].join(" ") + ")"
    }
  })
  .call(force.drag);
  
  bubbles
  .filter(function(d) { return d.growth > 0})
  .append("circle")
  .attr({
    "class": "ripple",
    "cx": 0,
    "cy": 0,
    "r": function(d, i) {
      return rScale(d.value);
    },
    "fill": colorGrowth,
    "fill-opacity": 0.4,
    "stroke": colorGrowth 
  })
    
  
  bubbles
  .append("circle")
  .attr({
    "class": "bubble",
    "cx": 0,
    "cy": 0,
    "r": function(d, i) {
      return rScale(d.value);
    },
    "fill": "#303887",
    "fill-opacity":12
  });
  
  bubbles
  .append("text")
  .attr({
    "text-anchor": "middle",
    "transform": function(d, i) {
      var ty = rScale(d.weight) / 2 + 10,
          tx = 0;
      return "translate(" + [tx, ty].join(" ") + ")"
    },
    "fill": "#FFF",
    "font-size": 9
  })
  .text(function(d, i) {
    return d.label.substring(0, rScale(d.value) / 3).toUpperCase()
  });
  
  force.start();
}


tributary.run = function(g, t) {
    var factor = t % duration
	g.selectAll("circle.ripple")
    .filter(function(d) { return d.growth > 0})
    .attr({
      "r": function(d) {
        return d.radius + scaleRingSize(factor) * scaleRingSizeFactor(d.growth)
      },
      "opacity": function(d) {
        return timeScaleOpacity(factor)
      }
    })
}

styles.css

#display {
  background-color: #FFF
}