Data analysis recipes: Fitting a model to data

This is an interactive version of the example data in Data analysis recipes: Fitting a model to data (Hogg, Bovy, & Lang 2010) that can be used to explore various issues involved in modeling and fitting data. Use the sliders and buttons to explore different setups!

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/mathjax.js?config=tex-mml-am_svg"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
   
    .options {
      margin-top: 45px;
      float:left; 
      text-align: center;
    }
    
    .title {
      text-align: center;
      font-size: 16pt;
      text-decoration: underline;
    }
    
    .btn {
      float:center;
    }
    
    .slidercontainer {
       float:center; margin-top: 15px;
    }
    
    .slider {
      text-align: center
    }
    
    .slidertext {
      font-size=20; 
      text-align: center
    }
    
    .axis text {
      font-size: 12pt;
    }
    .axis.label {
      font-size: 20pt;
    }
    
    
  </style>

</head>

<body>
  <div id="chart"  style="width: 600px; float:left"></div>
  <div id="options" style="width: 250px; height: 450px; float:left">
  	<div class="options" style="width:250px; height:10px;">
	  	<p class="title" id="fittext">Fitting: y = m x + b</p>
   		<div class="buttoncontainer btn" style="width: 250px; margin-top: 15px;">
    		<button class="btn" type="button" id="fitbutton" style="width: 170px;">Fit y = m (x-175) + b instead</button>
	    </div>
    	<div class="slidercontainer" style="width:250px; height: 55px;">
	  		<input style="width: 130px;" type="range" min="-50" max="250" value="50" class="slider" id="bslider">
    		<p class="slidertext">b: <span id="bvalue"></span></p>
  		</div>
  		<div class="slidercontainer" style="width: 250px; float:left;">
	  	  <input style="width: 130px;" type="range" min="0.9" max="2.8" value="2.24" step="0.05" class="slider" id="mslider">
    		<p class="slidertext">m: <span id="mvalue"></span></p>
  		</div>
      <div class="checkboxcontainer" style="width: 250px; float:left;">
        <input class="checkbox" id="errorCheckBox" type="checkbox"><span style="width:160px;display:inline-block;text-align:left;margin-left: 5px;">Display error bars</span></br>
        <input class="checkbox" id="outlierCheckBox" type="checkbox"><span style="width:160px;display:inline-block;text-align:left;margin-left: 5px;">  Display outliers</span></br>
        <input class="checkbox" id="chi2CheckBox" type="checkbox"><span style="width:160px;display:inline-block;text-align:left;margin-left: 5px;">  Display $\\\chi^2$ <span id="chi2value"></span></span>
      </div>
  	</div>
 	</div>

var innerWidth  = outerWidth  - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("#chart").append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight);
    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var xAxisG = g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + innerHeight + ")")
		// Not sure why appending to xAxisG does not work, but it doesn't
    g.append("text")             
      .attr("transform",
            "translate(" + (innerWidth/2) + " ," + 
                           (innerHeight + xAxisLabelOffset) + ")")
      .style("text-anchor", "middle")
      .attr("class", "x axis label")
      .text(xAxisLabelText);
    var yAxisG = g.append("g")
      .attr("class", "y axis");
    g.append("text")             
      .attr("transform",
            "translate(" + (-yAxisLabelOffset) + " ," + 
                           (innerHeight/2) + ") rotate(-90)")
      .style("text-anchor", "middle")
      .attr("class", "y axis label")    
      .text(yAxisLabelText);

var xScale = d3.scaleLinear()
      .range([0, innerWidth]);
    var yScale = d3.scaleLinear()
      .range([innerHeight, 0]);

xAxisG.call(xAxis);
      yAxisG.call(yAxis);

// Add data points: inlier
      indata= data.filter(d => d.id > 4);
      var circles = g.selectAll("circle.inlier").data(indata);
      circles.enter().append("circle")
      		.attr('class', 'inlier')
          .attr("r", circleRadius)
          .attr("fill", circleColor)
        .merge(circles)
          .attr("cx", function (d){ return xScale(d[xColumn]); })
          .attr("cy", function (d){ return yScale(d[yColumn]); });

circles.exit().remove();
      
      // outliers
      outdata= data.filter(d => d.id <= 4);
      var outcircles = g.selectAll("circle.outlier").data(outdata);
      outcircles.enter().append("circle")
       		.attr('class', 'outlier')
      		.style("visibility","hidden")
          .attr("r", circleRadius)
          .attr("fill", circleColor)
        .merge(outcircles)
          .attr("cx", function (d){ return xScale(d[xColumn]); })
          .attr("cy", function (d){ return yScale(d[yColumn]); });
      outcircles.exit().remove();      
      
      // Add errorbars
      var elines = g.selectAll('line.error').data(indata);
      elines.enter()
    		.append('line')
    		.attr('class', 'error')
      	.style("stroke",circleColor)
        .style("stroke-width",2) 
      	.style("visibility", "hidden")
  		.merge(elines)
    		.attr('x1', function(d) { return xScale(d[xColumn]); })
    		.attr('x2', function(d) { return xScale(d[xColumn]); })
    		.attr('y1', function(d) { return yScale(d[yColumn] + d[yerrColumn]);})
    		.attr('y2', function(d) { return yScale(d[yColumn] - d[yerrColumn]);});

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG to https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/mathjax.js?config=tex-mml-am_svg

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

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG