tmcw/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px 'M+ 1m';
  font-weight:100;
  background:#121212;
}

path.rim {
    stroke:#456763;
    stroke-width:0.5;
    fill:none;
}


path.interval {
    stroke:#f7f3f5;
    stroke-width:0.5;
    fill:#2af3f8;
}

circle.hr, circle.hr-inner {
    fill:#c3feff;
}

text.hr-label {
    fill:#ced5d3;
}

.beacon {
    fill:#f59423;
}

text.beacon-text {
  font: 12px 'M+ 1mn';
    fill:#f59423;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var intervals = [{
    values: [{
        start: new Date(),
        end: new Date(-(1000 * 60 * 60) + +new Date()),
        y: 10,
        y0: 0,
        x: d3.time.hour(new Date()),
        name: 'Foo bar'
    }]
}];

var hours = d3.range(24);

var width = 960,
    height = 500,
    innerRadius = Math.min(width, height) * .25,
    outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal()
    .domain(d3.range(4))
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

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

svg.append("g").selectAll("path.rim")
    .data([{startAngle: 0, endAngle: Math.PI * 2 }])
  .enter().append("path")
    .attr('class', 'rim')
    .attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));

svg.append("g").selectAll("circle.hr")
    .data(hours)
  .enter().append("circle")
    .attr('r', 1)
    .attr('class', 'hr')
    .attr('transform', function(d) {
        return 'translate(' + [Math.cos(d / 12 * Math.PI) * outerRadius, Math.sin(d / 12 * Math.PI) * outerRadius] + ')';
    });

svg.append("g").selectAll("circle.hr-inner")
    .data(hours)
  .enter().append("circle")
    .attr('r', 2)
    .attr('class', 'hr-inner')
    .attr('transform', function(d) {
        return 'translate(' + [Math.cos(d / 12 * Math.PI) * innerRadius, Math.sin(d / 12 * Math.PI) * innerRadius] + ')';
    });

var hrScale = d3.scale.linear()
    .domain([d3.time.day(new Date()), d3.time.day.offset(d3.time.day(new Date()),1)])
    .range([-Math.PI/2, (Math.PI * 2) - (Math.PI/2)]);

var ticks = svg.append("g").selectAll("g")
  .data(hours.map(function(hr) {
      return { hour: hr, angle: hr / 12 * Math.PI };
  }))
  .enter().append("g")
  .attr("transform", function(d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
        + "translate(" + outerRadius + ",0)";
  });

ticks.append("text")
    .attr('class', 'hr-label')
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return d.hour; });

var d2r = 180 / Math.PI;

var now = svg.append("g")
  .datum(new Date());

now.append('rect')
    .attr('class', 'beacon')
    .attr('transform', 'translate(' + [0,0] + ')')
    .attr('width', innerRadius / 2)
    .attr('height', 1);

now.append('text')
  .attr('class', 'beacon-text')
  .style("text-baseline", 'middle')
  .attr('transform', 'translate(' + [innerRadius / 2 + 5, 0] + ')');

function updateNow() {
  now.datum(new Date());
  now.attr("transform", function(d) {
    return "rotate(" + (hrScale(d) * d2r) + ")";
  });
  now.select('text').text(d3.time.format('%X'));
}

window.setInterval(updateNow, 100);

var stack = d3.layout.stack()
    .values(function(d) { return d.values; });

