D3 Examples - Basic Data Update & Linear Regression

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

Another resource here

xxxxxxxxxx
 
<!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>
​
  <body>
    <div id="title"></div>
    <text id="equation"></text>
    <div id="graph-wrapper">
​
      <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>
​
  <script type="text/javascript" src="data.js"></script>
  <script type="text/javascript" src="regression.js"></script>
​
</html>
    