SHARE
TWEET

Untitled

a guest Dec 11th, 2016 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>D3 Scatterplot with Regression Line</title>
  4. <style>
  5. .line {
  6.     stroke: #E4002B;
  7.     fill: none;
  8.     stroke-width: 3;
  9. }
  10.  
  11. .axis path,
  12. .axis line {
  13.     fill: none;
  14.     stroke: black;
  15.     shape-rendering: crispEdges;
  16. }
  17.  
  18. .axis text {
  19.     font-size: 10px;
  20.     font-family: sans-serif;
  21. }
  22.  
  23. .text-label {
  24.     font-size: 10px;
  25.     font-family: sans-serif;
  26. }
  27.  
  28. .dot {
  29.     stroke: #293b47;
  30.     fill: #7A99AC
  31. }
  32. </style>
  33.  
  34. <body>
  35.     <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  36.     <script>
  37.     var margin = {
  38.             top: 20,
  39.             right: 20,
  40.             bottom: 30,
  41.             left: 40
  42.         },
  43.         width = 960 - margin.left - margin.right,
  44.         height = 500 - margin.top - margin.bottom;
  45.  
  46.     var x = d3.scale.linear()
  47.         .range([0, width]);
  48.  
  49.     var y = d3.scale.linear()
  50.         .range([height, 0]);
  51.  
  52.     var xAxis = d3.svg.axis()
  53.         .scale(x)
  54.         .orient("bottom");
  55.  
  56.     var yAxis = d3.svg.axis()
  57.         .scale(y)
  58.         .orient("left");
  59.  
  60.     var svg = d3.select("body").append("svg")
  61.         .attr("width", width + margin.left + margin.right)
  62.         .attr("height", height + margin.top + margin.bottom)
  63.         .append("g")
  64.         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  65.  
  66.  
  67.         var xvalues = [1480536255, 1480622655, 1480709055, 1480795455, 1480881855, 1480968255, 1481054655, 1481141055, 1481227455, 1481313855];
  68.         var yvalues = [7, 8, 8, 6, 8, 6, 6, 8, 7, 7];
  69.        
  70.        
  71.        
  72.     var data = create_data(xvalues, yvalues);
  73.  
  74.     data.forEach(function(d) {
  75.         d.x = +d.x;
  76.         d.y = +d.y;
  77.         d.yhat = +d.yhat;
  78.     });
  79.  
  80.     var line = d3.svg.line()
  81.         .x(function(d) {
  82.             return x(d.x);
  83.         })
  84.         .y(function(d) {
  85.             return y(d.yhat);
  86.         });
  87.  
  88.     x.domain(d3.extent(data, function(d) {
  89.         return d.x;
  90.     }));
  91.     y.domain(d3.extent(data, function(d) {
  92.         return d.y;
  93.     }));
  94.  
  95.     svg.append("g")
  96.         .attr("class", "x axis")
  97.         .attr("transform", "translate(0," + height + ")")
  98.         .call(xAxis)
  99.         .append("text")
  100.         .attr("class", "label")
  101.         .attr("x", width)
  102.         .attr("y", -6)
  103.         .style("text-anchor", "end")
  104.         .text("X-Value");
  105.  
  106.     svg.append("g")
  107.         .attr("class", "y axis")
  108.         .call(yAxis)
  109.         .append("text")
  110.         .attr("class", "label")
  111.         .attr("transform", "rotate(-90)")
  112.         .attr("y", 6)
  113.         .attr("dy", ".71em")
  114.         .style("text-anchor", "end")
  115.         .text("Y-Value")
  116.  
  117.     svg.selectAll(".dot")
  118.         .data(data)
  119.         .enter().append("circle")
  120.         .attr("class", "dot")
  121.         .attr("r", 3.5)
  122.         .attr("cx", function(d) {
  123.             return x(d.x);
  124.         })
  125.         .attr("cy", function(d) {
  126.             return y(d.y);
  127.         });
  128.  
  129.     svg.append("path")
  130.         .datum(data)
  131.         .attr("class", "line")
  132.         .attr("d", line);
  133.  
  134.  
  135.  
  136.     function create_data(x, y) {
  137.    
  138.         //center x
  139.         var xmin = 0;
  140.         for (i = 0; i < x.length; i++) {
  141.             if (i == 0 || x[i] < xmin)
  142.                 xmin = x[i];
  143.         }
  144.        
  145.         var x_mean = 0;
  146.         var y_mean = 0;
  147.         var term1 = 0;
  148.         var term2 = 0;
  149.        
  150.         for (i = 0; i < x.length; i++) {
  151.             x[i] = x[i] - xmin;
  152.             x_mean += x[i];
  153.             y_mean += y[i];
  154.         }
  155.        
  156.         var n = x.length;
  157.  
  158.        // calculate mean x and y
  159.        x_mean /= n;
  160.        y_mean /= n;
  161.  
  162.        // calculate coefficients
  163.        var xr = 0;
  164.        var yr = 0;
  165.        for (i = 0; i < x.length; i++) {
  166.            xr = x[i] - x_mean;
  167.            yr = y[i] - y_mean;
  168.            term1 += xr * yr;
  169.            term2 += xr * xr;
  170.  
  171.        }
  172.        var b1 = term1 / term2;
  173.        var b0 = y_mean - (b1 * x_mean);
  174.        // perform regression
  175.  
  176.        yhat = [];
  177.        // fit line using coeffs
  178.        for (i = 0; i < x.length; i++) {
  179.            yhat.push(b0 + (x[i] * b1));
  180.        }
  181.  
  182.        
  183.         var data = [];
  184.        for (i = 0; i < y.length; i++) {
  185.            data.push({
  186.                "yhat": yhat[i],
  187.                "y": y[i],
  188.                "x": x[i]
  189.            })
  190.        }
  191.        
  192.        return (data);
  193.    }
  194.    </script>
  195. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top