Skip to content

Instantly share code, notes, and snippets.

@dwskau

dwskau/_.md

Created September 30, 2013 01:02
Show Gist options
  • Save dwskau/6758103 to your computer and use it in GitHub Desktop.
Save dwskau/6758103 to your computer and use it in GitHub Desktop.
Download ZIP
Varying String Length
Raw
_.md
Raw
config.json
{"description":"Varying String Length","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"}
Raw
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: radius-strokeWidth,
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;
}
Raw
test.json
[{
"Mokka":{
"Cost":{
"1/1/2012": 5.34,
"2/1/2012": 4.67,
"3/1/2012": 5.95,
"4/1/2012": 6.23,
"5/1/2012": 4.26,
"6/1/2012": 5.96,
"7/1/2012": 5.51,
"8/1/2012": 7.35,
"9/1/2012": 6.53,
"10/1/2012": 5.77,
"11/1/2012": 7.57,
"12/1/2012": 5.74,
"1/1/2013": 5.48,
"2/1/2013": 7.15,
"3/1/2013": 6.84,
"4/1/2013": 7.07,
"5/1/2013": 5.84,
"6/1/2013": 5.44,
"7/1/2013": 6.44,
"8/1/2013": 5.26,
"9/1/2013": 4.34,
"10/1/2013": 4.7,
"11/1/2013": 3.42,
"12/1/2013": 1.88
},
"Weight":{
"1/1/2012": 28,
"2/1/2012": 28,
"3/1/2012": 21,
"4/1/2012": 22,
"5/1/2012": 30,
"6/1/2012": 20,
"7/1/2012": 26,
"8/1/2012": 19,
"9/1/2012": 27,
"10/1/2012": 31,
"11/1/2012": 37,
"12/1/2012": 44,
"1/1/2013": 44,
"2/1/2013": 50,
"3/1/2013": 58,
"4/1/2013": 60,
"5/1/2013": 56,
"6/1/2013": 53,
"7/1/2013": 41,
"8/1/2013": 40,
"9/1/2013": 36,
"10/1/2013": 38,
"11/1/2013": 30,
"12/1/2013": 23
}},
"Arusha":{
"Cost":{
"1/1/2012": 5.65,
"2/1/2012": 5.1,
"3/1/2012": 5.55,
"4/1/2012": 7.32,
"5/1/2012": 5.37,
"6/1/2012": 5,
"7/1/2012": 3.22,
"8/1/2012": 3.93,
"9/1/2012": 4.37,
"10/1/2012": 3.33,
"11/1/2012": 2.46,
"12/1/2012": 2.18,
"1/1/2013": 2.28,
"2/1/2013": 3.32,
"3/1/2013": 4.78,
"4/1/2013": 3.76,
"5/1/2013": 2.99,
"6/1/2013": 2.05,
"7/1/2013": 1.46,
"8/1/2013": 1.71,
"9/1/2013": 3.1,
"10/1/2013": 2.81,
"11/1/2013": 3.94,
"12/1/2013": 2.83
},
"Weight":{
"1/1/2012": 21,
"2/1/2012": 28,
"3/1/2012": 29,
"4/1/2012": 21,
"5/1/2012": 27,
"6/1/2012": 32,
"7/1/2012": 26,
"8/1/2012": 27,
"9/1/2012": 27,
"10/1/2012": 36,
"11/1/2012": 38,
"12/1/2012": 35,
"1/1/2013": 45,
"2/1/2013": 44,
"3/1/2013": 35,
"4/1/2013": 30,
"5/1/2013": 22,
"6/1/2013": 21,
"7/1/2013": 26,
"8/1/2013": 29,
"9/1/2013": 29,
"10/1/2013": 31,
"11/1/2013": 40,
"12/1/2013": 42
}},
"EthiopianYirgacheffe":{
"Cost":{
"1/1/2012": 8.99,
"2/1/2012": 10.38,
"3/1/2012": 12.17,
"4/1/2012": 11.27,
"5/1/2012": 11.36,
"6/1/2012": 11.76,
"7/1/2012": 13.35,
"8/1/2012": 15.19,
"9/1/2012": 14.82,
"10/1/2012": 15.26,
"11/1/2012": 15.59,
"12/1/2012": 17.18,
"1/1/2013": 17.37,
"2/1/2013": 15.71,
"3/1/2013": 16.89,
"4/1/2013": 15.72,
"5/1/2013": 14.44,
"6/1/2013": 13.87,
"7/1/2013": 13.41,
"8/1/2013": 12.26,
"9/1/2013": 13.88,
"10/1/2013": 12.5,
"11/1/2013": 14.13,
"12/1/2013": 13.35
},
"Weight":{
"1/1/2012": 28,
"2/1/2012": 32,
"3/1/2012": 28,
"4/1/2012": 20,
"5/1/2012": 23,
"6/1/2012": 28,
"7/1/2012": 24,
"8/1/2012": 32,
"9/1/2012": 29,
"10/1/2012": 33,
"11/1/2012": 32,
"12/1/2012": 25,
"1/1/2013": 19,
"2/1/2013": 10,
"3/1/2013": 20,
"4/1/2013": 16,
"5/1/2013": 23,
"6/1/2013": 21,
"7/1/2013": 14,
"8/1/2013": 8,
"9/1/2013": 12,
"10/1/2013": 10,
"11/1/2013": 20,
"12/1/2013": 15
}},
"K7":{
"Cost":{
"1/1/2012": 6.34,
"2/1/2012": 6.67,
"3/1/2012": 6.2,
"4/1/2012": 5.45,
"5/1/2012": 4.68,
"6/1/2012": 2.82,
"7/1/2012": 4.42,
"8/1/2012": 3.03,
"9/1/2012": 1.77,
"10/1/2012": 3.37,
"11/1/2012": 1.64,
"12/1/2012": 1.28,
"1/1/2013": 3.08,
"2/1/2013": 3.01,
"3/1/2013": 2.37,
"4/1/2013": 4.32,
"5/1/2013": 4.82,
"6/1/2013": 6.14,
"7/1/2013": 7.21,
"8/1/2013": 5.53,
"9/1/2013": 4.51,
"10/1/2013": 3.17,
"11/1/2013": 4.93,
"12/1/2013": 3.07
},
"Weight":{
"1/1/2012": 18,
"2/1/2012": 22,
"3/1/2012": 28,
"4/1/2012": 38,
"5/1/2012": 29,
"6/1/2012": 32,
"7/1/2012": 25,
"8/1/2012": 24,
"9/1/2012": 19,
"10/1/2012": 15,
"11/1/2012": 15,
"12/1/2012": 22,
"1/1/2013": 28,
"2/1/2013": 38,
"3/1/2013": 28,
"4/1/2013": 35,
"5/1/2013": 38,
"6/1/2013": 42,
"7/1/2013": 38,
"8/1/2013": 46,
"9/1/2013": 49,
"10/1/2013": 51,
"11/1/2013": 59,
"12/1/2013": 58
}},
"Pacas":{
"Cost":{
"1/1/2012": 7.25,
"2/1/2012": 8.96,
"3/1/2012": 7.91,
"4/1/2012": 6.11,
"5/1/2012": 5.78,
"6/1/2012": 4.61,
"7/1/2012": 5.84,
"8/1/2012": 6.73,
"9/1/2012": 6.49,
"10/1/2012": 8.04,
"11/1/2012": 6.51,
"12/1/2012": 8.17,
"1/1/2013": 7.81,
"2/1/2013": 7.18,
"3/1/2013": 6.46,
"4/1/2013": 5.65,
"5/1/2013": 7.53,
"6/1/2013": 8.03,
"7/1/2013": 9.3,
"8/1/2013": 7.85,
"9/1/2013": 8,
"10/1/2013": 7.58,
"11/1/2013": 8.23,
"12/1/2013": 8.62
},
"Weight":{
"1/1/2012": 29,
"2/1/2012": 22,
"3/1/2012": 31,
"4/1/2012": 30,
"5/1/2012": 34,
"6/1/2012": 24,
"7/1/2012": 25,
"8/1/2012": 15,
"9/1/2012": 22,
"10/1/2012": 17,
"11/1/2012": 14,
"12/1/2012": 19,
"1/1/2013": 18,
"2/1/2013": 21,
"3/1/2013": 28,
"4/1/2013": 25,
"5/1/2013": 17,
"6/1/2013": 27,
"7/1/2013": 22,
"8/1/2013": 29,
"9/1/2013": 36,
"10/1/2013": 45,
"11/1/2013": 55,
"12/1/2013": 59
}},
"Uganda":{
"Cost":{
"1/1/2012": 8.67,
"2/1/2012": 10.46,
"3/1/2012": 11.71,
"4/1/2012": 10.48,
"5/1/2012": 10.35,
"6/1/2012": 8.63,
"7/1/2012": 7.97,
"8/1/2012": 8.94,
"9/1/2012": 8,
"10/1/2012": 8.08,
"11/1/2012": 7.03,
"12/1/2012": 5.74,
"1/1/2013": 5.71,
"2/1/2013": 4.54,
"3/1/2013": 2.67,
"4/1/2013": 2.44,
"5/1/2013": 3.89,
"6/1/2013": 4.47,
"7/1/2013": 4.65,
"8/1/2013": 4.12,
"9/1/2013": 2.95,
"10/1/2013": 1.58,
"11/1/2013": 1.85,
"12/1/2013": 1.98
},
"Weight":{
"1/1/2012": 10,
"2/1/2012": 12,
"3/1/2012": 6,
"4/1/2012": 2,
"5/1/2012": 5,
"6/1/2012": 3,
"7/1/2012": 5,
"8/1/2012": 10,
"9/1/2012": 11,
"10/1/2012": 1,
"11/1/2012": 5,
"12/1/2012": 1,
"1/1/2013": 0,
"2/1/2013": 7,
"3/1/2013": 5,
"4/1/2013": 11,
"5/1/2013": 10,
"6/1/2013": 11,
"7/1/2013": 17,
"8/1/2013": 15,
"9/1/2013": 20,
"10/1/2013": 25,
"11/1/2013": 17,
"12/1/2013": 8
}}}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment