Skip to content

Instantly share code, notes, and snippets.

@poezn

poezn/_.md

Created June 27, 2014 19:00
Download ZIP

Revisions

  1. poezn revised this gist Jun 27, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@ var scaleRingSize = d3.scale.linear()

    var timeScaleOpacity = d3.scale.linear()
    .domain([0, duration])
    .range([1, 0])
    .range([1, 0.4])

    var projection = d3.geo.equirectangular()
    .scale(500)
  2. poezn revised this gist Jun 27, 2014. 1 changed file with 12 additions and 9 deletions.
    21 changes: 12 additions & 9 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,15 +13,15 @@ var rScale = d3.scale.sqrt()

    var colorGrowth = "#efdd8e";

    var duration = 3;
    var duration = 0.5;

    var timeScaleFrequency = d3.scale.linear()
    var scaleFillOpacity = d3.scale.linear()
    .domain([0, d3.max(tb.data, function(d, i) { return d.growth })])
    .range([5, 0.2])
    .range([0, 1])

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

    var timeScaleOpacity = d3.scale.linear()
    .domain([0, duration])
    @@ -154,7 +154,10 @@ tributary.init = function(g) {
    "r": function(d, i) {
    return rScale(d.value);
    },
    "fill": colorGrowth
    "fill": colorGrowth,
    "fill-opacity": function(d) {
    return scaleFillOpacity(d.growth)
    }
    })

    bubbles
    @@ -166,7 +169,8 @@ tributary.init = function(g) {
    "r": function(d, i) {
    return rScale(d.value);
    }
    })
    });

    bubbles
    .append("text")
    .attr({
    @@ -188,17 +192,16 @@ tributary.init = function(g) {


    tributary.run = function(g, t) {
    var factor = t % duration
    g.selectAll("circle.ripple")
    .filter(function(d) {
    return d.growth > 0;
    })
    .attr({
    "r": function(d) {
    var factor = 1 / timeScaleFrequency(d.growth) * (t % timeScaleFrequency(d.growth));
    return d.radius + scaleRingSize(factor)
    },
    "opacity": function(d) {
    var factor = 1 / timeScaleFrequency(d.growth) * (t % timeScaleFrequency(d.growth));
    return timeScaleOpacity(factor)
    }
    })
  3. poezn revised this gist Jun 27, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"Countries GDP/growth (opacity)","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}},"fullscreen":false,"play":false,"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"}
    {"description":"Countries GDP/growth (opacity)","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}},"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"}
  4. poezn revised this gist Jun 27, 2014. No changes.
  5. poezn revised this gist Jun 27, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/e87d7188fa63f4e76f31">Launch: Countries GDP/growth (opacity)</a> ] e87d7188fa63f4e76f31 by poezn<br>[ <a href="http://tributary.io/inlet/4341604f51fda6e6ce1f">Launch: Force Countries</a> ] 4341604f51fda6e6ce1f by poezn<br>
  6. poezn created this gist Jun 27, 2014.
    1 change: 1 addition & 0 deletions config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"Countries GDP/growth (opacity)","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}},"fullscreen":false,"play":false,"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"}
    1 change: 1 addition & 0 deletions country_codes.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"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]}
    40 changes: 40 additions & 0 deletions data.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    id country growth gdp key
    43 Albania 0.0160 4000 al
    138 Austria 0.0087 46792 at
    493 Belarus 0.0150 6685 by
    305 Belgium -0.0014 43399 be
    236 Bosnia and Herzegovina -0.0070 4556 ba
    362 Bulgaria 0.0080 6977 bg
    1458 Croatia -0.0198 13879 hr
    757 Czech Republic -0.0102 18690 cz
    781 Denmark -0.0036 56364 dk
    899 Estonia 0.0394 16833 ee
    1024 Finland -0.0083 45694 fi
    1038 France 0.0001 39746 fr
    758 Germany 0.0069 42597 de
    1339 Greece -0.0637 22442 gr
    1488 Hungary -0.0170 12560 hu
    1686 Iceland 0.0140 42339 is
    1564 Ireland 0.0016 45921 ie
    1687 Italy -0.0253 33816 it
    2079 Latvia 0.0500 13947 lv
    2067 Lithuania 0.0370 14172 lt
    2078 Luxembourg -0.0018 103858 lu
    2263 Macedonia -0.0027 4565 mk
    2330 Malta 0.0100 20839 mt
    2180 Moldova -0.0080 2038 md
    3889 Montenegro -0.0055 7041 mc
    2536 Netherlands -0.0125 45960 nl
    2549 Norway 0.0290 99636 no
    2742 Poland 0.0182 12710 pl
    2798 Portugal -0.0323 20175 pt
    2859 Romania 0.0035 8437 ro
    2901 Russian Federation 0.0344 14037 ru
    3888 Serbia -0.0170 5190 rs
    3096 Slovakia 0.0180 16893 sk
    3082 Slovenia -0.0250 22059 si
    950 Spain -0.0164 28274 es
    3055 Sweden 0.0093 55040 se
    553 Switzerland 0.0105 78928 ch
    3478 Ukraine 0.0020 3867 ua
    1144 United Kingdom 0.0025 38920 gb
    182 changes: 182 additions & 0 deletions geo.json
    View file
    182 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    206 changes: 206 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,206 @@
    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, 35]);

    var colorGrowth = "#efdd8e";

    var duration = 3;

    var timeScaleFrequency = d3.scale.linear()
    .domain([0, d3.max(tb.data, function(d, i) { return d.growth })])
    .range([5, 0.2])

    var scaleRingSize = d3.scale.linear()
    .domain([0, 5])
    .range([0, 50])

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

    var projection = d3.geo.equirectangular()
    .scale(500)
    .translate([419, 671])

    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": "#888888"
    });


    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
    .append("circle")
    .attr({
    "class": "ripple",
    "cx": 0,
    "cy": 0,
    "r": function(d, i) {
    return rScale(d.value);
    },
    "fill": colorGrowth
    })

    bubbles
    .append("circle")
    .attr({
    "class": "bubble",
    "cx": 0,
    "cy": 0,
    "r": function(d, i) {
    return rScale(d.value);
    }
    })
    bubbles
    .append("text")
    .attr({
    "text-anchor": "middle",
    "transform": function(d, i) {
    var ty = rScale(d.weight) / 2,
    tx = 0;
    return "translate(" + [tx, ty].join(" ") + ")"
    },
    "fill": "#FFF",
    "font-size": "10"
    })
    .text(function(d, i) {
    return d.label.substring(0, rScale(d.value) / 3)
    });

    force.start();
    }


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