block wall: filter user

A collection of blocks scanned with blockscanner for the bl.ocksplorer.org project and further processed with block-similarity.

Try filtering by some usernames

mbostock, enjalot, syntagmatic, emeeks, nitaku

If you don't see any of your blocks here, add your GitHub username
If you need to add thumbnails to your bl.ocks, use blockbuilder.org

forked from enjalot's block: all the blocks

forked from enjalot's block: block wall

forked from enjalot's block: block wall: thumbnails only

forked from enjalot's block: block wall: filter user

<!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="//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 data = create_data(1000);

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(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 = 100;
        var noise = 0;
        // 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 / 5 + 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>

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