3 streamgraphs on a page

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Boating Accidents by Day, Month and Hour</title>
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	
		body, h2 { font-family: Verdana, Tahoma, sans-serif; }

p { font-size: 85%;
				line-height: 1.2;
		}				
		#all { margin: 0 auto;
				width: 615px;
				height: 1600px;
				position: relative;
		}	
		
		.legend { font-weight: bold;
				font-size: 80%;
		}
		
		#whitebg {
				width: 50px;
				height: 50px;
				fill: white;
		}

</style>
</head>
<body>
	<div id="all">
		<h2>Boating Accidents by Day, Month and Hour</h2>
		<div id="day">
		<p>Recreational boating accidents follow a predictable pattern, as the
		three charts below demonstrate. On weekends, there are more accidents, 
		injuries, and deaths. There are, of course, more boaters out during those 
		days as well. The first chart (known as a streamgraph) clearly shows the 
		steep increase in accidents and injuries during the weekend. Although the 
		number of deaths does increase on the weekend, the change is not as pronounced.</p>
	
	<svg style="width:600px;height:450px;" ></svg>
		
	<script type="text/javascript">
(function() {	
	d3.csv("accDay.csv", dataDay);

function dataDay(data) {
		//set scales
		var xScale = d3.scaleLinear().domain([0, 6]).range([38, 557]);
		var yScale = d3.scaleLinear().domain([0, 1285]).range([400, 0]);

var events = ["accidents", "deaths", "injuries"];
		
		//set color scale
		var fillScale = d3.scaleOrdinal()
			.domain(events)
			.range(["steelblue", "red", "orange"]);

//generate stack
		stackLayout = d3.stack()
			.offset(d3.stackOffsetSilhouette)
			.order(d3.stackOrderInsideOut)
      .keys(events);
				 
		yScale.domain([-1300, 1300]);
		
		//create areas
		var stackArea = d3.area()
			.x((d, i) => xScale(i))
			.y0(d => yScale(d[0]))
			.y1(d => yScale(d[1]));

stackArea.curve(d3.curveBasis);
		
		d3.select("svg").selectAll("path")
			.data(stackLayout(data))
			.enter().append("path")
				.style("fill", d => fillScale(d.key))
				.attr("d", d => stackArea(d));
				
		//scale for x axis
		var dayScale = d3.scaleBand()
			.domain(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
			.range([-5, 600]); 
			
		var xAxis = d3.axisBottom()
      .scale(dayScale)
			.tickSize(-400);
        
    d3.select("svg")
			.append("g")
			.attr("transform", "translate(" + 0 + "," + 400 + ")")
			.call(xAxis);
			
		// add deaths legend
		d3.select("svg")
			.append("text")
			.attr("x", 50)
			.attr("y", 30)
			.attr("class", "legend")
			.style("fill", "red")
			.text("Deaths");

// add injuries legend
		d3.select("svg")
			.append("text")
			.attr("x", 50)
			.attr("y", 45)
			.attr("class", "legend")
			.style("fill", "orange")
			.text("Injuries");

// add accidents legend
		d3.select("svg")
			.append("text")
			.attr("x", 50)
			.attr("y", 60)
			.attr("class", "legend")
			.style("fill", "steelblue")
			.text("Accidents");
			
	}
})();	
	</script>
		</div>
		<div id="month">
			<p>Boating accidents by month also follow a predictable
			pattern. As you might expect, the summer months see an increase
			in all of the categories.</p>

//generate stack
		stackLayout = d3.stack()
			.offset(d3.stackOffsetSilhouette)
			.order(d3.stackOrderInsideOut)
      .keys(events);
				 
		yScale.domain([-1100, 1100]);
		
		//create areas
		var stackArea = d3.area()
			.x((d, i) => xScale(i))
			.y0(d => yScale(d[0]))
			.y1(d => yScale(d[1]));

stackArea.curve(d3.curveBasis);
		
		d3.select("#svg2").selectAll("path")
			.data(stackLayout(data))
			.enter().append("path")
				.style("fill", d => fillScale(d.key))
				.attr("d", d => stackArea(d));
				
		//scale for x axis
		var monthScale = d3.scaleBand()	
			.domain(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
			.range([-5, 600]); 
			
		var xAxis = d3.axisBottom()
			.scale(monthScale)
			.tickSize(-400);
        
		d3.select("#svg2")
				.append("g")
				.attr("transform", "translate(" + 0 + "," + 400 + ")")
				.call(xAxis);
						
		//add white rectangle for legend
		d3.select("#svg2")
			.append("rect") 
			.attr("x", 50)
			.attr("y",15)
			.attr("id", "whitebg");

// add deaths legend
		d3.select("#svg2")
			.append("text")
			.attr("x", 50)
			.attr("y", 30)	
			.attr("class", "legend")
			.style("fill", "red")
			.text("Deaths");

// add injuries legend
		d3.select("#svg2")
			.append("text")
			.attr("x", 50)
			.attr("y", 45)
			.attr("class", "legend")
			.style("fill", "orange")
			.text("Injuries");

// add accidents legend
		d3.select("#svg2")
			.append("text")
			.attr("x", 50)
			.attr("y", 60)
			.attr("class", "legend")
			.style("fill", "steelblue")
			.text("Accidents");

}
})();
	</script>
		</div>
				<div id="year">
			<p>Again, boating incidents by the time of day follow an
			expected pattern. </p>

stackArea.curve(d3.curveBasis);
		
		d3.select("#svg3").selectAll("path")
			.data(stackLayout(data))
			.enter().append("path")
				.style("fill", d => fillScale(d.key))
				.attr("d", d => stackArea(d));
				
		//scale for x axis
		var hourScale = d3.scaleBand()	
			.domain(["12am – 2:30am", "2:31am - 4:30am", "4:31am - 6:30am", "6:31am - 8:30am", "8:31am - 10:30am", "10:31am - 12:30pm", "12:31pm – 2:30pm", "2:31pm – 4:30pm", "4:31pm - 6:30pm", "6:31pm - 8:30pm", "8:31pm - 10:30pm", "10:31pm - 11:59pm"])
			.range([-1, 600]); 
			
		var xAxis = d3.axisBottom()
			.scale(hourScale)
			.tickSize(-400);
        
		d3.select("#svg3")
			.append("g")
			.attr("transform", "translate(" + 0 + "," + 400 + ")")
			.call(xAxis)
			.selectAll("text")
				.style("text-anchor", "end")
				.attr("transform", "rotate(-70)");
						
		//add white rectangle for legend
		d3.select("#svg3")
			.append("rect") 
			.attr("x", 50)
			.attr("y",15)
			.attr("id", "whitebg");

// add deaths legend
		d3.select("#svg3")
			.append("text")
			.attr("x", 50)
			.attr("y", 30)	
			.attr("class", "legend")
			.style("fill", "red")
			.text("Deaths");

// add injuries legend
		d3.select("#svg3")
			.append("text")
			.attr("x", 50)
			.attr("y", 45)
			.attr("class", "legend")
			.style("fill", "orange")
			.text("Injuries");

// add accidents legend
		d3.select("#svg3")
			.append("text")
			.attr("x", 50)
			.attr("y", 60)
			.attr("class", "legend")
			.style("fill", "steelblue")
			.text("Accidents");

}
})();
	</script>
		</div>
		<div>
			<p>Data Source: <a href="https://www.uscgboating.org">US Coast Guard Boating</a></p>
		</div>
	</div>	
</body>
</html>

https://d3js.org/d3.v4.min.js