D3 Examples - Bitcoin DIJA ADJ Close (non-interactive)

xxxxxxxxxx
 
<!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>
    