maning/gabysigns2.txt

## gabysigns2.txt
date	pulse	respiratory	temperature
20130829 2000	112	24	36.5
20130829 2400	107	26	38.9
20130830 0400	83	26	38.6
20130830 0800	110	26	38.7
20130830 1200	127	28	37
20130830 1600	96	24	37
20130830 2000	92	24	37.4
20130830 2400	87	24	38.3
20130831 0400	74	21	36.8
20130831 0800	77	22	36.2
20130831 1200	85	22	36.2
20130831 1600	90	24	36.5
20130831 2000	92	22	36.9
20130831 2400	83	22	36.3
20130901 0400	89	22	36.5
20130901 0800	101	24	37.1
20130901 1200	96	22	36.8
20130901 1600	84	22	36.8
20130901 2000	88	24	36.3
20130901 2400	64	25	36
20130902 0400	68	24	36
20130902 0800	93	26	36.8

## index.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: 1.5px;
}

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

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

var parseDate = d3.time.format("%Y%m%d %H%M").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

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("gabysigns2.txt ", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

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

  var city = svg.selectAll(".city")
      .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

</script>
	date pulse respiratory temperature
	20130829 2000 112 24 36.5
	20130829 2400 107 26 38.9
	20130830 0400 83 26 38.6
	20130830 0800 110 26 38.7
	20130830 1200 127 28 37
	20130830 1600 96 24 37
	20130830 2000 92 24 37.4
	20130830 2400 87 24 38.3
	20130831 0400 74 21 36.8
	20130831 0800 77 22 36.2
	20130831 1200 85 22 36.2
	20130831 1600 90 24 36.5
	20130831 2000 92 22 36.9
	20130831 2400 83 22 36.3
	20130901 0400 89 22 36.5
	20130901 0800 101 24 37.1
	20130901 1200 96 22 36.8
	20130901 1600 84 22 36.8
	20130901 2000 88 24 36.3
	20130901 2400 64 25 36
	20130902 0400 68 24 36
	20130902 0800 93 26 36.8
	<!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: 1.5px;
	}

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

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

	var parseDate = d3.time.format("%Y%m%d %H%M").parse;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.temperature); });

	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("gabysigns2.txt ", function(error, data) {
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var cities = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, temperature: +d[name]};
	})
	};
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));

	y.domain([
	d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
	d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
	]);

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

	var city = svg.selectAll(".city")
	.data(cities)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	city.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});

	</script>