Regression Line for education levels correlation between women and men (18+ years old)

D3 Scatterplot with a Regression Line

This block is an extension of the Scatterplot Block with a regression line fit to the data. The data is randomly generated using the create_data function.

forked from ctufts's block: D3 Scatterplot with Regression Line

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 Scatterplot with Regression Line</title>
<style>
.line {
    stroke: #E4002B;
    fill: none;
    stroke-width: 2;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-size: 10px;
    font-family: sans-serif;
}

.text-label {
    font-size: 10px;
    font-family: sans-serif;
}

.dot {
    stroke: #293b47;
    fill: #7A99AC
}
</style>

<body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script>
    var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
        },
        width = 600 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

var x = d3.scale.linear()
        .range([0, width]);

var y = d3.scale.linear()
        .range([height, 0]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x1 = [405,905,1819,2029,1830,2250,5633,36008,22129,4486,5233,22027,8221,1970,2107]
     var y1 = [473,971,1688,2063,1921,2281,5391,35646,24084,5379,7440,24488,10462,1407,1504]
     var data = create_data(x1,y1);

data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
        d.yhat = +d.yhat;
    });

var line = d3.svg.line()
        .x(function(d) {
            return x(d.x);
        })
        .y(function(d) {
            return y(d.yhat);
        });

x.domain(d3.extent(data, function(d) {
        return d.x;
    }));
    y.domain(d3.extent(data, function(d) {
        return d.y;
    }));

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .attr("font-weight", "bold")
        .text("Male");

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .attr("font-weight", "bold")
        .text("Female")

svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", function(d) {
            return x(d.x);
        })
        .attr("cy", function(d) {
            return y(d.y);
        });

svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
      
    svg.append("text")
			.attr("x", (width + (margin.left + margin.right) )/ 2-10)
			.attr("y", 0 + margin.top)
			.attr("text-anchor", "middle")
			.style("font-size", "12px")
			.style("font-family", "sans-serif")
			.text("education levels correlation between women and men (18+ years old)");

function create_data(x,y) {
        var n = 15;
        var x_mean = 0;
        var y_mean = 0;
        var term1 = 0;
        var term2 = 0;

// create x and y values
        for (var i = 0; i < n; i++) {
            x_mean += x[i]
            y_mean += y[i]
        }
        // calculate mean x and y
        x_mean /= n;
        y_mean /= n;

// calculate coefficients
        var xr = 0;
        var yr = 0;
        for (i = 0; i < x.length; i++) {
            xr = x[i] - x_mean;
            yr = y[i] - y_mean;
            term1 += xr * yr;
            term2 += xr * xr;

}
        var b1 = term1 / term2;
        var b0 = y_mean - (b1 * x_mean);
        // perform regression

yhat = [];
        // fit line using coeffs
        for (i = 0; i < x.length; i++) {
            yhat.push(b0 + (x[i] * b1));
        }

var data = [];
        for (i = 0; i < y.length; i++) {
            data.push({
                "yhat": yhat[i],
                "y": y[i],
                "x": x[i]
            })
        }
        return (data);
    }
      
    </script>
</body>

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