wboykinm/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mountains</title>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
html, body {
    height: 100%;
    background: #222;
    margin: 0;
}
body, #prev, #next {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
}
#prev, #next {
    position: absolute;
    top: 0;
    color: #d1d1d1;
    font-size: 70px;
    text-decoration: none;
    padding: 20px;
}
#prev {
    left: 0;
}
#next {
    right: 0;
}
svg {
    margin: auto;
}
</style>
<script>
var width = 500,
    height = 500,
    rows = 8;

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

var filter = svg.append("filter")
    .attr("id", "blur")
    .attr("x", -100)
    .attr("y", -100)
    .attr("width", width + 200)
    .attr("height", 300)
    .attr("filterUnits", "userSpaceOnUse")
    .append("feGaussianBlur")
    .attr("stdDeviation", 20);

var data = d3.range(rows).map(function() {
    var x = Math.random() * width;
    return [[0, 0], [x - 50, 0], [x, -100], [x + 50, 0], [width, 0]];
});

var area = d3.svg.area()
    .y0(height)
    .interpolate("basis");

var scale = d3.scale.linear()
    .domain([0, rows])
    .range(["#CFF4FF","#006EB1"]);

var groups = svg.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) {
        return "translate(" + [0, i * height / rows] + ")"
    });

groups.append("path")
    .attr("fill", function(d, i) { return scale(i); })
    .attr("d", area);

</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Mountains</title>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	html, body {
	height: 100%;
	background: #222;
	margin: 0;
	}
	body, #prev, #next {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: center;
	}
	#prev, #next {
	position: absolute;
	top: 0;
	color: #d1d1d1;
	font-size: 70px;
	text-decoration: none;
	padding: 20px;
	}
	#prev {
	left: 0;
	}
	#next {
	right: 0;
	}
	svg {
	margin: auto;
	}
	</style>
	<script>
	var width = 500,
	height = 500,
	rows = 8;

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

	var filter = svg.append("filter")
	.attr("id", "blur")
	.attr("x", -100)
	.attr("y", -100)
	.attr("width", width + 200)
	.attr("height", 300)
	.attr("filterUnits", "userSpaceOnUse")
	.append("feGaussianBlur")
	.attr("stdDeviation", 20);

	var data = d3.range(rows).map(function() {
	var x = Math.random() * width;
	return [[0, 0], [x - 50, 0], [x, -100], [x + 50, 0], [width, 0]];
	});

	var area = d3.svg.area()
	.y0(height)
	.interpolate("basis");

	var scale = d3.scale.linear()
	.domain([0, rows])
	.range(["#CFF4FF","#006EB1"]);

	var groups = svg.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d, i) {
	return "translate(" + [0, i * height / rows] + ")"
	});

	groups.append("path")
	.attr("fill", function(d, i) { return scale(i); })
	.attr("d", area);

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