Multivariate linear regression

Click on the chart to change the model prediction data point (orange line) and see how the independent variables impact one another's marginal effect on the dependent variable.

Shown are the model predictions (solid line) and 95% confidence regression interval (dashed line) for the following model:

mpg = B₀ + B₁ wt + B₂ hp + B₃ (wt x hp) + B₄ wt² + B₅ hp²

where

mph = Miles/Gallon

wt = Weight (1000 lb)

hp = Gross horsepower

Because this model is linear in the parameters, B_j, it can be estimated using least-squares. The independent variables, weight and horsepower, enter the model nonlinearly and so the partial derivative of weight and horsepower will vary as weight and horsepower change. In other words, the "marginal effect" on fuel efficiency from an increase in a car's weight is different depending upon whether the car was intially light or heavy.

The slopes on the above graphs show this marginal effect. The downward sloping functions confirm what would be expected; cars that weigh more and have more horsepower are predicted to be less fuel efficient (have lower miles/gallon).

The (slight) nonlinearity in the regression equation shows that an increase in a car's horsepower has a varying impact on fuel efficiency depending on whether the car initially had a lot of horsepower or just a little. The slope is steeper at lower horsepower levels and flatter at higher horsepower levels. This implies that an increasing a car's horsepower by 20 is predicted to decrease fuel efficiency more for a low-horsepower car than it is for a high-horsepower car.

Because of the cross-product term, (wt x hp), the marginal effect of a car's weight on miles/gallon depends upon the horsepower of the car and vice versa. Clicking on the chart changes the weight and horsepower. Changing the weight changes the marginal effect for horsepower and changing the horsepower changes the marginal effect for weight. Increasing a car's weight makes the regression equation for horsepower flatter and lower. This implies that for heavier cars, horsepower plays a smaller role in determining fuel efficiency. Note that the orange indicator line cross the model prediction line at the same place.

Here are the equations for the marginal effects (i.e., partial derivatives of mpg):

mpg'_wt = B₁ + B₃ hp + 2 B₄ wt

mpg'_hp = B₂ + B₃ wt + 2 B₅ hp

Notes: The model and data used here are for demonstration purposes and the model predictions are very weak approximations to a complex system. To see the model results open up the console log in the browser (F12 on Chrome). The data source is mtcars from R's dataset package. Formulas for regression interval and White's scaled variance-covariance matrix were found here: http://www.ssc.wisc.edu/~bhansen/econometrics/ Using science.js for linear algebra functions.

<html>
  <head>
   <style>
    body {
      font: 12px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: black;
      stroke-width: 1px;
    }
    
    .line {
      fill: none;
      stroke: black;
    }
    
    .line.upper,
    .line.lower {
      stroke-dasharray: 5, 5;
    }
    
    .marker {
      stroke: tomato;
      stroke-width: 2px;
    }
    
   </style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="science.v1.min.js"></script>
    <script src="lm.js"></script>
    <script src="line-chart.js"></script>
    <script>
      var margin = { top: 10, left: 30, bottom: 50, right: 10 },
          width = 480 - margin.left - margin.right,
          height = 300 - margin.top - margin.bottom;
      
      var lineChart = d3.lineChart() // see line-chart.js
        .width(width)
        .height(height)
        .yExtent([0, 32]);

