scogle/cowork.html

## cowork.html
<!DOCTYPE html>
<html>
<head>
	<title>Cowork</title>

	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
	<script type="text/javascript">
$(document).ready(function(){

	var endpoint = "http://ibeam.semanticarts.com/timecard/api/timecharges?start=2014-08-01";

	$('#slider').slider({
		value: 01,
		min: 01,
		max: 26,
		step: 1,
		slide: function(event, ui){
			var groups = d3.selectAll('g');


		}
	});

	function process(json){
		console.log("Initializing", json);
		var dates = {};
		var arr = [];
		_.each(json, function(obj){
			var date = obj.StartTime.split('T')[0].split('-')[2];
			dates[date] = dates[date] || {};
			//var x = a === true ? 2 : 5;
			dates[date].tcEntries = dates[date].tcEntries || [];
			dates[date].tcEntries.push(obj);
		});
		//dates = _.uniq(dates);

		_.each(dates, function(day){
			_.each(day.tcEntries, function(entry){
				day[entry.Location] = day[entry.Location] || [];
				day[entry.Location].push(entry.Employee);
				day[entry.Location] = _.uniq(day[entry.Location]);
			});
			delete day.tcEntries;
		});
		console.log(dates);

		var d3Data = {};

		_.each(dates, function(obj,date){
			d3Data[date] = {
				'name': date,
				'children': []
			};
			_.each(obj, function(people, place){
				d3Data[date].children.push({
					'name': place,
					'children':[]
				});
			});
			_.each(d3Data[date].children, function(child){
				_.each(dates[date][child.name], function(person){
					child.children.push({'name':person});
				});
			});
		});
		console.log(d3Data);

		var width = 960,
    		height = 700,
    		radius = Math.min(width, height) / 2,
    		x = d3.scale.linear().range([0, 2 * Math.PI]),
    		y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
    		color = d3.scale.category20c();

    	var svg = d3.select("body").append("svg")
		    .attr("width", width)
		    .attr("height", height)
		  .append("g")
		    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

		var partition = d3.layout.partition()
		    .sort(null)
		    .size([2 * Math.PI, radius * radius])
		    .value(function(d) { return 1; });

		var arc = d3.svg.arc()
		    .startAngle(function(d) { return d.x; })
		    .endAngle(function(d) { return d.x + d.dx; })
		    .innerRadius(function(d) { return Math.sqrt(d.y); })
		    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

		var path = svg.datum(d3Data['01']).selectAll("path")
			.data(partition.nodes)
			.enter().append("path")
			.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
			.attr("d", arc)
			.style("stroke", "#fff")
			.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
			.style("fill-rule", "evenodd")
			.each(stash);

		var text = svg.selectAll('text').data(partition.nodes);
		var textEnter = text.enter().append("text")
			.style("fill-opacity", 1)
			.style("fill", '#000')
			// .attr("text-anchor", function(d) {
			// 	return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
			// })
			.attr("dy", ".2em")
			//.attr("transform", 'translate(++)')
			textEnter.append("tspan")
			.attr("x", 0)
			// .attr('x', function(d) { return d.x; })
			// .attr('y', function(d) { return d.y; })
			.text(function(d) { return d.name; });
			// textEnter.append("tspan")
			// //.attr("x", 0)
			// .attr("dy", "1em")
			// .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });

		// Stash the old values for transition.
		function stash(d) {
		  d.x0 = d.x;
		  d.dx0 = d.dx;
		}

		// Interpolate the arcs in data space.
		function arcTween(a) {
		  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
		  return function(t) {
		    var b = i(t);
		    a.x0 = b.x;
		    a.dx0 = b.dx;
		    return arc(b);
		  };
		}

		d3.select(self.frameElement).style("height", height + "px");

		  // d3.selectAll("input").on("change", function change() {
		  //   var value = this.value === "count"
		  //       ? function() { return 1; }
		  //       : function(d) { return d.size; };

		  //   path
		  //       .data(partition.value(value).nodes)
		  //     .transition()
		  //       .duration(1500)
		  //       .attrTween("d", arcTween);
		  // });


	}

	$.getJSON(endpoint, function(data){
		process(data);
	});

});
	</script>
