Changing string lengths.

_.md

[ Launch: Changing string lengths. ] 6758098 by dwskau
[ Launch: Data workshop responsive layout ] 6757864 by dwskau
[ Launch: Data workshop responsive layout ] 6757863 by dwskau
[ Launch: Responsive svg layout ] 6745386 by roundrobin
[ Launch: Responsive svg layout ] 6745287 by roundrobin
[ Launch: Tributary inlet ] 6509693 by roundrobin

config.json

{"description":"Changing string lengths.","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;

var columns = 2;

var width = 632;
var height = 214;

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: function(d,i){return d[coffeeType];},
  cx: radius,
  cy: radius,
  fill: color,
  stroke: strokeColor,
  "stroke-width" : strokeWidth
});

var texts = rectGroup.append('text')
.text(function(d,i){
  return d.date+" Level: "+d[coffeeType];
})
.attr({
  fill: "#000000",
  x : radius *2.2,
  y: heightScale.rangeBand()*0.7,
  "font-size": heightScale.rangeBand()*0.4
});

texts.each(function(){
  
  var el = d3.select(this);
  fitTextToBox((widthScale.rangeBand()-(radius*2))*0.8,heightScale.rangeBand()*0.5,el);
  
});


function fitTextToBox(boxWidth, boxHeight, text){



        var textWidth = text.node().getComputedTextLength();
        var textHeight = text.node().getBBox().height;
   
        var currentFS = 0;
        if(!text.attr("font-size")){
            console.log("fitTextToBox: No Font-size set");
        } else {
            currentFS = text.attr("font-size");
        }
            
            
        var maxWidth  = (boxWidth / textWidth );
        var maxHeight = (boxHeight /textHeight);   
        var max       = Math.min(maxWidth, maxHeight);
        var fontsize  = (currentFS * max);
		text.attr("font-size", fontsize)
        return text;

} 

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
}]