test

_.md

[ Launch: test ] 8190c463d7696cdec6fc by hrickards
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");

// data
var data = [
  {
    year: 2016,
    data: [
      {
        id: 14,
        name: "Russia",
        indexes: {
          1: 20,
          2: 30
        }
      },
      {
        id: 15,
        name: "Germany",
        indexes: {
          1: 25,
          2: 20
        }
      },
      {
        id: 16,
        name: "USA",
        indexes: {
          1: 15,
          2: 17
        }
      }
    ]
  },
  {
    year: 2015,
    data: [
      {
        id: 14,
        name: "Russia",
        indexes: {
          1: 30,
          2: 25
        }
      },
      {
        id: 15,
        name: "Germany",
        indexes: {
          1: 16,
          2: 38
        }
      },
      {
        id: 16,
        name: "USA",
        indexes: {
          1: 25,
          2: 33
        }
      }
    ]
  }
];

var targetPositions = {};
var targetHorizontalPadding = 10;
var targetVerticalPadding = 10;
var targetWidth = 25;
var targetHeight = 25;

var timePadding = 10;
var timeH

data = data.map(function (time, timeIdx) {
  time.data = time.data.map(function (target) {
    // horizontal position
    if (!(target.id in targetPositions)) {
      targetPositions[target.id] = Object.keys(targetPositions).length * (targetWidth + targetHorizontalPadding) + targetHorizontalPadding;
    }
    target.x = targetPositions[target.id];
    
    // vertical position
    target.y = timeIdx * (targetHeight + targetVerticalPadding) + targetVerticalPadding;

    return target;
  });
  return time;
});

svg.selectAll("rect").data(data[0].data).enter()
  .append("rect")
  .attr("x", function (d) { return d.x; })
  .attr("y", function (d) { return d.y; })
  .attr("width", targetWidth)
  .attr("height", targetHeight)
  .text(function (d) { return d.name });