How the Widget works:
1. In order to add point values, enter the x and y coordinates in the respective input fields and hit 'Add Point.'
2. The point table above contains the xy coordinates of the point, the predicted y and the error and squared error values. You can edit the Observed X and Observed Y by clicking on the number and typing in the number of your choice. Then, click on the graph and the graph will update itself.
3. If you don't have a defined set of points, you can create random points. Simply enter the number of points you wish to generate in the '# of points' box and hit 'Randomize Points'. This will generate the amount of random points that you specified.
4.To plot the line of best-fit, check the Plot Best-Fit checkbox. That will display the line of best fit on your graph.
5. You will also notice a graph that appears between the graphing area and the table. This graph indicates the value of the total squared error. In other words, as your error increases, the graph's height will increase with it.
6. You can also drag points around the graph and see how they change the line of best fit. Only visible points can be dragged. In addition, you can use the sliders (located below 'Degree of Polynomial') to change the coefficient values and see how the line of best fit is changing.
7. If you click on a point, the point will be temporarily removed from the point list. You will notice that the checkbox corresponding to that point will be unchecked.
8.You can include the point again by either clicking the checkbox or clicking on the point again. This feature will allow you to look at how a specific point affects the best fit of the graph.
Help
How to use our widget in your own webpage
If you wish to use the applet as is, first clone our GitHub Repository so that you all the necessary files.
Afterwards, simply include the following HTML Code into your own code:
<head>
....
<script src ="example-data.js"></script>
<script src ="work-data.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="line-fitter.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="line-fitter.js"></script>
</head>
...
<body>
...
<div class="line-fit"></div>
...
</>
If you want modify the width and height, simply change the width and height accordingly
...class = "line-fitter" style = "width: ; height: ;"