let's go html now

_.md

[ Launch: let's go html now ] 5595061 by gelicia
[ Launch: lets do this leeeeeroy jeeenkins ] 5579749 by gelicia
[ Launch: lets do this leeeeeroy jeeenkins ] 5564496 by gelicia

config.json

{"description":"let's go html now","endpoint":"","display":"div","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},"testdata.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ghkuUWW.png","inline-console":true}

inlet.js

/*This is a visualization of checkins to certain categories of businesses

Click a category to see when checkins were most frequent.

The color scale adjusts to the maximum number of checkins for that category. 
The legend on the right shows the scale of the checkins.

Hover over a square to see the number of checkins for that day of week
and time.

Keep in mind a business can have multiple categories.

WARNING: I think the days are offset incorrectly. This might be a day off.
*/

var data = tributary.testdata;

var display = d3.select("#display");

var select = display.append("select")
.attr("size", 29)
.style("float","left");

select.selectAll("option").data(data).enter()
.append("option")
.text(function(d){return d.name});

select.on("change", function() {
  colorGrid(data[this.selectedIndex].name);
}) 

//these are all global variables which is bad but it's prototype time

var svg = display.append("svg")
.attr({
  width: "500px",
  height: "700px"
});

//Default category
var catOfInterest = "Restaurants";

//constants
var hourNum = d3.range(24);
var dayEnum = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

//style
var gridSize = 20; //this can't be smaller than the words for the dayEnum
var margin = {top: 25, left: 100};
var spacing = 5;
var maxColor = '#3333CC';


//draw labels and squares
for (var d = 0; d < dayEnum.length; d++) {
	svg.append('text')
	.attr({
		x: margin.left + (d * gridSize) + (d * spacing) + (gridSize/2),
		y: margin.top - 5,
        'text-anchor' : 'middle',
		'alignment-baseline' : 'middle',
        'font-size': '10px'
	})
	.text(dayEnum[(d+1)%dayEnum.length]);

	for (var h = 0; h < hourNum.length; h++) {
		svg.append('rect')
		.attr({
			x: margin.left + (d * gridSize) + (d * spacing),
			y: margin.top + (h * gridSize) + (h * spacing),
			height: gridSize,
			width: gridSize,
			fill: 'white',
			stroke: 'black',
			'stroke-width': 1,
			id: dayEnum[d].toLowerCase() + "_"+ h
		});
	}
}

for (var h = 0; h < hourNum.length; h++) {
	svg.append('text')
	.attr({
		x: margin.left - 2,
		y: margin.top + (h * gridSize) + (h * spacing) + (gridSize/2),
		'text-anchor' : 'end',
		'alignment-baseline' : 'middle',
        'font-size': '10px'
	})
	.text(h + ":00 - " + (h+1) + ":00" ); 
}

//build category label
svg.append("text")
.attr({
  x: (margin.left + gridSize + ((gridSize + spacing)* dayEnum.length)),
  y: (margin.top + ((gridSize * hourNum.length)/2)) - 20,
  'alignment-baseline' : 'middle',
  'font-size': '26px',
  id : "catLabel"
}).text(catOfInterest);

//build legend
var legend = svg.append('g')
	.attr("transform", 
         "translate(" + (margin.left + gridSize + ((gridSize + spacing)* dayEnum.length)) + "," 
         + (margin.top + ((gridSize * hourNum.length)/2)) + ")");

//min
legend.append('rect')
.attr({
  x: 0,
  y: 0, 
  height: gridSize,
  width: gridSize,
  fill: 'white',
  stroke: 'black',
  'stroke-width': 1,
  id: "minLegendColor"
});

legend.append('text')
.attr({
    x: gridSize + spacing,
    y: (gridSize/2),
    'alignment-baseline' : 'middle',
    'font-size': '10px',
    id: "minLegendText"
})
.text('0');

//mid
legend.append('rect')
  .attr({
    x: 0,
    y: gridSize + spacing, 
    height: gridSize,
    width: gridSize,
    stroke: 'black',
    'stroke-width': 1,
    id: "midLegendColor"
});

legend.append('text')
.attr({
    x: gridSize + spacing,
    y: gridSize + spacing + ((gridSize + spacing)/2),
    'alignment-baseline' : 'middle',
    'font-size': '10px',
  'id': 'midLegendText'
})

//max
legend.append('rect')
  .attr({
    x: 0,
    y: (gridSize + spacing) * 2, 
    height: gridSize,
    width: gridSize,
    fill: maxColor,
    stroke: 'black',
    'stroke-width': 1,
    id: "maxLegendColor"
  });

legend.append('text')
.attr({
    x: gridSize + spacing,
    y: (gridSize + spacing) * 2 + ((gridSize+spacing)/2),
    'alignment-baseline' : 'middle',
    'font-size': '10px',
  'id': 'maxLegendText'
});

colorGrid(catOfInterest);

function colorGrid(category){
  d3.select("text#catLabel").text(category);
  
  var now = new Date();
  //adjusted for dow starting on monday
  var day = (now.getDay() + 6) % 7; 
  var hour = now.getHours();
  var minute = now.getMinutes();
  var minuteScale = d3.scale.linear().domain([0,59]).range([0,gridSize]);
  
  d3.select("#timeLine").remove();
  
  svg.append("line").attr({
    x1: margin.left + (day * gridSize) +(spacing * day) - 1,
    y1: margin.top + (hour * gridSize) +(spacing * hour) + minuteScale(minute),
    x2: margin.left + (day * gridSize) + (spacing * day) + gridSize + 1,
    y2: margin.top + (hour * gridSize) +(spacing * hour) + minuteScale(minute),
    stroke: '#FFAD00',
    'stroke-width': 2,
    id: "timeLine"
  });
   
  //Color the squares and add a tooltip
  for(var i = 0; i < data.length; i++){ 
      if (data[i].name == category){
        var chkMax = maxProp(data[i]); 
        var colorScale = d3.scale.linear().domain([0,chkMax]).range(['#fff', maxColor]);
        
        for(var prop in data[i]){
            var dateSq = d3.select('#' + prop);
          
            dateSq.transition()
            .duration(200)
            .ease("linear")
            .attr({
              fill: colorScale(data[i][prop])
            });
          
            d3.select('#' + prop + ' title').remove();
          
            dateSq.append('title')
            .text('Checkin Count: ' + data[i][prop]);
        }
        d3.select("#midLegendColor").attr("fill", colorScale(chkMax/2));
        d3.select("#midLegendText").text(chkMax/2);
        d3.select("#maxLegendText").text(chkMax);
      }
  }

}

function maxProp(d){
	var maxPropOut = 0;

	for(var prop in d){
      
      if (prop!== 'name' & prop !== 'businessCount' & Number(d[prop]) > maxPropOut){
        maxPropOut = Number(d[prop]);
      } 
    }
   
	return maxPropOut;
}

testdata.csv