complexsplit/sysadvent-d3.html

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

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2.0px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

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

var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse,
    bisectDate = d3.bisector(function(d) { return d.date; }).left,
    formatValue = d3.format(",.0f"),
    formatCurrency = function(d) { return formatValue(d); };

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");

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.servers); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("vmcount.tsv", function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.servers = +d.servers;
  });

  data.sort(function(a, b) {
    return a.date - b.date;
  });

  x.domain([data[0].date, data[data.length - 1].date]);
  y.domain(d3.extent(data, function(d) { return d.servers; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  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")
      .text("VM Count");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

  var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");

  focus.append("circle")
      .attr("r", 6.5);

  focus.append("text")
      .attr("x", 20)
      .attr("dy", ".55em");

  svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.servers) + ")");
    focus.select("text").text(formatCurrency(d.servers));
  }
});

</script>

## vmcount.tsv

          
            date
            servers

            
              2014-01-02
              4344

            
              2014-01-01
              4344

            
              2013-12-31
              4344

            
              2013-12-30
              4343

            
              2013-12-29
              4343

            
              2013-12-28
              4343

            
              2013-12-27
              4347

            
              2013-12-26
              4348

            
              2013-12-25
              4348

            
              2013-12-24
              4349

            
              2013-12-23
              4347

            
              2013-12-22
              4347

            
              2013-12-21
              4347

            
              2013-12-20
              4339

            
              2013-12-19
              4342

            
              2013-12-18
              4341

            
              2013-12-17
              4347

            
              2013-12-16
              4343

            
              2013-12-15
              4343

            
              2013-12-14
              4343

            
              2013-12-13
              4343

            
              2013-12-12
              4331

            
              2013-12-11
              4328

            
              2013-12-10
              4328

            
              2013-12-06
              4225

            
              2013-12-05
              4202

            
              2013-12-04
              4193

            
              2013-12-03
              4190

            
              2013-12-02
              4192

            
              2013-12-01
              4191

            
              2013-11-30
              4191

            
              2013-11-29
              4191

            
              2013-11-28
              4191

            
              2013-11-27
              4201

            
              2013-11-26
              4202

            
              2013-11-25
              4197

            
              2013-11-24
              4197

            
              2013-11-23
              4197

            
              2013-11-22
              4193

            
              2013-11-21
              4189

            
              2013-11-20
              4187

            
              2013-11-19
              4174

            
              2013-11-18
              4169

            
              2013-11-17
              4169

            
              2013-11-16
              4169

            
              2013-11-15
              4167

            
              2013-11-14
              4167

            
              2013-11-13
              4161

            
              2013-11-12
              4123

            
              2013-11-11
              4090

            
              2013-11-10
              4090

            
              2013-11-09
              4090

            
              2013-11-08
              4083

            
              2013-11-07
              4075

            
              2013-11-06
              4038

            
              2013-11-05
              4024

            
              2013-11-04
              4003

            
              2013-11-03
              4003

            
              2013-11-02
              4003

            
              2013-11-01
              3985

            
              2013-10-31
              4006

            
              2013-10-30
              3994

            
              2013-10-29
              3980

            
              2013-10-28
              3973

            
              2013-10-27
              3973

            
              2013-10-26
              3973
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2.0px;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.focus circle {
	fill: none;
	stroke: steelblue;
	}

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

	var margin = {top: 20, right: 50, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y-%m-%d").parse,
	bisectDate = d3.bisector(function(d) { return d.date; }).left,
	formatValue = d3.format(",.0f"),
	formatCurrency = function(d) { return formatValue(d); };

	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");

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.servers); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("vmcount.tsv", function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.servers = +d.servers;
	});

	data.sort(function(a, b) {
	return a.date - b.date;
	});

	x.domain([data[0].date, data[data.length - 1].date]);
	y.domain(d3.extent(data, function(d) { return d.servers; }));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	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")
	.text("VM Count");

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);

	var focus = svg.append("g")
	.attr("class", "focus")
	.style("display", "none");

	focus.append("circle")
	.attr("r", 6.5);

	focus.append("text")
	.attr("x", 20)
	.attr("dy", ".55em");

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height)
	.on("mouseover", function() { focus.style("display", null); })
	.on("mouseout", function() { focus.style("display", "none"); })
	.on("mousemove", mousemove);

	function mousemove() {
	var x0 = x.invert(d3.mouse(this)[0]),
	i = bisectDate(data, x0, 1),
	d0 = data[i - 1],
	d1 = data[i],
	d = x0 - d0.date > d1.date - x0 ? d1 : d0;
	focus.attr("transform", "translate(" + x(d.date) + "," + y(d.servers) + ")");
	focus.select("text").text(formatCurrency(d.servers));
	}
	});

	</script>
	date	servers
	2014-01-02	4344
	2014-01-01	4344
	2013-12-31	4344
	2013-12-30	4343
	2013-12-29	4343
	2013-12-28	4343
	2013-12-27	4347
	2013-12-26	4348
	2013-12-25	4348
	2013-12-24	4349
	2013-12-23	4347
	2013-12-22	4347
	2013-12-21	4347
	2013-12-20	4339
	2013-12-19	4342
	2013-12-18	4341
	2013-12-17	4347
	2013-12-16	4343
	2013-12-15	4343
	2013-12-14	4343
	2013-12-13	4343
	2013-12-12	4331
	2013-12-11	4328
	2013-12-10	4328
	2013-12-06	4225
	2013-12-05	4202
	2013-12-04	4193
	2013-12-03	4190
	2013-12-02	4192
	2013-12-01	4191
	2013-11-30	4191
	2013-11-29	4191
	2013-11-28	4191
	2013-11-27	4201
	2013-11-26	4202
	2013-11-25	4197
	2013-11-24	4197
	2013-11-23	4197
	2013-11-22	4193
	2013-11-21	4189
	2013-11-20	4187
	2013-11-19	4174
	2013-11-18	4169
	2013-11-17	4169
	2013-11-16	4169
	2013-11-15	4167
	2013-11-14	4167
	2013-11-13	4161
	2013-11-12	4123
	2013-11-11	4090
	2013-11-10	4090
	2013-11-09	4090
	2013-11-08	4083
	2013-11-07	4075
	2013-11-06	4038
	2013-11-05	4024
	2013-11-04	4003
	2013-11-03	4003
	2013-11-02	4003
	2013-11-01	3985
	2013-10-31	4006
	2013-10-30	3994
	2013-10-29	3980
	2013-10-28	3973
	2013-10-27	3973
	2013-10-26	3973