Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active November 30, 2017 21:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fogonwater/547d710b8f693b9b756b to your computer and use it in GitHub Desktop.
Save fogonwater/547d710b8f693b9b756b to your computer and use it in GitHub Desktop.
Download ZIP
On the impossibility of focusing.
Raw
.block
license: mit
Raw
README.md

A meditation on the impossibility of focusing today.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#chart {
text-align: center;
}
</style>
<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960 - margin.left - margin.right,
height = 520 - margin.top - margin.bottom;
var randomX = d3.random.normal(width / 2, 80),
randomY = d3.random.normal(height / 2, 80);
var data = [],
rx,
ry,
xlim1 = width / 2 - 70,
xlim2 = width / 2 + 70,
ylim1 = height / 2 - 70,
ylim2 = height / 2 + 70;
while (data.length < 50000) {
rx = randomX();
ry = randomY();
if (xlim1 < rx && rx < xlim2 && ylim1 < ry && ry < ylim2) {
continue;
}
data.push([rx, ry]);
}
var x = d3.scale.linear()
.domain([0, width])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, height])
.range([height, 0]);
var svg = d3.select("#chart").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 + ")");
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) {return d[0];})
.attr("cy", function(d) {return d[1];})
.attr("r", .7)
.attr("opacity", 0.6)
.attr("fill", '#222');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment