D3 Examples - regression

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
​
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
<script type="text/javascript">
// Your beautiful D3 code will go here
//回归函数
​
​
var width = 600;  //画布的宽度
var height = 600;   //画布的高度
var margin = {top: 40, right: 20, bottom: 30, left: 40}
var width_max = 500;
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    //设定高度
d3.csv("file1.csv",function(csvdata) {  
var x1 = 2000  
var y1 = 0
var x2 = 9000
var y2 = 0
var x =[]
var y =[]
for (var i = 0; i < csvdata.length; i++) {
    if(i <  csvdata.length - 3)
    {   
      x.push(csvdata[i].Earnings_FT)
      y.push(csvdata[i].Earnings_All)
    }
    if (i == csvdata.length - 1)
    {
      y1 = csvdata[i].Number_of_people*x1 - (-1*csvdata[i].Total_income)
      y2 = csvdata[i].Number_of_people*x2 - (-1*csvdata[i].Total_income)
      console.log(y1)
      console.log(y2)
    }
}    
var line = d3.line()
var x_scale = d3.scaleLinear().domain([0, d3.max(x)]).range([0,(width - margin.left - margin.right)])
var y_scale = d3.scaleLinear().domain([0, d3.max(y)]).range([height - margin.top - margin.bottom, 0])
​
var xAxis = d3.axisBottom(x_scale)
​
var yAxis = d3.axisLeft(y_scale)
console.log(x)
console.log(y)
svg.selectAll(".dot")
      .data(csvdata)
    .enter().append("circle") 
      .attr("r", 3.5)
      .attr("class", "dot")
      .attr("cx", function(d,i) { if(i<csvdata.length-3)return x_scale(d.Earnings_FT) + margin.left; })
      .attr("cy", function(d,i) { if(i<csvdata.length-3)return y_scale(d.Earnings_All) + 3.5; })
      .style("fill", "steelblue")
​
svg.append("g")
      .attr("class", "x axis")
    //  .attr("transform", "translate("+ margin.left +"," + (height - margin.bottom) + ")")
​
      .attr("transform", "translate("+ margin.left +"," + (height - margin.top - margin.bottom+3.5) + ")")
      .call(xAxis)
      .append("text")
      .attr("class", "label")
      .attr("x", width-60)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Fulltime_Earning")
      .style("fill", "black");
svg.append("g")
       .attr("transform", "translate(" + ( margin.left ) + ",3.5)")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 16)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("All_Earnings")
      .style("fill", "black")
svg.append("line")
    .attr("x1",x_scale(x1) + margin.left)
    .attr("y1", y_scale(y1) + 3.5)
    .attr("x2",x_scale(x2) + margin.left)
    .attr("y2", y_scale(y2) + 3.5)
    .attr("stroke-width",3)
    .attr("stroke","red");
  
  
​
  svg.append("rect")
      .attr("x", width - 108)
            .attr( "y", 12)
      .attr("width", 38)
      .attr("height", 4)
      .style("fill", 'red');
​
  svg.append("text")
      .attr("x", width-128)
      .attr("y", 12)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text('linear regression between earnings');
   svg.append("text")
      .attr("x", width-128)
      .attr("y", 50)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text('y='+csvdata[csvdata.length - 1].Number_of_people+'x'+csvdata[csvdata.length - 1].Total_income+'');
​
  });
 
</script>
</body>
</html>
    