pkpp1233/index.html

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

path {
  stroke: #000;
  fill-opacity: .8;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var width = 960,
      height = 500;

  // Hard-code some csv data.
  var csv =
    [
      {value: 10, series: "one"},
      {value: 20, series: "one"},
      {value: 90, series: "one"},
      {value: 30, series: "one"},
      {value: 90, series: "one"},
      {value: 50, series: "one"},
      {value: 10, series: "one"},
      {value: 40, series: "one"},
      {value: 10, series: "one"},
      {value: 30, series: "one"},
      {value: 50, series: "one"},
      {value: 20, series: "one"},
      {value: 30, series: "one"},
      {value: 40, series: "two"},
      {value: 30, series: "two"},
      {value: 10, series: "two"},
      {value: 20, series: "two"},
      {value: 30, series: "two"},
      {value: 50, series: "two"},
      {value: 30, series: "two"},
      {value: 90, series: "two"},
      {value: 30, series: "two"},
      {value: 20, series: "two"},
      {value: 60, series: "two"},
      {value: 80, series: "two"},
      {value: 75, series: "two"},
    ]

  // Set headers for csv.
  var valueHeader = "value";
  var seriesHeader = "series";
  var uniqueSeries = ["one", "two"];

  var m = uniqueSeries.length; // number of series

  // Restructue csv to become an array of arrays, separated by series.
  var dataObject = {};

  uniqueSeries.forEach(function(series){
    dataObject[series] = [];
  })

  csv.forEach(function(row){
    dataObject[row[seriesHeader]].push(row[valueHeader]);
  })

  var data = d3.values(dataObject);

  var n = data[0].length; // number of values assuming each series has equal # of values.

  var x = d3.scale.linear()
      .domain([0, n - 1])
      .range([0, width]);

  var y = d3.scale.ordinal()
      .domain(d3.range(m))
      .rangePoints([0, height], 1);

  var z = d3.scale.linear()
      .domain(d3.extent(csv, function(d){ return d.value; }))
      .range([0, height / (2*m)]);

  var color = d3.scale.ordinal()
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

  var area = d3.svg.area()
      .interpolate("basis")
      .x(function(d, i) { return x(i); })
      .y0(function(d) { return -z(d); })
      .y1(function(d) { return z(d); });

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  svg.selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
      .style("fill", function(d, i) { return color(i); })
      .attr("d", area);
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	stroke: #000;
	fill-opacity: .8;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 960,
	height = 500;

	// Hard-code some csv data.
	var csv =
	[
	{value: 10, series: "one"},
	{value: 20, series: "one"},
	{value: 90, series: "one"},
	{value: 30, series: "one"},
	{value: 90, series: "one"},
	{value: 50, series: "one"},
	{value: 10, series: "one"},
	{value: 40, series: "one"},
	{value: 10, series: "one"},
	{value: 30, series: "one"},
	{value: 50, series: "one"},
	{value: 20, series: "one"},
	{value: 30, series: "one"},
	{value: 40, series: "two"},
	{value: 30, series: "two"},
	{value: 10, series: "two"},
	{value: 20, series: "two"},
	{value: 30, series: "two"},
	{value: 50, series: "two"},
	{value: 30, series: "two"},
	{value: 90, series: "two"},
	{value: 30, series: "two"},
	{value: 20, series: "two"},
	{value: 60, series: "two"},
	{value: 80, series: "two"},
	{value: 75, series: "two"},
	]

	// Set headers for csv.
	var valueHeader = "value";
	var seriesHeader = "series";
	var uniqueSeries = ["one", "two"];

	var m = uniqueSeries.length; // number of series

	// Restructue csv to become an array of arrays, separated by series.
	var dataObject = {};

	uniqueSeries.forEach(function(series){
	dataObject[series] = [];
	})

	csv.forEach(function(row){
	dataObject[row[seriesHeader]].push(row[valueHeader]);
	})

	var data = d3.values(dataObject);

	var n = data[0].length; // number of values assuming each series has equal # of values.

	var x = d3.scale.linear()
	.domain([0, n - 1])
	.range([0, width]);

	var y = d3.scale.ordinal()
	.domain(d3.range(m))
	.rangePoints([0, height], 1);

	var z = d3.scale.linear()
	.domain(d3.extent(csv, function(d){ return d.value; }))
	.range([0, height / (2*m)]);

	var color = d3.scale.ordinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

	var area = d3.svg.area()
	.interpolate("basis")
	.x(function(d, i) { return x(i); })
	.y0(function(d) { return -z(d); })
	.y1(function(d) { return z(d); });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("path")
	.data(data)
	.enter().append("path")
	.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
	.style("fill", function(d, i) { return color(i); })
	.attr("d", area);
	</script>