Skip to content

Instantly share code, notes, and snippets.

@dwskau

dwskau/_.md

Created September 30, 2013 00:12
Show Gist options
  • Save dwskau/6757746 to your computer and use it in GitHub Desktop.
Save dwskau/6757746 to your computer and use it in GitHub Desktop.
Download ZIP
Coffee data
Raw
_.md
Raw
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;
}
Raw
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"}
Raw
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 ]+")";
}
});
Raw
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
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment