Basic Data Update & Linear Regression

A basic scatterplot with variable axes. Uses d3's update pattern to modify the axis values as well as the x y position of the points on the plane.

A linear regression is then calculated and plotted for the data set being visualized. The slope, y-intercept and rSquared values are calculated from code found here: /benvandyke/8459843

A random generator is then used to fetch an x value, plug that into the y=mx+b format and give an array of points which, when plotted, aproximates the linear regression. The transition on the linear regression is a bit wonky, I stil need to look into that, feel free to comment if you know where I went wrong there.

May want to implement this: https://bocoup.com/weblog/improving-d3-path-animation

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Regression and Update</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

<div id="graph-wrapper-y">
        <text>Y-Axis</text>
        <select id="graph-picklist-y" class="graph-picklist">
          <option value="Rating" selected>Average Rating</option>
          <option value="Count">Attendee Count</option>
          <option value="Duration">Duration</option>
        </select>
      </div>

<div id="graph-wrapper-x">
        <text>X-Axis</text>
        <select id="graph-picklist-x" class="graph-picklist">
          <option value="Rating">Average Rating</option>
          <option value="Count" selected>Attendee Count</option>
          <option value="Duration">Duration</option>
        </select>
      </div>

</div>
  </body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js