Yony Kochinski yonester

A comparison between rendering circles in SVG and canvas. The functions are purposely written separately but similarly to show some key differences. Notably, SVG's structure allows us to take advantage of D3's wonderful data binding capabilities, which makes diffing new data against present data expressive and easy. Canvas will perform better when animating many nodes (not shown here) and makes styling more succinct, but try zooming in a couple of steps (Cmd-plus in OSX, Ctrl-plus in Windows) to see the difference between rendering pixels and vectors.

	{
	"excludes": [
	"$RECYCLE.BIN",
	"RECYCLER",
	"RecoveryBin",
	"System Volume Information",
	"Thumbs.db",
	"desktop.ini",
	"Desktop.ini",
	"*.SYS",

	var _ = require('lodash');

	// Pretty print for JSON-style objects.
	function pprint(obj) {
	if (!pprint.indent) pprint.indent = '';
	if (_.isPlainObject(obj)) {
	_.forOwn(obj, function(v, k) {
	if (_.isArray(v) \|\| _.isPlainObject(v)) {
	console.log(pprint.indent + k + ':');
	pprint.indent += ' ';

	var jsdom = require('jsdom'),
	d3 = require('d3');

	var document = jsdom.jsdom();

	var rect = d3.select(document.body).append('svg').append('rect');

	// This works...
	rect
	.attr('width', 0)

	license: gpl-3.0
	height: 400