Responsive svg layout

_.md

[ Launch: Responsive svg layout ] 6745287 by roundrobin
[ Launch: Tributary inlet ] 6509693 by roundrobin

config.json

{"description":"Responsive svg layout","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},"test.json":{"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,"thumbnail":"http://i.imgur.com/fk1ABrj.png"}

inlet.js

var data = tributary.test;
var nrOfEls = data.length/2;

console.log("nrOfEls",nrOfEls);
var columns = 2;

var width = 534;
var height = 261;

var coffeeType = "mokka-lbs";

var chartGroup = g.append("g")
  .attr({
    transform: "translate("+[83,84]+")",
    "class": "group"
  });


var backgroundRect = chartGroup.append("rect")
.attr({
  width: width,
  height: height,
  fill: "#A8A8A8"
});


var totalRange = d3.range(nrOfEls);

var range =  d3.range(Math.ceil(nrOfEls / columns));

var heightScale = d3.scale.ordinal().domain(range).rangeBands([0, height], 0.1);
var widthScale = d3.scale.ordinal().domain(d3.range(columns)).rangeBands([0, width], 0.1);


var color = "#133E8C";
var strokeColor = "#C88100";
var strokeWidth = 1;
var fontColor = "#C68200";

var xIndex = 0;
var yIndex = 0;
var yIndexHelper = 0;
var ySum = 0;

var radius = Math.min(heightScale.rangeBand()/2, widthScale.rangeBand()/2);

var selection = chartGroup.selectAll('.circleGroups')
.data(data)
.enter();


var x = 0;
var y = 0;
var rectGroup = selection.append("g")
.attr({
  transform: function(d,i){
    if(xIndex % columns === 0){
      xIndex = 0;
    }
    xIndex++; 
    
    if(yIndexHelper % columns === 0){
      yIndex++;
      yIndexHelper = 0;
    }  
    yIndexHelper++;
    
    y = heightScale(yIndex-1);
    x = widthScale(xIndex-1);
    
    return "translate("+[x, y]+")";
  },
  "class": "zickzack-group"
});


rectGroup.append("rect")
.attr({
  width: widthScale.rangeBand(),
  height: heightScale.rangeBand(),
  fill: "#C5C5C5"
});

rectGroup.append("circle")
.attr({
  r: radius-strokeWidth,
  cx: radius,
  cy: radius,
  fill: color,
  stroke: strokeColor,
  "stroke-width" : strokeWidth
});

rectGroup.append('text')
.text(function(d,i){
  return d.date;
})
.attr({
  fill: "#000000",
  x : radius *2.2,
  y: 24
});

rectGroup.append('text')
.text(function(d,i){
  return d[coffeeType];
})
.attr({
  fill: fontColor,
  x : radius *2.2 + 120,
  y: 26,
  "font-size": 22,
  "font-family": "Arial",
  "text-anchor": "start"
});

test.json

