gumeo/.block

## .block

      
    Raw
  

              .block
            
          
## .gistup
gistup

## README.md

      
    Raw
  

              README.md
            
          
    Disclaimer!
This is currently under development, hope to get this up and working soon!
Being new to blocks I wanted to try to create something. I was inspired by this block on Moiré patters and wanted to create something similar based on the first segment in this numberphile video!
My field is statistics and Machine Learning. I was fascinated by D3 visualizations and decided to challenge myself to learn more JS and play around with D3 to be able to create cool interactive data visualizations.
The overlayed pattern follows your mouse cursor, and has been rotated one degree to give the spiral effect. You need to keep your mouse in the center to try to match the points as closely as possible and then shift the mouse a little bit.
The future plan is to get the following functionality:
Hold down the left mouse button to rotate and use the scroll wheel to resize the pattern. I might change the control interface later and add something to be able to control it on a touch screen.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Moiré Patterns Random Points</title>
<style>

rect {
	  fill: none;
	    pointer-events: all;
}

.dot {
  stroke: #800;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var w = 960,
    h = 500;

var dataset = [];
    for(var i = 0; i < 5000; i++){
            var x = Math.floor((Math.random()*w)+1);
            var y = Math.floor((Math.random()*h)+1);
            dataset.push([x, y]);
    };

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);
svg.append("rect")
    .attr("width", w)
    .attr("height", h);

svg.selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("cx", function(d) {
        return d[0];
    })
    .attr("cy", function(d) {
        return d[1];
    })
    .attr("r", 2);

//svg.append("g").selectAll("circle")
//    .data(d3.range(110))
//  .enter().append("circle")
//    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
//    .attr("r", function(d) { return d * 5; });

var circle = svg.append("g").selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("cx", function(d){
        return d[0];
    })
    .attr("cy", function(d){
        return d[1];
    })
    .attr("r",2)
    .attr("transform", "translate(" + w/200 + "," + h/200 + ") rotate(1)")
    .attr("transform","rotate(1)");

svg.on("mousemove", function() {
    var mouse = d3.mouse(this),
        r = (Math.sqrt(mouse[0]) + 10) / 10;

    circle
        .attr("transform", "translate(" + (mouse[0]-w/2) + "," + (mouse[1]-h/2) + ") rotate(1)");
        //.attr("r", function(d) { return d * r; });
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Moiré Patterns Random Points</title>
	<style>

	rect {
	fill: none;
	pointer-events: all;
	}

	.dot {
	stroke: #800;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var w = 960,
	h = 500;

	var dataset = [];
	for(var i = 0; i < 5000; i++){
	var x = Math.floor((Math.random()*w)+1);
	var y = Math.floor((Math.random()*h)+1);
	dataset.push([x, y]);
	};

	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);
	svg.append("rect")
	.attr("width", w)
	.attr("height", h);

	svg.selectAll("circle")
	.data(dataset)
	.enter().append("circle")
	.attr("cx", function(d) {
	return d[0];
	})
	.attr("cy", function(d) {
	return d[1];
	})
	.attr("r", 2);

	//svg.append("g").selectAll("circle")
	// .data(d3.range(110))
	// .enter().append("circle")
	// .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
	// .attr("r", function(d) { return d * 5; });

	var circle = svg.append("g").selectAll("circle")
	.data(dataset)
	.enter().append("circle")
	.attr("cx", function(d){
	return d[0];
	})
	.attr("cy", function(d){
	return d[1];
	})
	.attr("r",2)
	.attr("transform", "translate(" + w/200 + "," + h/200 + ") rotate(1)")
	.attr("transform","rotate(1)");

	svg.on("mousemove", function() {
	var mouse = d3.mouse(this),
	r = (Math.sqrt(mouse[0]) + 10) / 10;

	circle
	.attr("transform", "translate(" + (mouse[0]-w/2) + "," + (mouse[1]-h/2) + ") rotate(1)");
	//.attr("r", function(d) { return d * r; });
	});

	</script>