d3.js, log.io, Buzz

08 Jul 2011 | By Alex Young | Tags graphics frameworks logging audio

d3.js

Data-Driven Documents (GitHub: mbostock / d3, License) by Michael Bostock is a library for manipulating HTML based on data. It can be used to visualise data using HTML or SVG, and supports interactivity and animations.

This relatively simple graph example demonstrates some basic visualisation and animation possibilities. This choropleth example illustrates some of d3’s features in a more concise manner, and this Voronoi diagram is just fun to play with!

The author has written detailed documentation and tutorials for d3. It also includes a guide for people who have worked with Protovis (also by Mike Bostock).

log.io

Log.io (GitHub: NarrativeScience / Log.io, License: Apache 2.0) by Mike Smathers and Narrative Science is log viewer written with Node. It can be used to monitor logs from multiple machines, generating data effectively instantly using inotify then pushing them to the browser with socket.io.

There’s a live demo running on logio.org:8998.

Although the authors have a lot planned, the project is already formidable. Best of all, it’s fast:

Log.io has no persistence layer. Harvesters are informed of file changes via inotify, and log messages hop from harvester to server to web client via socket.io. The result is fast; internal benchmarks have exceeded 5000 messages/sec.

Buzz

Buzz (GitHub: jaysalvat / buzz, License: MIT) by Jay Salvat is a library that makes working with the audio element easier. It has a chainable API:

var mySound = new buzz.sound( '/sounds/myfile', {
  formats: [ 'ogg', 'mp3', 'acc' ]
});

mySound.play()
  .fadeIn()
  .loop()
  .bind('timeupdate', function() {
    var timer = buzz.toTimer(this.getTime());
    document.getElementById('timer').innerHTML = timer;
  });

Recently I’ve been working with HTML5 audio and it’s not exactly as straightforward as it should be. Buzz looks like it does some of the things I found awkward — for some reason most browsers seem to say maybe for canPlayType('/audio/aac') which confused me when I knew they wanted vorbis. Buzz makes this easier by accepting groups of files for each supported format then testing to see which the browser can play, using the right jiggery pokery behind the scenes.


blog comments powered by Disqus