Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <title>D3 Scatterplot with Regression Line</title>
- <style>
- .line {
- stroke: #E4002B;
- fill: none;
- stroke-width: 3;
- }
- .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="http://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 = 960 - margin.left - margin.right,
- height = 500 - 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 xvalues = [1480536255, 1480622655, 1480709055, 1480795455, 1480881855, 1480968255, 1481054655, 1481141055, 1481227455, 1481313855];
- var yvalues = [7, 8, 8, 6, 8, 6, 6, 8, 7, 7];
- var data = create_data(xvalues, yvalues);
- 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")
- .text("X-Value");
- 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")
- .text("Y-Value")
- 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);
- function create_data(x, y) {
- //center x
- var xmin = 0;
- for (i = 0; i < x.length; i++) {
- if (i == 0 || x[i] < xmin)
- xmin = x[i];
- }
- var x_mean = 0;
- var y_mean = 0;
- var term1 = 0;
- var term2 = 0;
- for (i = 0; i < x.length; i++) {
- x[i] = x[i] - xmin;
- x_mean += x[i];
- y_mean += y[i];
- }
- var n = x.length;
- // 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement