ColinEberhardt/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A tweet-sized version of this animation.

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.js"></script>
    <style>
    circle {
      fill:none;
      stroke: #222;
    }
    </style>
  </head>
  <body>
    <script src="scripts.js"></script>
  </body>
</html>

## scripts.js
var w = 500, // width
    h = 500, // height
    n = 100, // just some random number
    o = {}, p = {};   // a few objects, remove the need for 'var'

// create a canvas
var i = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .style("background", "#d1d1d1")
    .append("g")
    .attr("transform", "translate(" + [w / 2, h / 2] + ")");

// aliases
var s = Math.sin, c = Math.cos, π = Math.PI;

// datajoin utility function
function j(data, element) {
  var update = i.selectAll(element)
      .data(data);

  //TODO: exit
  update.enter = update.enter().append(element);
  return update;
}

// render loop
d3.timer(tweet);

function tweet(t) {
  // 126 chars, just enough room for a hastag!
  o=j(d3.range(0,n),"circle");o.enter.attr("r",w/4);p=d=>w/4*s(d*t/1e3/n);o.attr({"cx":d=>p(d)*c(d*π/n),"cy":d=>p(d)*s(d*π/n)});
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.js"></script>
	<style>
	circle {
	fill:none;
	stroke: #222;
	}
	</style>
	</head>
	<body>
	<script src="scripts.js"></script>
	</body>
	</html>
	var w = 500, // width
	h = 500, // height
	n = 100, // just some random number
	o = {}, p = {}; // a few objects, remove the need for 'var'

	// create a canvas
	var i = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h)
	.style("background", "#d1d1d1")
	.append("g")
	.attr("transform", "translate(" + [w / 2, h / 2] + ")");

	// aliases
	var s = Math.sin, c = Math.cos, π = Math.PI;

	// datajoin utility function
	function j(data, element) {
	var update = i.selectAll(element)
	.data(data);

	//TODO: exit
	update.enter = update.enter().append(element);
	return update;
	}

	// render loop
	d3.timer(tweet);

	function tweet(t) {
	// 126 chars, just enough room for a hastag!
	o=j(d3.range(0,n),"circle");o.enter.attr("r",w/4);p=d=>w/4s(dt/1e3/n);o.attr({"cx":d=>p(d)c(dπ/n),"cy":d=>p(d)s(dπ/n)});
	}