ctufts/.block

## .block
license: gpl-3.0
height: 500
scrolling: no
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Interactive Scatterplot with Regression Line

This is scatter plot with a regression line fit to the data. When clicking the New Data! button the plot will update with
newly genated data. The underlying template for the scatter plot is based on
an example from Scott Murray's book Interactive Data Visualization.

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Scatterplot with Regression Line</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">

  </head>
<body>
  <button type="button">New Data!</button>
  <p></p>
  <script>
    var w = 960;
    var h = 500;
    var padding = 30;
    var numDataPoints = 1000;

    //create data points
    var dataset = create_data(numDataPoints);

    // function for creation of line
    var newline = d3.line()
        .x(function(d) {
            return xScale(d.x);
        })
        .y(function(d) {
            return yScale(d.yhat);
        });

    ////// Define Scales /////////////////
    var xScale = d3.scaleLinear()
                          .domain([0,d3.max(dataset, function(d){
                            return d.x;
                          })])
                          .range([padding,w - padding*2]);
    var yScale = d3.scaleLinear()
                          .domain([
                            d3.min(dataset, function(d){
                              return(d.y);
                            }),
                            d3.max(dataset, function(d){
                              return d.y;
                          })]) //y range is reversed because svg
                          .range([h-padding, padding]);
    /////// Define Axis //////////////////////////////
    var xAxis = d3.axisBottom()
                      .scale(xScale);

    var yAxis = d3.axisLeft()
                  .scale(yScale)
                  .ticks(5);
    // create svg
    var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height", h);

    // cut off datapoints that are outside the axis
    svg.append("clipPath")
        .attr("id", "chart-area")
        .append("rect")
        .attr("x", padding)
        .attr("y", padding)
        .attr("width", w-padding * 3)
        .attr("height", h-padding *2);

    // append data points
    svg.append("g")
        .attr("id", "circles")
        .attr("clip-path", "url(#chart-area)")
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("class", "dot")
        .attr("cx", function(d){
          return xScale(d.x);
        })
        .attr("cy", function(d){
          return yScale(d.y);
        })
        .attr("r", 3.5);


    // append regression line
    svg.append("path")
        .datum(dataset)
        .attr("clip-path", "url(#chart-area)")
        .attr("class", "line")
        .attr("d", newline);

    // append Axes ///////////////////////////
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (h-padding) + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);

    d3.select("button")
      .on("click", function(){
        // create new data
        dataset = create_data(numDataPoints);


        //Update scale domains
        xScale.domain([0, d3.max(dataset, function(d) { return d.x; })]);
        yScale.domain([
           d3.min(dataset, function(d) { return d.y; }),
           d3.max(dataset, function(d) { return d.y; })
         ]);

        // update data points
        svg.selectAll("circle")
            .data(dataset)
            .transition()
            .duration(1000)
            .attr("cx", function(d){
              return xScale(d.x);
            })
            .attr("cy", function(d){
              return yScale(d.y);
            });

        // update and transition regression line
        svg.select("path")
            .datum(dataset)
            .transition()
            .duration(1000)
            .attr("d", newline);;

        // update axis
        svg.select(".x.axis")
              .transition()
              .duration(1000)
              .call(xAxis);

        svg.select(".y.axis")
                .transition()
                .duration(1000)
                .call(yAxis);

      });


    function create_data(nsamples) {
        var x = [];
        var y = [];
        var n = nsamples;
        var x_mean = 0;
        var y_mean = 0;
        var term1 = 0;
        var term2 = 0;
        var noise_factor = 2 + Math.random()*100;
        var noise = 0;
        var slope = (Math.random()*10) *
                  (Math.round(Math.random()) == 1 ? 1 : -1);
        // create x and y values
        for (var i = 0; i < n; i++) {
            noise = noise_factor * Math.random();
            noise *= Math.round(Math.random()) == 1 ? 1 : -1;
            y.push(i / slope + noise);
            x.push(i + 1);
            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>
</html>

## main.css

.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
}

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Scatterplot with Regression Line</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link rel="stylesheet" type="text/css" href="main.css">

	</head>
	<body>
	<button type="button">New Data!</button>
	<p></p>
	<script>
	var w = 960;
	var h = 500;
	var padding = 30;
	var numDataPoints = 1000;

	//create data points
	var dataset = create_data(numDataPoints);

	// function for creation of line
	var newline = d3.line()
	.x(function(d) {
	return xScale(d.x);
	})
	.y(function(d) {
	return yScale(d.yhat);
	});

	////// Define Scales /////////////////
	var xScale = d3.scaleLinear()
	.domain([0,d3.max(dataset, function(d){
	return d.x;
	})])
	.range([padding,w - padding*2]);
	var yScale = d3.scaleLinear()
	.domain([
	d3.min(dataset, function(d){
	return(d.y);
	}),
	d3.max(dataset, function(d){
	return d.y;
	})]) //y range is reversed because svg
	.range([h-padding, padding]);
	/////// Define Axis //////////////////////////////
	var xAxis = d3.axisBottom()
	.scale(xScale);

	var yAxis = d3.axisLeft()
	.scale(yScale)
	.ticks(5);
	// create svg
	var svg = d3.select("body")
	.append("svg")
	.attr("width",w)
	.attr("height", h);

	// cut off datapoints that are outside the axis
	svg.append("clipPath")
	.attr("id", "chart-area")
	.append("rect")
	.attr("x", padding)
	.attr("y", padding)
	.attr("width", w-padding * 3)
	.attr("height", h-padding *2);

	// append data points
	svg.append("g")
	.attr("id", "circles")
	.attr("clip-path", "url(#chart-area)")
	.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("class", "dot")
	.attr("cx", function(d){
	return xScale(d.x);
	})
	.attr("cy", function(d){
	return yScale(d.y);
	})
	.attr("r", 3.5);


	// append regression line
	svg.append("path")
	.datum(dataset)
	.attr("clip-path", "url(#chart-area)")
	.attr("class", "line")
	.attr("d", newline);

	// append Axes ///////////////////////////
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h-padding) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	d3.select("button")
	.on("click", function(){
	// create new data
	dataset = create_data(numDataPoints);


	//Update scale domains
	xScale.domain([0, d3.max(dataset, function(d) { return d.x; })]);
	yScale.domain([
	d3.min(dataset, function(d) { return d.y; }),
	d3.max(dataset, function(d) { return d.y; })
	]);

	// update data points
	svg.selectAll("circle")
	.data(dataset)
	.transition()
	.duration(1000)
	.attr("cx", function(d){
	return xScale(d.x);
	})
	.attr("cy", function(d){
	return yScale(d.y);
	});

	// update and transition regression line
	svg.select("path")
	.datum(dataset)
	.transition()
	.duration(1000)
	.attr("d", newline);;

	// update axis
	svg.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);

	svg.select(".y.axis")
	.transition()
	.duration(1000)
	.call(yAxis);

	});



	function create_data(nsamples) {
	var x = [];
	var y = [];
	var n = nsamples;
	var x_mean = 0;
	var y_mean = 0;
	var term1 = 0;
	var term2 = 0;
	var noise_factor = 2 + Math.random()*100;
	var noise = 0;
	var slope = (Math.random()10)
	(Math.round(Math.random()) == 1 ? 1 : -1);
	// create x and y values
	for (var i = 0; i < n; i++) {
	noise = noise_factor * Math.random();
	noise *= Math.round(Math.random()) == 1 ? 1 : -1;
	y.push(i / slope + noise);
	x.push(i + 1);
	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>
	</html>

	.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
	}