billdwhite/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from mcgovey's block: svg-drag

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.active {
	stroke: #000;
	stroke-width: 2px;
}

</style>
<svg width="960" height="500">
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

var circles = d3.range(20).map(function() {
	return {
		x: Math.round(Math.random() * (width - radius * 2) + radius),
		y: Math.round(Math.random() * (height - radius * 2) + radius)
	};
});

var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
     filter.append('feGaussianBlur')
        .attr('in','SourceGraphic')
        .attr('stdDeviation','12')
        .attr('color-interpolation-filters','sRGB')
        .attr('result','blur');
    filter.append('feColorMatrix')
        .attr('in','blur')
        .attr('mode','matrix')
        .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
        .attr('result','gooey');

var color = d3.scaleOrdinal()
    .range(["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]);

var node = svg.append('g')
    .attr('class', 'nodes')
    .style('filter', 'url(#gooeyCodeFilter)')
    .selectAll("circle")
	.data(circles)
	.enter()
		.append("circle")
		.attr("cx", function(d) { return d.x; })
		.attr("cy", function(d) { return d.y; })
		.attr("r", radius)
		.style("fill", function(d, i) { return color(i); })
		.call(d3.drag()
			.on("start", dragstarted)
			.on("drag", dragged)
			.on("end", dragended))
		.transition()
			.duration(2500)
			.delay(function(d) { return d.x * 20; })
			.on("start", reposition);

function dragstarted(d) {
	d3.select(this).transition();
	d3.select(this).raise().classed("active", true);
}

function dragged(d) {
	d3.select(this)
		.attr("cx", d.x = d3.mouse(this)[0])
		.attr("cy", d.y = d3.mouse(this)[1]);
}

function dragended(d) {
	d3.select(this)
		.classed("active", false)
		.transition()
			.duration(2500)
			.on("start", reposition);
}

function reposition() {
	var circle = d3.select(this);
	(function repeat() {
		circle = circle.transition()
			.duration(2000)
			.attr("cx", function(d) { return Math.round(Math.random() * (width - radius * 2) + radius); })
			.attr("cy", function(d) { return Math.round(Math.random() * (height - radius * 2) + radius); })
			.transition()
				.on("end", repeat);
	})();
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.active {
	stroke: #000;
	stroke-width: 2px;
	}

	</style>
	<svg width="960" height="500">
	</svg>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	radius = 32;

	var circles = d3.range(20).map(function() {
	return {
	x: Math.round(Math.random() * (width - radius * 2) + radius),
	y: Math.round(Math.random() * (height - radius * 2) + radius)
	};
	});

	var defs = svg.append('defs');
	var filter = defs.append('filter').attr('id','gooeyCodeFilter');
	filter.append('feGaussianBlur')
	.attr('in','SourceGraphic')
	.attr('stdDeviation','12')
	.attr('color-interpolation-filters','sRGB')
	.attr('result','blur');
	filter.append('feColorMatrix')
	.attr('in','blur')
	.attr('mode','matrix')
	.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9')
	.attr('result','gooey');

	var color = d3.scaleOrdinal()
	.range(["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]);

	var node = svg.append('g')
	.attr('class', 'nodes')
	.style('filter', 'url(#gooeyCodeFilter)')
	.selectAll("circle")
	.data(circles)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", radius)
	.style("fill", function(d, i) { return color(i); })
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended))
	.transition()
	.duration(2500)
	.delay(function(d) { return d.x * 20; })
	.on("start", reposition);

	function dragstarted(d) {
	d3.select(this).transition();
	d3.select(this).raise().classed("active", true);
	}

	function dragged(d) {
	d3.select(this)
	.attr("cx", d.x = d3.mouse(this)[0])
	.attr("cy", d.y = d3.mouse(this)[1]);
	}

	function dragended(d) {
	d3.select(this)
	.classed("active", false)
	.transition()
	.duration(2500)
	.on("start", reposition);
	}

	function reposition() {
	var circle = d3.select(this);
	(function repeat() {
	circle = circle.transition()
	.duration(2000)
	.attr("cx", function(d) { return Math.round(Math.random() * (width - radius * 2) + radius); })
	.attr("cy", function(d) { return Math.round(Math.random() * (height - radius * 2) + radius); })
	.transition()
	.on("end", repeat);
	})();
	}

	</script>