death_prop_over_time

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <meta charset="utf-8">
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <div id="main-wrapper">
    
    <div id="filters">
<div class="demo current" data-val="F">Button 1</div>
<div class="demo" data-val="M">Button 2</div>
    </div>
    
    <div class="clr"></div>
    <div id="chart"></div>
  </div> 
  
  <script>

var margin = {top: 10, right: 15, bottom: 30, left: 40},
width = 595 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;

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

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

// Color   
var z = d3.scale.category20b();

var USER_DEMO = 'F';
var USER_CAUSE = null;

var percentage = d3.format("%")
    
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(percentage)

d3.tsv("death-prop-2005-14-mf.tsv", type, function (error, data_all) {
      
 
var area = d3.svg.area()
    .x(function(d) { return x(d.age); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });
  
//       .entries(data_all) // we append this method later !!!
      
	var data_filtered = data_all.filter(function(d) { return d.group === USER_DEMO; });

var layers = stack(nest.entries(data_filtered));

var curr_title = svg.append("text")
		.attr("id", "currcause")
		.attr("transform", "translate("+ (width/2+margin.left) + "," + (height/2+margin.top-100) + ")");
	
      
	var reset_button = svg.append("text")
		.attr("id", "reset")
		.attr("class", "navbutton")
		.attr("transform", "translate("+ (width/2+margin.left) + "," + (height/2+margin.top-150) + ")")
		.text("SHOW ALL")
		.on("click", reset);
	var prev_button = svg.append("text")
		.attr("id", "previous")
		.attr("class", "navbutton")
		.attr("transform", "translate("+ (width/2+margin.left-10) + "," + (height/2+margin.top-50) + ")")
		.text("< PREV")
		.on("click", previous);
	var next_button = svg.append("text")
		.attr("id", "next")
		.attr("class", "navbutton")
		.attr("transform", "translate("+ (width/2+margin.left+10) + "," + (height/2+margin.top-50) + ")")
		.text("NEXT >")
		.on("click", next);

//      console.log(nest.entries(data_filtered))
//      console.log(layers)

// add domains: 
  
      
 	x.domain(d3.extent(data_filtered, function(d) { return d.age; }));
	y.domain([0, d3.max(data_filtered, function(d) { return d.y0 + d.y; })]);
     
     svg.selectAll(".layer").data(layers).enter().append("path")
     .classed("layer", true)
     .attr("id", function (d) {
       return d.key; // "F01-F99"
     })
     .attr("d", function (d) {
           return area(d.values)  // here we pass in d.values 
           // property for each line one
           }).style("fill", function (d) {
           return z(d.key)
     })
     
var layer_label = svg.selectAll(".layerlabel")
.data(layers).enter()
.append("text")
.attr("class", "layerlabel")
// .attr("transform", function (d) {
// var cmeta = causes_meta[d.key];
// var cvalue = d.values[cmeta.xlab] + "," + y(cvalue.y0 + cvalue.y / 2) + ")";
// })
.attr("dy", ".5em")
.text(function(d) {
if (causes_meta[d.key].xlab < 100) {
return causes_meta[d.key].name;
} else {
return "";
}
});
      
      
var layer_label = svg.selectAll(".layerlabel")
.data(layers)
.enter().append("text")
.attr("class", "layerlabel")
.attr("transform", function(d) {
var cmeta = causes_meta[d.key];
var cvalue = d.values[cmeta.xlab];
return "translate(" + x(cmeta.xlab) + "," + y(cvalue.y0 + cvalue.y / 2) + ")";
})
.attr("dy", ".5em")
.text(function(d) {
if (causes_meta[d.key].xlab < 100) {
return causes_meta[d.key].name;
} else {
return "";
}
});
     
     
     
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("class", "x axis")
.attr("transform", "translate(7," + (height+18) + ")")
.text("years old");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
     
     
     
     
     
     
     
      console.log(data_filtered)
      
      
  // update when click layers:
 
      
      
      
      
      
 var filters = d3.selectAll("#filters .demo")
 .on("click", function (d) {
   d3.select(".demo.current").classed("current", false)
   // always call - .demo.current - together, tight
   USER_DEMO = d3.select(this).attr("data-val")
   d3.select(this).classed("current", true)
   update()
 })
 
 
svg.selectAll(".layer").on("click", function(d,i) {
		if (USER_CAUSE === null) {
			USER_CAUSE = d3.select(this).attr("id");
		} else {
			USER_CAUSE = null;
		}	
		update();
	});

// d3.selectAll("layerlabel").data(layers)
// .enter().append()
      
      
      
      
 // Reset and show all layers.
function reset() {
    USER_CAUSE = null;
    update();
}
  
  
// pre and next buttons: 
  
  	// Next layer.
	function next() {
		if (USER_CAUSE != null) {
			var curr_index = Object.keys(causes_meta).indexOf(USER_CAUSE);
			if (curr_index == Object.keys(causes_meta).length-1) {
				USER_CAUSE = Object.keys(causes_meta)[0];
			} else {
				USER_CAUSE = Object.keys(causes_meta)[curr_index+1];
			}
			
			update();
		}
	}
	
	
	// Previous layer.
	function previous() {
		if (USER_CAUSE != null) {
			var causes = Object.keys(causes_meta);
			var curr_index = causes.indexOf(USER_CAUSE);
			if (curr_index == 0) {
				USER_CAUSE = causes[causes.length-1];
			} else {
				USER_CAUSE = causes[curr_index-1];
			}
			
			update();
		}
	}
  
  
  
  
  
  
  
  
  
  
  
      
 
	function update() {
		
		data_filtered = data_all.filter(function(d) { return d.group === USER_DEMO; });
		
		// User selected a cause
		if (USER_CAUSE != null) {
			
			// Filter data accordingly.
			data_filtered = data_filtered.map(function(d) {
				if (d.cause !== USER_CAUSE) {	// Scope issues (?). Had to create new object.
					return {
						"age": d.age,
						"cause": d.cause,
						"group": d.group,
						"prop": 0,
						"y": d.y,
						"y0": d.y0,
					}
				} else {
					return d;
				}
			});
			
			// Update current title
			curr_title.text(causes_meta[USER_CAUSE].descrip);
		
		} 
		
		// Cause deselected
		else {
			// Don't need to do anything.
		}
		
		// Update the layers.
		var layers = stack(nest.entries(data_filtered));
		
		d3.selectAll(".layer")
			.data(layers)
		  .transition()
			.duration(1000)
			.attr("d", function(d) {
				return area(d.values); 
			});

// Update layer labels.
		d3.selectAll(".layerlabel")
			.data(layers)
		  .transition()
			.duration(1000)
			.attr("transform", function(d) {
				var cmeta = causes_meta[d.key];
				var cvalue = d.values[cmeta.xlab];
				return "translate(" + x(cmeta.xlab) + "," + y(cvalue.y0 + cvalue.y / 2) + ")";
			})
			.style("opacity", function() {
				if (USER_CAUSE != null) {
					// Fade label out
					return 0;
				} else {
					return 1;
				}
			});
	}

})// end of data loading function
    
    
   
    
function type (d) {
    d.age = +d.age;
    d.prop = +d.prop;
    return d;

}
    
    
    
    
    
    
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js