eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    same as previous block using force layout, but using rect instead of circle
love how it starts pulsating when large

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- http://clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
<style>
    body { background: #130C0E; }
</style>

<body>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>


## script-compiled.js
'use strict';

var w = window.innerWidth;
var h = window.innerHeight;

// store generated data
var data = [];

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

var rect = svg.selectAll('rect');

var force = d3.layout.force().size([w, h]).on('tick', function () {
    rect.attr('x', function (d) {
        return d.x;
    }).attr('y', function (d) {
        return d.y;
    });
});

var render = function render(data) {
    rect = rect.data(data, function (d) {
        return d.id;
    });

    rect.enter().append('rect').attr({
        fill: function fill(d) {
            return d.color;
        },
        width: 18,
        height: 18
    }).call(force.drag);

    rect.exit().transition().attr('r', 0).remove();

    force.nodes(data).start();
};

// generate some data
function update() {
    var n = 0;
    var c = ['red', 'green', 'blue'];
    return function () {
        data.push({
            id: n,
            color: c[n % 3]
        });
        render(data);
        n++;
    };
}
// update every second
// note: calling as update()(); (higher order function)
setInterval(update(), 500);

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<!-- http://clrs.cc/ -->
	<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
	<style>
	body { background: #130C0E; }
	</style>

	<body>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<!-- d3 code -->
	<script src="script-compiled.js" charset="utf-8"></script>
	'use strict';

	var w = window.innerWidth;
	var h = window.innerHeight;

	// store generated data
	var data = [];

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

	var rect = svg.selectAll('rect');

	var force = d3.layout.force().size([w, h]).on('tick', function () {
	rect.attr('x', function (d) {
	return d.x;
	}).attr('y', function (d) {
	return d.y;
	});
	});

	var render = function render(data) {
	rect = rect.data(data, function (d) {
	return d.id;
	});

	rect.enter().append('rect').attr({
	fill: function fill(d) {
	return d.color;
	},
	width: 18,
	height: 18
	}).call(force.drag);

	rect.exit().transition().attr('r', 0).remove();

	force.nodes(data).start();
	};

	// generate some data
	function update() {
	var n = 0;
	var c = ['red', 'green', 'blue'];
	return function () {
	data.push({
	id: n,
	color: c[n % 3]
	});
	render(data);
	n++;
	};
	}
	// update every second
	// note: calling as update()(); (higher order function)
	setInterval(update(), 500);