[{"date":"1/1/2012","mokka-lb":"8.12","mokka-lbs":"27","arusha-lb":"9.18","arusha-lbs":"23","ethiopianyirgacheffe-lb":"8.32","ethiopianyirgacheffe-lbs":"28","k7-lb":"5.86","k7-lbs":"12","pacas-lb":"6.41","pacas-lbs":"23","uganda-lb":"5.56","uganda-lbs":"18","rowNumber":1},{"date":"2/1/2012","mokka-lb":"9.08","mokka-lbs":"23","arusha-lb":"10.69","arusha-lbs":"16","ethiopianyirgacheffe-lb":"9.67","ethiopianyirgacheffe-lbs":"19","k7-lb":"6.6","k7-lbs":"22","pacas-lb":"6","pacas-lbs":"17","uganda-lb":"3.71","uganda-lbs":"9","rowNumber":2},{"date":"3/1/2012","mokka-lb":"9.66","mokka-lbs":"28","arusha-lb":"11.68","arusha-lbs":"22","ethiopianyirgacheffe-lb":"10.72","ethiopianyirgacheffe-lbs":"17","k7-lb":"7.71","k7-lbs":"31","pacas-lb":"7.21","pacas-lbs":"13","uganda-lb":"2.52","uganda-lbs":"0","rowNumber":3},{"date":"4/1/2012","mokka-lb":"9.59","mokka-lbs":"35","arusha-lb":"11.99","arusha-lbs":"30","ethiopianyirgacheffe-lb":"11.72","ethiopianyirgacheffe-lbs":"15","k7-lb":"8.47","k7-lbs":"31","pacas-lb":"8.07","pacas-lbs":"20","uganda-lb":"4.52","uganda-lbs":"5","rowNumber":4},{"date":"5/1/2012","mokka-lb":"7.69","mokka-lbs":"42","arusha-lb":"10.83","arusha-lbs":"38","ethiopianyirgacheffe-lb":"10.47","ethiopianyirgacheffe-lbs":"23","k7-lb":"6.88","k7-lbs":"38","pacas-lb":"6.81","pacas-lbs":"20","uganda-lb":"4.43","uganda-lbs":"1","rowNumber":5},{"date":"6/1/2012","mokka-lb":"9.41","mokka-lbs":"34","arusha-lb":"11.57","arusha-lbs":"29","ethiopianyirgacheffe-lb":"12.28","ethiopianyirgacheffe-lbs":"16","k7-lb":"7.09","k7-lbs":"44","pacas-lb":"6.42","pacas-lbs":"21","uganda-lb":"5.21","uganda-lbs":"5","rowNumber":6},{"date":"7/1/2012","mokka-lb":"10.81","mokka-lbs":"26","arusha-lb":"13.14","arusha-lbs":"24","ethiopianyirgacheffe-lb":"11.36","ethiopianyirgacheffe-lbs":"11","k7-lb":"7.75","k7-lbs":"34","pacas-lb":"7.71","pacas-lbs":"17","uganda-lb":"7.18","uganda-lbs":"7","rowNumber":7},{"date":"8/1/2012","mokka-lb":"9.61","mokka-lbs":"36","arusha-lb":"14.11","arusha-lbs":"31","ethiopianyirgacheffe-lb":"11.03","ethiopianyirgacheffe-lbs":"18","k7-lb":"6.82","k7-lbs":"33","pacas-lb":"6.45","pacas-lbs":"8","uganda-lb":"6.81","uganda-lbs":"13","rowNumber":8},{"date":"9/1/2012","mokka-lb":"10.13","mokka-lbs":"33","arusha-lb":"12.41","arusha-lbs":"23","ethiopianyirgacheffe-lb":"9.8","ethiopianyirgacheffe-lbs":"23","k7-lb":"5.38","k7-lbs":"23","pacas-lb":"5.27","pacas-lbs":"1","uganda-lb":"7.13","uganda-lbs":"9","rowNumber":9},{"date":"10/1/2012","mokka-lb":"9.56","mokka-lbs":"42","arusha-lb":"12.95","arusha-lbs":"28","ethiopianyirgacheffe-lb":"10.01","ethiopianyirgacheffe-lbs":"26","k7-lb":"3.9","k7-lbs":"21","pacas-lb":"5.51","pacas-lbs":"6","uganda-lb":"5.3","uganda-lbs":"18","rowNumber":10},{"date":"11/1/2012","mokka-lb":"7.56","mokka-lbs":"41","arusha-lb":"12.76","arusha-lbs":"34","ethiopianyirgacheffe-lb":"9.9","ethiopianyirgacheffe-lbs":"26","k7-lb":"5.13","k7-lbs":"28","pacas-lb":"4.15","pacas-lbs":"10","uganda-lb":"4.23","uganda-lbs":"14","rowNumber":11},{"date":"12/1/2012","mokka-lb":"6.72","mokka-lbs":"34","arusha-lb":"14.35","arusha-lbs":"42","ethiopianyirgacheffe-lb":"8.32","ethiopianyirgacheffe-lbs":"27","k7-lb":"3.96","k7-lbs":"32","pacas-lb":"2.36","pacas-lbs":"4","uganda-lb":"4.83","uganda-lbs":"20","rowNumber":12},{"date":"1/1/2013","mokka-lb":"5.74","mokka-lbs":"36","arusha-lb":"13.58","arusha-lbs":"39","ethiopianyirgacheffe-lb":"7.01","ethiopianyirgacheffe-lbs":"17","k7-lb":"2.85","k7-lbs":"38","pacas-lb":"2.97","pacas-lbs":"0","uganda-lb":"4.44","uganda-lbs":"10","rowNumber":13},{"date":"2/1/2013","mokka-lb":"6.28","mokka-lbs":"27","arusha-lb":"14.99","arusha-lbs":"33","ethiopianyirgacheffe-lb":"5.53","ethiopianyirgacheffe-lbs":"23","k7-lb":"0.970000000000001","k7-lbs":"37","pacas-lb":"3.8","pacas-lbs":"8","uganda-lb":"6.19","uganda-lbs":"11","rowNumber":14},{"date":"3/1/2013","mokka-lb":"6","mokka-lbs":"37","arusha-lb":"16.73","arusha-lbs":"31","ethiopianyirgacheffe-lb":"3.9","ethiopianyirgacheffe-lbs":"25","k7-lb":"0.829999999999999","k7-lbs":"34","pacas-lb":"2.09","pacas-lbs":"1","uganda-lb":"4.54","uganda-lbs":"1","rowNumber":15},{"date":"4/1/2013","mokka-lb":"4.96","mokka-lbs":"39","arusha-lb":"16.22","arusha-lbs":"26","ethiopianyirgacheffe-lb":"4.29","ethiopianyirgacheffe-lbs":"21","k7-lb":"0.449999999999999","k7-lbs":"30","pacas-lb":"2.47","pacas-lbs":"2","uganda-lb":"2.68","uganda-lbs":"5","rowNumber":16},{"date":"5/1/2013","mokka-lb":"6.46","mokka-lbs":"49","arusha-lb":"15.58","arusha-lbs":"33","ethiopianyirgacheffe-lb":"2.55","ethiopianyirgacheffe-lbs":"19","k7-lb":"0.150000000000001","k7-lbs":"30","pacas-lb":"3.63","pacas-lbs":"8","uganda-lb":"3.03","uganda-lbs":"14","rowNumber":17},{"date":"6/1/2013","mokka-lb":"6.09","mokka-lbs":"49","arusha-lb":"15.44","arusha-lbs":"35","ethiopianyirgacheffe-lb":"3.52","ethiopianyirgacheffe-lbs":"18","k7-lb":"1.36","k7-lbs":"21","pacas-lb":"3.93","pacas-lbs":"17","uganda-lb":"4.5","uganda-lbs":"14","rowNumber":18},{"date":"7/1/2013","mokka-lb":"4.16","mokka-lbs":"51","arusha-lb":"14.48","arusha-lbs":"37","ethiopianyirgacheffe-lb":"2.63","ethiopianyirgacheffe-lbs":"27","k7-lb":"0.410000000000001","k7-lbs":"18","pacas-lb":"4.39","pacas-lbs":"9","uganda-lb":"3.49","uganda-lbs":"15","rowNumber":19},{"date":"8/1/2013","mokka-lb":"2.37","mokka-lbs":"47","arusha-lb":"13.32","arusha-lbs":"31","ethiopianyirgacheffe-lb":"1.65","ethiopianyirgacheffe-lbs":"34","k7-lb":"1.02","k7-lbs":"14","pacas-lb":"4.78","pacas-lbs":"16","uganda-lb":"3.27","uganda-lbs":"21","rowNumber":20},{"date":"9/1/2013","mokka-lb":"4.15","mokka-lbs":"54","arusha-lb":"13","arusha-lbs":"34","ethiopianyirgacheffe-lb":"3.41","ethiopianyirgacheffe-lbs":"37","k7-lb":"1.35","k7-lbs":"18","pacas-lb":"3.18","pacas-lbs":"6","uganda-lb":"4.11","uganda-lbs":"17","rowNumber":21},{"date":"10/1/2013","mokka-lb":"2.65","mokka-lbs":"54","arusha-lb":"14.04","arusha-lbs":"33","ethiopianyirgacheffe-lb":"3.46","ethiopianyirgacheffe-lbs":"47","k7-lb":"2.56","k7-lbs":"26","pacas-lb":"4.34","pacas-lbs":"4","uganda-lb":"4","uganda-lbs":"18","rowNumber":22},{"date":"11/1/2013","mokka-lb":"2.74","mokka-lbs":"56","arusha-lb":"13.15","arusha-lbs":"39","ethiopianyirgacheffe-lb":"4.68","ethiopianyirgacheffe-lbs":"47","k7-lb":"2.77","k7-lbs":"29","pacas-lb":"4.83","pacas-lbs":"3","uganda-lb":"4.31","uganda-lbs":"22","rowNumber":23},{"date":"12/1/2013","mokka-lb":"2.71","mokka-lbs":"50","arusha-lb":"14.01","arusha-lbs":"37","ethiopianyirgacheffe-lb":"4.89","ethiopianyirgacheffe-lbs":"49","k7-lb":"1.28","k7-lbs":"26","pacas-lb":"5.91","pacas-lbs":"12","uganda-lb":"4.97","uganda-lbs":"15","rowNumber":24}]