svg.append("g").selectAll("path.interval")
    .data(stack(intervals))
  .enter().append("path")
    .attr('class', 'interval')
    .attr('d', function(d) {
        var o = outerRadius + 30 + d.values[0].y0;
        var startAngle = hrScale(d.values[0].start) + Math.PI / 2;
        var endAngle = hrScale(d.values[0].end) + Math.PI / 2;
        return d3.svg.arc().innerRadius(o + 5).outerRadius(o + 30)({
            startAngle: startAngle,
            endAngle: endAngle
        });
    });

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px 'M+ 1m';
	font-weight:100;
	background:#121212;
	}

	path.rim {
	stroke:#456763;
	stroke-width:0.5;
	fill:none;
	}


	path.interval {
	stroke:#f7f3f5;
	stroke-width:0.5;
	fill:#2af3f8;
	}

	circle.hr, circle.hr-inner {
	fill:#c3feff;
	}

	text.hr-label {
	fill:#ced5d3;
	}

	.beacon {
	fill:#f59423;
	}

	text.beacon-text {
	font: 12px 'M+ 1mn';
	fill:#f59423;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var intervals = [{
	values: [{
	start: new Date(),
	end: new Date(-(1000 * 60 * 60) + +new Date()),
	y: 10,
	y0: 0,
	x: d3.time.hour(new Date()),
	name: 'Foo bar'
	}]
	}];

	var hours = d3.range(24);

	var width = 960,
	height = 500,
	innerRadius = Math.min(width, height) * .25,
	outerRadius = innerRadius * 1.1;

	var fill = d3.scale.ordinal()
	.domain(d3.range(4))
	.range(["#000000", "#FFDD89", "#957244", "#F26223"]);

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

	svg.append("g").selectAll("path.rim")
	.data([{startAngle: 0, endAngle: Math.PI * 2 }])
	.enter().append("path")
	.attr('class', 'rim')
	.attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));

	svg.append("g").selectAll("circle.hr")
	.data(hours)
	.enter().append("circle")
	.attr('r', 1)
	.attr('class', 'hr')
	.attr('transform', function(d) {
	return 'translate(' + [Math.cos(d / 12 * Math.PI) * outerRadius, Math.sin(d / 12 * Math.PI) * outerRadius] + ')';
	});

	svg.append("g").selectAll("circle.hr-inner")
	.data(hours)
	.enter().append("circle")
	.attr('r', 2)
	.attr('class', 'hr-inner')
	.attr('transform', function(d) {
	return 'translate(' + [Math.cos(d / 12 * Math.PI) * innerRadius, Math.sin(d / 12 * Math.PI) * innerRadius] + ')';
	});

	var hrScale = d3.scale.linear()
	.domain([d3.time.day(new Date()), d3.time.day.offset(d3.time.day(new Date()),1)])
	.range([-Math.PI/2, (Math.PI * 2) - (Math.PI/2)]);

	var ticks = svg.append("g").selectAll("g")
	.data(hours.map(function(hr) {
	return { hour: hr, angle: hr / 12 * Math.PI };
	}))
	.enter().append("g")
	.attr("transform", function(d) {
	return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
	+ "translate(" + outerRadius + ",0)";
	});

	ticks.append("text")
	.attr('class', 'hr-label')
	.attr("x", 8)
	.attr("dy", ".35em")
	.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
	.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
	.text(function(d) { return d.hour; });

	var d2r = 180 / Math.PI;

	var now = svg.append("g")
	.datum(new Date());

	now.append('rect')
	.attr('class', 'beacon')
	.attr('transform', 'translate(' + [0,0] + ')')
	.attr('width', innerRadius / 2)
	.attr('height', 1);

	now.append('text')
	.attr('class', 'beacon-text')
	.style("text-baseline", 'middle')
	.attr('transform', 'translate(' + [innerRadius / 2 + 5, 0] + ')');

	function updateNow() {
	now.datum(new Date());
	now.attr("transform", function(d) {
	return "rotate(" + (hrScale(d) * d2r) + ")";
	});
	now.select('text').text(d3.time.format('%X'));
	}

	window.setInterval(updateNow, 100);

	var stack = d3.layout.stack()
	.values(function(d) { return d.values; });

	svg.append("g").selectAll("path.interval")
	.data(stack(intervals))
	.enter().append("path")
	.attr('class', 'interval')
	.attr('d', function(d) {
	var o = outerRadius + 30 + d.values[0].y0;
	var startAngle = hrScale(d.values[0].start) + Math.PI / 2;
	var endAngle = hrScale(d.values[0].end) + Math.PI / 2;
	return d3.svg.arc().innerRadius(o + 5).outerRadius(o + 30)({
	startAngle: startAngle,
	endAngle: endAngle
	});
	});

	</script>