</head>
<body>
<h1>Cowork</h1>

<div class="slider">
	<div id="slider"></div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Cowork</title>

	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
	<script type="text/javascript">
	$(document).ready(function(){

	var endpoint = "http://ibeam.semanticarts.com/timecard/api/timecharges?start=2014-08-01";

	$('#slider').slider({
	value: 01,
	min: 01,
	max: 26,
	step: 1,
	slide: function(event, ui){
	var groups = d3.selectAll('g');


	}
	});

	function process(json){
	console.log("Initializing", json);
	var dates = {};
	var arr = [];
	_.each(json, function(obj){
	var date = obj.StartTime.split('T')[0].split('-')[2];
	dates[date] = dates[date] \|\| {};
	//var x = a === true ? 2 : 5;
	dates[date].tcEntries = dates[date].tcEntries \|\| [];
	dates[date].tcEntries.push(obj);
	});
	//dates = _.uniq(dates);

	_.each(dates, function(day){
	_.each(day.tcEntries, function(entry){
	day[entry.Location] = day[entry.Location] \|\| [];
	day[entry.Location].push(entry.Employee);
	day[entry.Location] = _.uniq(day[entry.Location]);
	});
	delete day.tcEntries;
	});
	console.log(dates);

	var d3Data = {};

	_.each(dates, function(obj,date){
	d3Data[date] = {
	'name': date,
	'children': []
	};
	_.each(obj, function(people, place){
	d3Data[date].children.push({
	'name': place,
	'children':[]
	});
	});
	_.each(d3Data[date].children, function(child){
	_.each(dates[date][child.name], function(person){
	child.children.push({'name':person});
	});
	});
	});
	console.log(d3Data);

	var width = 960,
	height = 700,
	radius = Math.min(width, height) / 2,
	x = d3.scale.linear().range([0, 2 * Math.PI]),
	y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
	color = d3.scale.category20c();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

	var partition = d3.layout.partition()
	.sort(null)
	.size([2 * Math.PI, radius * radius])
	.value(function(d) { return 1; });

	var arc = d3.svg.arc()
	.startAngle(function(d) { return d.x; })
	.endAngle(function(d) { return d.x + d.dx; })
	.innerRadius(function(d) { return Math.sqrt(d.y); })
	.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

	var path = svg.datum(d3Data['01']).selectAll("path")
	.data(partition.nodes)
	.enter().append("path")
	.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
	.attr("d", arc)
	.style("stroke", "#fff")
	.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
	.style("fill-rule", "evenodd")
	.each(stash);

	var text = svg.selectAll('text').data(partition.nodes);
	var textEnter = text.enter().append("text")
	.style("fill-opacity", 1)
	.style("fill", '#000')
	// .attr("text-anchor", function(d) {
	// return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
	// })
	.attr("dy", ".2em")
	//.attr("transform", 'translate(++)')
	textEnter.append("tspan")
	.attr("x", 0)
	// .attr('x', function(d) { return d.x; })
	// .attr('y', function(d) { return d.y; })
	.text(function(d) { return d.name; });
	// textEnter.append("tspan")
	// //.attr("x", 0)
	// .attr("dy", "1em")
	// .text(function(d) { return d.depth ? d.name.split(" ")[1] \|\| "" : ""; });

	// Stash the old values for transition.
	function stash(d) {
	d.x0 = d.x;
	d.dx0 = d.dx;
	}

	// Interpolate the arcs in data space.
	function arcTween(a) {
	var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
	return function(t) {
	var b = i(t);
	a.x0 = b.x;
	a.dx0 = b.dx;
	return arc(b);
	};
	}

	d3.select(self.frameElement).style("height", height + "px");

	// d3.selectAll("input").on("change", function change() {
	// var value = this.value === "count"
	// ? function() { return 1; }
	// : function(d) { return d.size; };

	// path
	// .data(partition.value(value).nodes)
	// .transition()
	// .duration(1500)
	// .attrTween("d", arcTween);
	// });


	}

	$.getJSON(endpoint, function(data){
	process(data);
	});

	});
	</script>
	</head>
	<body>
	<h1>Cowork</h1>

	<div class="slider">
	<div id="slider"></div>
	</div>
	</body>
	</html>