stacking blocks

_.md

[ Launch: Tributary inlet ] c3b6be63e7999001efcb by poezn

assets.svg

<g class=".blocks"></g>

config.json

{"description":"stacking blocks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"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},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"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/nUrCn0d.png"}

data.json

[
  {"country": "United States","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 0.0,"over-planned": 3.0},
{"country": "Russia *","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 5.6,"over-planned": 5.9},
{"country": "EU28","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 14.4,"over-planned": 23.1},
{"country": "Ukraine","under-construction": 0.1,"under-planned": 0.0,"free": 0.0,"over-construction": 0.1,"over-planned": 2.0},
{"country": "Japan","under-construction": 0.1,"under-planned": 0.0,"free": 0.0,"over-construction": 1.5,"over-planned": 4.9},
{"country": "South Korea","under-construction": 3.9,"under-planned": 0.0,"free": 0.0,"over-construction": 4.2,"over-planned": 7.0},
{"country": "Australia","under-construction": 0.0,"under-planned": 4.3,"free": 0.0,"over-construction": 0.0,"over-planned": 0.6},
{"country": "Indonesia","under-construction": 8.1,"under-planned": 0.6,"free": 0.0,"over-construction": 0.0,"over-planned": 24.8},
{"country": "South Africa","under-construction": 9.5,"under-planned": 2.6,"free": 0.8,"over-construction": 0.0,"over-planned": 0.0},
{"country": "India","under-construction": 92.9,"under-planned": 0.0,"free": 0.0,"over-construction": 14.7,"over-planned": 303.3},
{"country": "China","under-construction": 104.6,"under-planned": 0.0,"free": 0.0,"over-construction": 8.4,"over-planned": 370.0}
]

inlet.js

var step = 6,
      h = 400,
      duration = 0
      blocksInColumn = 4,
        padding = 2;

var scale = d3.scale.linear()
.domain([-380, 105])
.range([500, 200])

g.append("path")
.attr({
  "d": function() {
    var zero = scale(0);
    return "M" + zero + " 0L" + zero + " 1000"
  }
})
.style({
  "stroke": "#000"
})

var wBar = (scale(-(blocksInColumn*step)) - scale(0)) - padding;

var layout = function(selection) {
    selection.append("text")  
    .attr({
      "class": "label"
    })
    .text(function(d) { return d.country });
  
    selection
    .attr({
        "transform": function(d, i) {
            var baseline = scale(d["free"] + d["under-planned"] + d["under-construction"]);
            return "translate(" + [baseline, (i * 83 + 20)].join(" ") + ")";
        }
    })
  
    var blocks = selection.selectAll("rect")
    .data(function(d) {
      var dataInConstruction = d3.range(0, d["under-construction"] + d["over-construction"], step);
      var dataPlanned        = d3.range(0, d["under-planned"] + d["over-planned"], step);
      var blockData = _.flatten([
        _.map(dataInConstruction, function() { return "construction" }),
        _.map(dataPlanned, function() { return "planned" })
      ]);
      return blockData;
    });

    blocks.exit().remove();
    blocks.enter().append("rect")
    .attr({
        "width": wBar,
        "height": wBar,
        "transform": function(d, i) {
            var ty = (i % blocksInColumn) * (wBar + padding) ,
                tx = Math.floor(i / blocksInColumn) * (wBar + padding)
            return "translate(" + [tx, ty].join(" ") + ")"
        }
    });

    blocks
    .attr({
        "class": function(d) { return d; }
    })
    .style({
        "opacity": 0
    })
    .transition()
    .delay(function(d, i) {
        return duration + (i * 40);
    })
    .style({
        "opacity": 1
    });

}

g.selectAll(".blocks")
.data(tb.data)
.enter().append("g")
.attr({
  "class": "blocks"
})
.call(layout);

console.log(scale(0));
console.log(wBar);
console.log(scale(0) - scale(100))

styles.css

#display {
  background-color: #FFF;
}

.label {
  fill: #888;
  font-size: 12px;
}

.planned {
  fill: #5dadcb;
}

.construction {
  fill: #477b8e;
}