Rnhatch/crimea.csv

## crimea.csv

          
            date
            wounds
            other
            disease

            
              5/1854
              0
              95
              105

            
              6/1854
              0
              40
              95

            
              7/1854
              0
              140
              520

            
              8/1854
              20
              150
              800

            
              9/1854
              220
              230
              740

            
              10/1854
              305
              310
              600

            
              11/1854
              480
              290
              820

            
              12/1854
              295
              310
              1100

            
              1/1855
              230
              460
              1440

            
              2/1855
              180
              520
              1270

            
              3/1855
              155
              350
              935

            
              4/1855
              195
              195
              560

            
              5/1855
              180
              155
              550

            
              6/1855
              330
              130
              650

            
              7/1855
              260
              130
              430

            
              8/1855
              290
              110
              490

            
              9/1855
              355
              100
              290

            
              10/1855
              135
              95
              245

            
              11/1855
              100
              140
              325

            
              12/1855
              40
              120
              215

            
              1/1856
              0
              160
              160

            
              2/1856
              0
              100
              100

            
              3/1856
              0
              125
              90

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Crimean War</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
    <style type="text/css">

svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    p = [20, 50, 30, 20],
    x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
    y = d3.scale.linear().range([0, h - p[0] - p[2]]),
    z = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue"]),
    parse = d3.time.format("%m/%Y").parse,
    format = d3.time.format("%b");

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");

d3.csv("crimea.csv", function(crimea) {

  // Transpose the data into layers by cause.
  var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) {
    return crimea.map(function(d) {
      return {x: parse(d.date), y: +d[cause]};
    });
  }));
 console.log(causes);
 console.log(crimea);
  // Compute the x-domain (by date) and y-domain (by top).
  x.domain(causes[0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);

  // Add a group for each cause.
  var cause = svg.selectAll("g.cause")
      .data(causes)
    .enter().append("svg:g")
      .attr("class", "cause")
      .style("fill", function(d, i) { return z(i); })
      .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

  // Add a rect for each date.
  var rect = cause.selectAll("rect")
      .data(Object)
    .enter().append("svg:rect")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return -y(d.y0) - y(d.y); })
      .attr("height", function(d) { return y(d.y); })
      .attr("width", x.rangeBand());

  // Add a label per date.
  var label = svg.selectAll("text")
      .data(x.domain())
    .enter().append("svg:text")
      .attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
      .attr("y", 6)
      .attr("text-anchor", "middle")
      .attr("dy", ".71em")
      .text(format);

  // Add y-axis rules.
  var rule = svg.selectAll("g.rule")
      .data(y.ticks(5))
    .enter().append("svg:g")
      .attr("class", "rule")
      .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });

  rule.append("svg:line")
      .attr("x2", w - p[1] - p[3])
      .style("stroke", function(d) { return d ? "#fff" : "#000"; })
      .style("stroke-opacity", function(d) { return d ? .7 : null; });

  rule.append("svg:text")
      .attr("x", w - p[1] - p[3] + 6)
      .attr("dy", ".35em")
      .text(d3.format(",d"));
});

    </script>
  </body>
</html>
date	wounds	other	disease
5/1854	0	95	105
6/1854	0	40	95
7/1854	0	140	520
8/1854	20	150	800
9/1854	220	230	740
10/1854	305	310	600
11/1854	480	290	820
12/1854	295	310	1100
1/1855	230	460	1440
2/1855	180	520	1270
3/1855	155	350	935
4/1855	195	195	560
5/1855	180	155	550
6/1855	330	130	650
7/1855	260	130	430
8/1855	290	110	490
9/1855	355	100	290
10/1855	135	95	245
11/1855	100	140	325
12/1855	40	120	215
1/1856	0	160	160
2/1856	0	100	100
3/1856	0	125	90
	<!DOCTYPE html>
	<html>
	<head>
	<title>Crimean War</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
	<style type="text/css">

	svg {
	width: 960px;
	height: 500px;
	border: solid 1px #ccc;
	font: 10px sans-serif;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	p = [20, 50, 30, 20],
	x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
	y = d3.scale.linear().range([0, h - p[0] - p[2]]),
	z = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue"]),
	parse = d3.time.format("%m/%Y").parse,
	format = d3.time.format("%b");

	var svg = d3.select("body").append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");

	d3.csv("crimea.csv", function(crimea) {

	// Transpose the data into layers by cause.
	var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) {
	return crimea.map(function(d) {
	return {x: parse(d.date), y: +d[cause]};
	});
	}));
	console.log(causes);
	console.log(crimea);
	// Compute the x-domain (by date) and y-domain (by top).
	x.domain(causes[0].map(function(d) { return d.x; }));
	y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);

	// Add a group for each cause.
	var cause = svg.selectAll("g.cause")
	.data(causes)
	.enter().append("svg:g")
	.attr("class", "cause")
	.style("fill", function(d, i) { return z(i); })
	.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

	// Add a rect for each date.
	var rect = cause.selectAll("rect")
	.data(Object)
	.enter().append("svg:rect")
	.attr("x", function(d) { return x(d.x); })
	.attr("y", function(d) { return -y(d.y0) - y(d.y); })
	.attr("height", function(d) { return y(d.y); })
	.attr("width", x.rangeBand());

	// Add a label per date.
	var label = svg.selectAll("text")
	.data(x.domain())
	.enter().append("svg:text")
	.attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
	.attr("y", 6)
	.attr("text-anchor", "middle")
	.attr("dy", ".71em")
	.text(format);

	// Add y-axis rules.
	var rule = svg.selectAll("g.rule")
	.data(y.ticks(5))
	.enter().append("svg:g")
	.attr("class", "rule")
	.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });

	rule.append("svg:line")
	.attr("x2", w - p[1] - p[3])
	.style("stroke", function(d) { return d ? "#fff" : "#000"; })
	.style("stroke-opacity", function(d) { return d ? .7 : null; });

	rule.append("svg:text")
	.attr("x", w - p[1] - p[3] + 6)
	.attr("dy", ".35em")
	.text(d3.format(",d"));
	});

	</script>
	</body>
	</html>