canimus/week_bubbles.html

## week_bubbles.html
<!DOCTYPE html>
<html>
<head>
  <title>Arc Test</title>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style>
    h1 {
        font-family: 'Open Sans';
        font-weight: 600;
        font-size: 22px;
        text-transform: uppercase;
    }
    span {
        font-family: Menlo;
        font-size: 10px;
        color: #ccc;
    }

    div {
        position: relative;
        display: block;
        background: #fff;
        border: 1px solid #ccc;
    }

    path {
      shape-rendering: geometric-precision;
    }
    line {
        stroke: #555;
        stroke-width: 1.5px;
    }

    rect {
        fill: rgba(50, 50, 50, .6);
    }

    text { font-family: 'Open Sans'; font-size: 12px; stroke: none; fill: #555;}
    .big {
      font-family: 'Open Sans'; font-size: 1.2em; font-weight: 600; stroke: none; fill: #555;
    }
  </style>
</head>
<body>

<h1>Dashboard</h1>
<div style="padding-left: 10px"></div>
<section></section>

</body>

<script>
var w=700;
var h=200;
var margin = {top: (h*.1), bottom: (h*.1), left: (w*.1), right: (w*.1)};

var arc = d3.svg.arc()
      .outerRadius((h-margin.top-margin.bottom)/4)
      .innerRadius(((h-margin.top-margin.bottom)/4)*.6);

function arcTween(b) {
  var i = d3.interpolate({endAngle: 0}, b);
  return function(t) {
    return arc(i(t));
  };
}

data_set = ["2013-06-14", "2013-06-15", "2013-06-15", "2013-06-15", "2013-06-19", "2013-06-19"];
//data_set = [];

data_nest = d3.nest().key(function(d) {return d;}).entries(data_set);
data_keys = data_nest.map(function(d) { return d.key});
max_y = d3.max(data_nest.map(function(d) { return d.values.length;}));

day_format = d3.time.format("%a");
fmt = d3.time.format("%Y-%m-%d");
x_fmt = d3.time.format("%m/%d");
today = new Date();
today.setHours(24);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
wk = new Date(today.getTime() - (60 * 60 * 1000 * 24 * 7));
x = d3.time.scale()
      .domain([wk, today])
      .range([0,7]);

x1 = d3.scale.linear()
       .domain([0,7])
       .range([0,400]);

svg = d3.select("div").append("svg")
.attr("width", w)
.attr("height", h);


g = svg.append("g");
g.attr("transform", "translate("+((h-margin.top-margin.bottom)/4)+","+(h/2)+")");

pie = d3.scale.linear()
      .domain([0, max_y])
      .range([0, Math.PI*2]);

spacing = w/7;

base = g.selectAll("path.base").data(d3.range(7));
base
 .enter()
 .append("path")
 .attr("class", "base")
 .style("fill", "#eee")
 .attr("transform", function(d,i) {
  return "translate("+(i*spacing)+", 0)";
 })
 .attr("d", arc({startAngle: 0, endAngle: Math.PI*2}));


circles = g.selectAll("path.circles").data(d3.range(7));
circles
 .enter()
 .append("path")
 .attr("class", "circles")
 .style("fill", "#37abc8")
 .attr("transform", function(d,i) {
  return "translate("+(i*spacing)+", 0)";
 })
 .attr("d", arc({startAngle: 0, endAngle: 0}));

legend = g.selectAll("text.day").data(d3.range(7));
legend
  .enter()
  .append("text")
  .attr("class", "day")
  .attr("text-anchor", "middle")
  .attr("transform", function(d,i) {
  return "translate("+((i*spacing))+", "+58+")";
 })
  .text(function(d) {
    return day_format(x.invert(d))
  });

counters = g.selectAll("text.total").data(d3.range(7));
counters
  .enter()
  .append("text")
  .attr("class", "big")
  .attr("text-anchor", "middle")
  .attr("transform", function(d,i) {
  return "translate("+((i*spacing))+", "+7+")";
 })
  .text(function(d) {
    var size = 0;
    var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
    if (rest.length > 0) {
      size = rest[0].values.length;
    } else {
      size = 0;
    }
    return size;
  });


circles.transition()
.duration(1000)
.attrTween("d", function(d) {
    var size = 0;
    var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
    if (rest.length > 0) {
      size = rest[0].values.length;
    } else {
      size = 0;
    }
    return arcTween({startAngle:0, endAngle: pie(size)});
});


</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Arc Test</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	h1 {
	font-family: 'Open Sans';
	font-weight: 600;
	font-size: 22px;
	text-transform: uppercase;
	}
	span {
	font-family: Menlo;
	font-size: 10px;
	color: #ccc;
	}

	div {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid #ccc;
	}

	path {
	shape-rendering: geometric-precision;
	}
	line {
	stroke: #555;
	stroke-width: 1.5px;
	}

	rect {
	fill: rgba(50, 50, 50, .6);
	}

	text { font-family: 'Open Sans'; font-size: 12px; stroke: none; fill: #555;}
	.big {
	font-family: 'Open Sans'; font-size: 1.2em; font-weight: 600; stroke: none; fill: #555;
	}
	</style>
	</head>
	<body>

	<h1>Dashboard</h1>
	<div style="padding-left: 10px"></div>
	<section></section>

	</body>

	<script>
	var w=700;
	var h=200;
	var margin = {top: (h.1), bottom: (h.1), left: (w.1), right: (w.1)};

	var arc = d3.svg.arc()
	.outerRadius((h-margin.top-margin.bottom)/4)
	.innerRadius(((h-margin.top-margin.bottom)/4)*.6);

	function arcTween(b) {
	var i = d3.interpolate({endAngle: 0}, b);
	return function(t) {
	return arc(i(t));
	};
	}

	data_set = ["2013-06-14", "2013-06-15", "2013-06-15", "2013-06-15", "2013-06-19", "2013-06-19"];
	//data_set = [];

	data_nest = d3.nest().key(function(d) {return d;}).entries(data_set);
	data_keys = data_nest.map(function(d) { return d.key});
	max_y = d3.max(data_nest.map(function(d) { return d.values.length;}));

	day_format = d3.time.format("%a");
	fmt = d3.time.format("%Y-%m-%d");
	x_fmt = d3.time.format("%m/%d");
	today = new Date();
	today.setHours(24);
	today.setMinutes(0);
	today.setSeconds(0);
	today.setMilliseconds(0);
	wk = new Date(today.getTime() - (60 * 60 * 1000 * 24 * 7));
	x = d3.time.scale()
	.domain([wk, today])
	.range([0,7]);

	x1 = d3.scale.linear()
	.domain([0,7])
	.range([0,400]);

	svg = d3.select("div").append("svg")
	.attr("width", w)
	.attr("height", h);


	g = svg.append("g");
	g.attr("transform", "translate("+((h-margin.top-margin.bottom)/4)+","+(h/2)+")");

	pie = d3.scale.linear()
	.domain([0, max_y])
	.range([0, Math.PI*2]);

	spacing = w/7;

	base = g.selectAll("path.base").data(d3.range(7));
	base
	.enter()
	.append("path")
	.attr("class", "base")
	.style("fill", "#eee")
	.attr("transform", function(d,i) {
	return "translate("+(i*spacing)+", 0)";
	})
	.attr("d", arc({startAngle: 0, endAngle: Math.PI*2}));


	circles = g.selectAll("path.circles").data(d3.range(7));
	circles
	.enter()
	.append("path")
	.attr("class", "circles")
	.style("fill", "#37abc8")
	.attr("transform", function(d,i) {
	return "translate("+(i*spacing)+", 0)";
	})
	.attr("d", arc({startAngle: 0, endAngle: 0}));

	legend = g.selectAll("text.day").data(d3.range(7));
	legend
	.enter()
	.append("text")
	.attr("class", "day")
	.attr("text-anchor", "middle")
	.attr("transform", function(d,i) {
	return "translate("+((i*spacing))+", "+58+")";
	})
	.text(function(d) {
	return day_format(x.invert(d))
	});

	counters = g.selectAll("text.total").data(d3.range(7));
	counters
	.enter()
	.append("text")
	.attr("class", "big")
	.attr("text-anchor", "middle")
	.attr("transform", function(d,i) {
	return "translate("+((i*spacing))+", "+7+")";
	})
	.text(function(d) {
	var size = 0;
	var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
	if (rest.length > 0) {
	size = rest[0].values.length;
	} else {
	size = 0;
	}
	return size;
	});


	circles.transition()
	.duration(1000)
	.attrTween("d", function(d) {
	var size = 0;
	var rest = data_nest.filter(function(s) { return s.key == fmt(x.invert(d)) });
	if (rest.length > 0) {
	size = rest[0].values.length;
	} else {
	size = 0;
	}
	return arcTween({startAngle:0, endAngle: pie(size)});
	});


	</script>
	</html>