[ { key: "wt", name: "Weight (1000 lbs)"}, 
        { key: "hp", name: "Gross horsepower" }]
        .forEach(function(d) {
          var container = d3.select("body").append("div")
            .attr("class", "container " + d.key)
            .style("position", "relative")
            .style("float", "left");
            
          var svg = container.append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("class", "canvas")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
          
          svg.append("line")
            .attr("class", "marker");
          
          svg.append("g").attr("class", "x axis")
              .attr("transform", "translate(0," + height + ")")
            .append("text")
              .attr("class", "label")
              .attr("x", width)
              .attr("y", -6)
              .style("text-anchor", "end")
              .text(d.name);
              
          svg.append("g").attr("class", "y axis")
            .append("text")
              .attr("class", "label")
              .attr("y", 6)
              .attr("dx", ".71em")
              .style("text-anchor", "start")
              .text("Miles/Gallon")
            
          svg.append("rect")
            .attr("class", "event-rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill-opacity", 0);
        });
        
      d3.json("cars.json", function(error, cars) {
        if (error) throw error;
        
        var model = lm()  // see lm.js
          .y(function(d) { return d.mpg; })
          .X(function(d) { 
            return [1, d.wt, d.hp, d.wt*d.hp, Math.pow(d.wt, 2), Math.pow(d.hp, 2)]; 
          })
          .data(cars);
          
        var fit = model();
        
        console.log(fit);
        
        var wt = d3.mean(cars, pluck("wt"));
        var wtExtent = d3.extent(cars, pluck("wt"));
        
        var hp = d3.mean(cars, pluck("hp"));
        var hpExtent = d3.extent(cars, pluck("hp"));
          
        d3.select(".wt .event-rect")
          .on("click", function() {
            var x = d3.mouse(this)[0];
            var wtInterval = renderWtInterval(hp);
                wt = wtInterval.xScale.invert(x);
            
            var hpInterval = renderHpInterval(wt);
            
            d3.select(".wt .marker")
              .attr("x1", x)
              .attr("x2", x);
          });
          
        d3.select(".hp .event-rect")
          .on("click", function() {
            var x = d3.mouse(this)[0];
            var hpInterval = renderHpInterval(wt);
                hp = hpInterval.xScale.invert(x);
            
            var wtInterval = renderWtInterval(hp);
            
            d3.select(".hp .marker")
              .attr("x1", x)
              .attr("x2", x);
          });
        
        var wtInterval = renderWtInterval(hp);
        var wtScale = wtInterval.xScale;
            d3.select(".wt .marker")
              .attr("x1", wtScale(wt))
              .attr("x2", wtScale(wt))
              .attr("y1", height)
              .attr("y2", 0);
        
        var hpInterval = renderHpInterval(wt);
        var hpScale = hpInterval.xScale;
            d3.select(".hp .marker")
              .attr("x1", hpScale(hp))
              .attr("x2", hpScale(hp))
              .attr("y1", height)
              .attr("y2", 0);
       
        function renderWtInterval(hp) {
          var wt_data = sequence(cars, pluck("wt"), 40)
            .map(function(wt) {
              var interval = fit.getRegressionInterval({ wt: wt, hp: hp });
              return {
                wt: wt,
                y_pred: interval.y_pred,
                y_upper: interval.y_upper,
                y_lower: interval.y_lower
              };
            });
          
          wtChart = lineChart
            .x(function(d) { return d.wt; });
          
          d3.select(".wt svg").select(".canvas")
            .call(wtChart.y(pluck("y_pred")), "y line", wt_data)
            .call(wtChart.y(pluck("y_lower")), "lower line", wt_data)
            .call(wtChart.y(pluck("y_upper")), "upper line", wt_data);
          
          d3.select(".wt svg").select(".x.axis").call(wtChart.xAxis());
          d3.select(".wt svg").select(".y.axis").call(wtChart.yAxis());
          
          return {
            data: wt_data,
            xScale: wtChart.xScale(),
            yScale: wtChart.yScale()
          };
        }
         
        function renderHpInterval(wt) {
          var wt_mean = d3.mean(cars, pluck("wt"));
          var hp_data = sequence(cars, pluck("hp"), 40)
            .map(function(hp) {
              var interval = fit.getRegressionInterval({ wt: wt, hp: hp });
              return {
                hp: hp,
                y_pred: interval.y_pred,
                y_upper: interval.y_upper,
                y_lower: interval.y_lower
              };
            });
          
          hpChart = lineChart
            .x(function(d) { return d.hp; });
            
          d3.select(".hp svg").select(".canvas")
            .call(hpChart.y(pluck("y_pred")), "y line", hp_data)
            .call(hpChart.y(pluck("y_lower")), "lower line", hp_data)
            .call(hpChart.y(pluck("y_upper")), "upper line", hp_data);
            
          d3.select(".hp svg").select(".x.axis").call(hpChart.xAxis());
          d3.select(".hp svg").select(".y.axis").call(hpChart.yAxis());
          
          return {
            data: hp_data,
            xScale: hpChart.xScale(),
            yScale: hpChart.yScale()
          };
        }

});
      
      // Returns accessor function for a given key
      // makes accessing "columns" from associative arrays easier
      function pluck(key) { return function(d) { return d[key]; }; }
      
      // Returns a sequence of numbers (of specified length) between the min 
      // and max of an array
      function sequence(data, accessor, length_out) {
        var extent = d3.extent(data, accessor);
        var step = (extent[1] - extent[0])/length_out;
        return d3.range(extent[0], extent[1], step);
      }
    </script>
  </body>
</html>

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