Bitcoin DIJA ADJ Close (non-interactive)

<!doctype html>
<html>
<head>
	<title>Bitcoin DIJA ADJ Close (non-interactive)</title>
	<script src="d3.min.js"></script>
	<script src="d3-scale-chromatic.min.js"></script>
</head>
<style>
.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}
</style>
<body>
		<script>
			var margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var canvas = d3.select("body")
				.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.bottom + margin.top)
				.append("g")
					.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("DJIA_table.csv", function(data) {
				var dateFormat = d3.timeFormat("%Y-%m-%d");
				var maxClose = d3.max(data, function(d) { return +d.Close; });
				var minClose = d3.min(data, function(d) { return +d.Close; });
				var minDate = new Date(data[0].Date);
				var maxIndex = d3.max(data, function(d, i) { return i; });
				var maxDate = new Date(data[maxIndex].Date);
				var minVol = d3.min(data, function(d) { return +d.Volume; });
				var maxVol = d3.max(data, function(d) { return +d.Volume; });

console.log("Max Close:", maxClose);
				console.log("Min Close:", minClose);
				console.log("Max Date:", maxDate);
				console.log("Min Date:", minDate);
				console.log("Max Index", maxIndex);
				
				// axis scales
				var xScale = d3.scaleTime()
					.domain([minDate, maxDate])
					.range([0, width]);
				var yScale = d3.scaleLinear()
					.domain([minClose, maxClose])
					.range([height, 0]);

var xAxis = d3.axisBottom(xScale)
					.tickSize(3)
					.ticks(10);
				var yAxis = d3.axisLeft(yScale)
					.tickSizeInner(3)
					.tickSizeOuter(0);

canvas.append('g')
					.attr('transform', 'translate(0,' + height + ')')
					.classed('x axis', true)
					.call(xAxis);

canvas.append("text")             
			      .attr("transform",
			            "translate(" + (width/2) + " ," + 
			                           (height + margin.top + 10) + ")")
			      .style("text-anchor", "middle")
			      .text("Date");

canvas.append('g')
					.classed('y axis', true)
					.call(yAxis);

canvas.append("text")
					.attr("transform", "rotate(-90)")
					.attr("y", 0 - margin.left)
					.attr("x",0 - (height / 2))
					.attr("dy", "1em")
					.style("text-anchor", "middle")
					.text("DJIA Adj Close");

// Data scales
				var r = 1;
				var xdScale = d3.scaleLinear()
					.domain([r, maxIndex])
					.range([r, width]);
				var ydScale = d3.scaleLinear()
					.domain([maxClose, minClose])
					.range([height, 0]);
				var volumeScale = d3.scaleLinear()
					.domain([minVol, maxVol])
					.range([0,1]);

canvas.selectAll("circle")
					.data(data)
					.enter()
						.append("circle")
						.attr("cx", function(d) { return xScale(new Date(d.Date)); })
						.attr("cy", function(d) { return height - ydScale(d.Close); })
						.attr("r", 2)
						.attr("fill", function(d) { return d3.interpolateSpectral(1 - volumeScale(d.Volume)); });

// Color Legend
				var w = 140, h = 400;

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

var legend = key.append("defs")
					.append("svg:linearGradient")
					.attr("id", "gradient")
					.attr("x1", "100%")
					.attr("y1", "0%")
					.attr("x2", "100%")
					.attr("y2", "100%")
					.attr("spreadMethod", "pad");

var color = d3.scaleQuantize()
				  .domain([0, 1600])
				  .range(d3.schemeSpectral['10'].reverse());

color.range().forEach(function(d, i){
					legend.append("stop")
						.attr("offset", (i+1)*10 + "%")
						.attr("stop-color", d)
						.attr("stop-opacity", 1);
				});

key.append("rect")
					.attr("width", w - 100)
					.attr("height", h - 100)
					.style("fill", "url(#gradient)")
					.attr("transform", "translate(0,10)");

var y = d3.scaleLinear()
					.range([300, 0])
					.domain([minVol, maxVol]);

var yAxis = d3.axisRight(y);

key.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(41,10)")
					.call(yAxis);

key.append("text")
					.attr("transform", "rotate(-90)")
					.attr("x", -150)
					.attr("y", 120)
					.attr("dy", ".71em")
					.style("text-anchor", "middle")
					.text("Volume");
			});
			
		</script>
</body>
</html>