Coffee data

_.md

[ Launch: Tabletop test ] 6743715 by roundrobin
[ Launch: Tabletop test ] 6743612 by roundrobin

chart.css

.chart-heading{
    fill: #808080;
	font-size: 14px;
	font-family: Arial;
}

.tick text{
    fill:#808080;
	font-size: 10px;
	font-family: Arial;
}

.tick line{
      fill: "none";
  	  stroke: #474747;
  	  stroke-width: 1px;
}


.domain{
      fill: none;
  	  stroke: #474747;
  	  stroke-width: 1px;
}

config.json

{"description":"Coffee data","endpoint":"","display":"svg","public":true,"require":[{"name":"Tabletop","url":"https://raw.github.com/jsoma/tabletop/master/src/tabletop.js"}],"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},"chart.css":{"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/7dfvQ6F.png"}

inlet.js

//Pull the data
var data = tributary.test;

//Chart Attributes
var chartWidth = 426;
var chartHeight = 176;
var barColor = "#4AACD3";
var paddingBetweenBarsPerc = 0.3;
var chartX = 100;
var chartY = 100;


// Here do you see one responsive chart behavior.
// if the chartHeight goes below those contraints
// the number of ticks in the y axis changes accordingly
var nrOfTicks = 10;
if(chartHeight <= 100) nrOfTicks = 5;
if(chartHeight <= 50) nrOfTicks = 2;
if(chartHeight <= 20) nrOfTicks = 1;

//Define which type of coffe you want?
//var coffeeType = "arusha-lbs";
//var coffeeType = "k7-lbs";
var coffeeType = "mokka-lbs";


//Pull the max value of all Mokka-lbs data
var maxValue = _.chain(data)
				.map(function(d,i){ return _.pick(d,coffeeType)})
                .map(function(d,i){ return parseFloat(d[coffeeType])})
                .max()
                .value();

//Pull all te dates value of our data array
var dates =  _.chain(data)
				.map(function(d,i){ 
                  return new Date(_.values(_.pick(d,"date"))[0]);
                })
                .sortBy(function(d,i){
                  return d;
                })
				.value();

//Assign start and end date
var startDate = _.first(dates);
var endDate = _.last(dates);


//Define helpful Scales
var yScale = d3.scale
			   .linear()
               .domain([maxValue,0])
               .range([chartHeight,0]);

var yScaleInverse = d3.scale
                      .linear()
                      .domain([0,maxValue])
                      .range([chartHeight, 0]);


var barWidth = d3.scale.ordinal()
				.domain(d3.range(data.length))
			    .rangeBands([0, chartWidth], paddingBetweenBarsPerc);

var x = d3.time.scale()
    .domain([d3.time.day.offset(startDate, 0),  endDate])
    .range([0, chartWidth]);


//Define and Create Axis elements on the left and bottom of the chart

var yAxis = d3.svg
.axis()
.scale(yScaleInverse)
.tickSize(10)
.ticks(nrOfTicks)
.orient("left");

var xAxis = d3.svg
.axis()
.scale(x)
.ticks(d3.time.months)
.tickSize(15, 0)
.tickFormat(d3.time.format("%B"))
.orient("bottom");


var barGroup = g.append("g")
  .attr({
    transform: "translate("+[chartX,chartY]+")",
    "class": "group"
  })


barGroup.append("g")
  .attr({
    transform: "translate("+[-20,0]+")"
  })
  .call(yAxis);

var XAxisGroup = barGroup.append("g")
  .attr({
	transform: "translate("+[0, chartHeight + 4]+")"
  })
  .call(xAxis);

XAxisGroup
  .selectAll("text")
    .attr("y", 0)
    .attr("x", 14)
    .attr("dy", "1.498em")
    .attr("transform", "rotate(55)")
    .style("text-anchor", "start");

var barGroupSelection = barGroup.selectAll(".bars")
  .data(data)
  .enter();

barGroup.append('text')
.text("How many lbs of Mokka sold per month?")
.attr({"class":"chart-heading",
       y: -20});

barGroupSelection
.append("rect")
.attr({
  width: function(d,i){
  return barWidth.rangeBand();
  },
  height: function(d,i){
    return yScale(d[coffeeType]);
  },
    fill: barColor,
    transform: function(d,i){
      var x1 = x(new Date(d.date))-barWidth.rangeBand()/2;
      var y = chartHeight - yScale(d[coffeeType]);
	  return "translate("+[x1, y ]+")";
    }
}); 

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