D3 Examples - Reg

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    console.clear();
    
    var width = 960;
    var height = 500;
    var margin = {
                    top: 20,
                    right: 20,
                    bottom: 30,
                    left: 40
                };
    
    var svg = d3.select("body").append("svg")
      .attr("width", width - margin.left - margin.right)
      .attr("height", height - margin)
    
    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var x0 = d3.scaleBand()
                .rangeRound([0, width])
                .paddingInner(0.1);
​
        var x1 = d3.scaleBand()
                .padding(0.05);
​
        var y = d3.scaleLinear()
                .rangeRound([height, 0]);
    
    d3.tsv("data.csv",function(data){
      var parseMonth = d3.timeParse("%m-%Y");
      
      data.forEach(function(d){
        d["SUM"] = +d["SUM"];
                d["MTH_Format"] = parseMonth(d["MTH"] + "-" + +d["YR"]);
      });
      
      var nestCounter = d3.nest().key(function(d){
        return d["MTH_Format"];
      }).key(function(d){
        return d["CHN"];
      }).rollup(function(child){
        return d3.sum(child,function(d){return d["SUM"]})
      }).entries(data);
      
      var testReg = []
      
      
    
    calculateRegression(testReg,nestCounter)
    
    var lineNest = d3.nest().key(function(d){return d["MTH"]})
    .key(function(d){return d["CHN"]})
    .rollup(function(child){
        return d3.sum(child,function(d){return d["value"]})
      })
    .entries(nestCounter);
      
      var keys = d3.map(data, function (d) {
                return d["CHN"];
            }).keys();
      
      x0.domain(data.map(function (d) {
                return d["MTH_Format"];
            }));
            x1.domain(keys).rangeRound([0, x0.bandwidth()]);
            y.domain([0, ((d3.max(lineNest, function (d) {
                return d.values[0].value;
            })) + (d3.max(lineNest, function (d) {
                return d.values[0].value;
            })) * 0.2)]);
      
      var line = d3.line()
                .x(function (d) {
                    return x0(d["key"]);
                })
                .y(function (d) {
                    return y(d.values[0].value);
                });
      
    
    g
                        .append("path")
                        .datum(lineNest)
                        .attr("class", "line")
                        .attr("d", line)
                        .style("opacity", function(d){
      console.log("Asd")
      console.log(d);return 1;
    })
                        .style("stroke", "red")
                        .style("stroke-width", 3)
                        .style("fill", "none")  
    
    
    
    g.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x0).tickFormat(d3.timeFormat("%B")));
​
            g.append("g")
                .attr("class", "axis")
                .call(d3.axisLeft(y).ticks(null, "s"))
                .append("text")
                .attr("x", 2)
                .attr("y", y(y.ticks().pop()) + 0.5)
                .attr("dy", "0.32em")
                .attr("fill", "#000")
                .attr("font-weight", "bold")
                .attr("text-anchor", "start")
                .text("Total Amount");
      
    });
    
    
    
    
    
    //Regression data generator
        function calculateRegression(paramID, data) {
            data.forEach(function (d) {
                d["xNum"] = d3.timeFormat("%m")(new Date(d.key));
                d["value"] = +d.values[0].value;
                d["CHN"] = d.values[0].key;
                d["MTH"] = d.key
            })
​
            //Draw the Regression Line
            //Data Manipulation
            // src : https://bl.ocks.org/ctufts/298bfe4b11989960eeeecc9394e9f118
            // calculate coefficients
            var x_mean = d3.mean(data, function (d) {
                return d["xNum"];
            });
            var y_mean = d3.mean(data, function (d) {
                return d["value"];
            });
            var term1 = 0;
            var term2 = 0;
            var xr = 0;
            var yr = 0;
            for (i = 0; i < data.length; i++) {
                xr = data[i]["xNum"] - x_mean;
                yr = data[i]["value"] - y_mean;
                term1 += xr * yr;
                term2 += xr * xr;
            }
​
            var b1 = term1 / term2;
            var b0 = y_mean - (b1 * x_mean);
​
            // perform regression 
            var yhat = [];
            var temp;
            // fit line using coeffs
            for (i = 0; i < data.length; i++) {
                yhat.push(b0 + (data[i]["xNum"] * b1));
            }
            for (i = 0; i < data.length; i++) {
                temp = {
                    "yhat": yhat[i],
                    "y": data[i]["value"],
                    "x": data[i]["xNum"],
                    "MTH": data[i]["MTH"]
                }
                temp["CHN"] = data[i]["CHN"]
                paramID.push(temp);
            }
        }
​
  </script>
</body>
​
    