Responsive svg layout

_.md

[ 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}},"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 nrOfEls = 5;
var columns = 2;

var width = 609;
var height = 244;




g.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);

console.log(widthScale.rangeBand());

var color = "#133E8C";
var strokeColor = "#C88100";
var strokeWidth = 6;
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 = g.selectAll('.circleGroups')
.data(totalRange)
.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("Facebook Traffic")
.attr({
  fill: "#000000",
  x : radius *2.2,
  y: 24,
  "font-size": 15,
  "font-family": "Arial",
  "text-anchor": "start"
});

rectGroup.append('text')
.text("+21.23%")
.attr({
  fill: fontColor,
  x : radius *2.2,
  y: 50,
  "font-size": 28,
  "font-family": "Arial",
  "text-anchor": "start"
});