Skip to content

Instantly share code, notes, and snippets.

@peterfpeterson

peterfpeterson/README.md

Last active August 29, 2015 14:08
Show Gist options
  • Save peterfpeterson/20b29182ac10fbb75270 to your computer and use it in GitHub Desktop.
Save peterfpeterson/20b29182ac10fbb75270 to your computer and use it in GitHub Desktop.
Download ZIP
72 in 7
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- check out http://flowingdata.com/2014/10/15/linked-small-multiples/ -->
<!-- check out http://bl.ocks.org/mbostock/8033015 -->
<style>
body {
font: 10px sans-serif;
margin: 0;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// protect against browsers without a console
if(!window.console){ window.console = {log: function(){} }; }
var margin = {top: 10, right: 10, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var svg = d3.select("body").append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
d3.json("progress.json", function(error, data)
{
// convert the dates to proper date objects
data.progress.forEach(function(person) {
person.tap.forEach(function(item) {
item[0] = parseDate(item[0]);
});
});
window.console.log(data.progress);
// var path = svg.append("path")
// .datum(data)
// .attr("class", "line")
// .attr("d", line)
var goal = [[parseDate("2014-10-01"),0],
[parseDate("2015-05-01"),72]];
window.console.log(goal); // REMOVE
// everybody starts at the same date - search for end
var minDate = data.progress[0].tap[0][0];
var maxDate = data.progress[0].tap[data.progress[0].tap.length-1][0];
data.progress.forEach(function(person) {
var len = person.tap.length;
if (maxDate < person.tap[len-1][0]) {
maxDate = person.tap[len-1][0];
}
});
// track down min and max people and values
var minVal = goal[1][1];
var maxVal = goal[0][1];
var minPerson = data.progress[0];
var maxPerson = data.progress[0];
window.console.log(minDate); // REMOVE
window.console.log(maxDate); // REMOVE
x.domain([minDate, maxDate]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
y.domain([goal[0][1], goal[1][1]]);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
var goalline = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
// .interpolate("step-after");
svg.append("path")
.datum(goal)
.attr("class", "line")
.attr("d", goalline)
.style("stroke", "lightgrey");
var line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
// .interpolate("step-after");
data.progress.forEach(function(person) {
window.console.log(person.tap); // REMOVE
svg.append("path")
.datum(person.tap)
.attr("class", "line")
.attr("d", line)
.style("stroke", "black");
});
});
</script>
Raw
progress.json
{"progress" : [
{
"name":"G",
"nname":"Additive",
"tap":[["2014-10-02", 0],
["2014-10-09", 3],
["2014-10-16", 5],
["2014-10-23",10],
["2014-11-06",13],
["2014-11-13",17],
["2014-11-20",20],
["2015-01-07",25],
["2015-01-21",33],
["2015-02-11",41],
["2015-03-04",46],
["2015-03-11",50],
["2015-03-25",56],
["2015-04-02",60],
["2015-04-08",64],
["2015-04-22",69],
["2015-04-29",72]]
},
{
"name":"H",
"nname":"Pabst",
"tap":[["2014-10-02", 4],
["2014-10-23", 9],
["2014-11-13",16],
["2014-11-20",20],
["2014-12-04",24],
["2014-12-18",29],
["2015-01-01",34],
["2015-01-07",40],
["2015-01-21",43],
["2015-02-11",50],
["2015-03-04",54],
["2015-04-22",71],
["2015-04-29",72]]
},
{
"name":"K",
"nname":"Tank",
"tap":[["2014-10-02", 0],
["2014-10-09", 7],
["2014-10-16",13],
["2014-10-23",16],
["2014-10-30",21],
["2014-11-06",25],
["2014-12-04",32],
["2014-12-11",35],
["2015-01-01",42],
["2015-01-07",49],
["2015-01-21",54],
["2015-03-25",63],
["2015-04-02",71],
["2015-04-29",72]]
},
{
"name":"Ma",
"nname":"Spiller",
"tap":[["2014-10-02",3],
["2014-10-09",6],
["2014-10-30",9],
["2014-11-13",11],
["2014-11-20",14],
["2014-12-04",16],
["2015-01-07",20],
["2015-01-14",23],
["2015-02-11",28],
["2015-04-22",33]]
},
{
"name":"Mi",
"nname":"Hall Monitor",
"tap":[["2014-10-02", 3],
["2014-10-09", 7],
["2014-10-16",11],
["2014-10-23",15],
["2014-10-30",19],
["2014-11-13",22],
["2014-11-20",28],
["2014-12-04",36],
["2014-12-11",39],
["2014-12-18",43],
["2014-12-31",45],
["2015-01-01",47],
["2015-01-07",51],
["2015-01-21",61],
["2015-02-11",71],
["2015-03-11",71],
["2015-03-25",71],
["2015-04-02",71],
["2015-04-08",71],
["2015-04-22",71],
["2015-04-29",72]]
},
{
"name":"P",
"nname":"Shower Stall",
"tap":[["2014-10-02", 0],
["2014-10-16", 4],
["2014-10-23", 7],
["2014-10-30",11],
["2014-11-06",15],
["2014-12-18",20],
["2014-12-31",23],
["2015-01-01",28],
["2015-01-07",33],
["2015-01-14",36],
["2015-01-21",40],
["2015-02-11",44],
["2015-03-04",48],
["2015-03-11",52],
["2015-03-25",57],
["2015-04-02",61],
["2015-04-08",66],
["2015-04-22",70],
["2015-04-29",72]]
},
{
"name":"R",
"nname":"Loverboy",
"tap":[["2014-10-02", 4],
["2014-10-23",12],
["2014-10-30",19],
["2014-12-11",22]]
},
{
"name":"S",
"nname":"Thimble",
"tap":[["2014-10-02", 0],
["2014-10-09", 4],
["2014-10-16", 8],
["2014-10-23",12],
["2014-10-30",16],
["2014-11-06",19],
["2014-11-13",22],
["2014-11-20",27],
["2014-12-04",33],
["2014-12-11",36],
["2014-12-18",40],
["2014-12-31",43],
["2015-01-01",48],
["2015-01-07",51],
["2015-01-21",61],
["2015-02-11",71],
["2015-03-04",71],
["2015-03-11",71],
["2015-03-25",71],
["2015-04-02",71],
["2015-04-22",71],
["2015-04-29",72]]
}
]
}
Raw
taps.json
{
"labels":[
[1,"Guiness"],
[2,"Bass Ale"],
[3,"Duck Rabbit Milk Stout"],
[4,"Youngs Double Chocolate Stout"],
[5,"Magic Hat #9"],
[6,"SawWorks Brown Ale"],
[7,"SawWorks Rocky Hop (IPA)"],
[8,"SawWorks Pale"],
[9,"Smithwicks"],
[10,"Goose Island 312"],
[11,"Newcastle Brown"],
[12,"Sierra Nevada"],
[13,"Harp Lager"],
[14,"Highland Oatmeal Porter"],
[15,"Highland Garlic Ale"],
[16,"Wolf Hills Troopers Alley"],
[17,"Wolf Hills Honey Cream"],
[18,"Depot Street Southbound"],
[19,"Depot Street Loose Caboose"],
[20,"Depot Street Freightliner"],
[21,"Laguinitas IPA"],
[22,"Harvest Pumpkin"],
[23,"Blue Moon"]
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment