bl.ocksplorer.org – Learning d3.js by Example

We’ve been working quite a bit with d3.js here at Bocoup. From working on d3.chart to our work with clients like Climate Central. Regardless of our endeavor, one thing stayed true – we rely on the many examples out there showing off how to use various esoteric features of d3.js.

Many of these examples live on the wonderful http://bl.ocks.org built by Mike Bostock, the creator of d3.js and one of the tool’s most prolific users, with over 800+ examples. One of the challenges with bl.ocks is that it is not searchable. Bl.ocks serves as a front-end to github’s gists and as such relies on Github’s API.

After my visit to d3.unconf it became clear that the community as a whole relied heavily on these examples as well and needed a better gateway to finding various uses of the d3 API. Today we’re excited to share bl.ocksplorer.org, a search and navigation tool to blocks and gists that contain uses of the d3 API.

Bl.ocksplorer works by scanning the names of github users for their gists. We work off of a master list but we would love for you to help us grow it! Add your github username here.

Bl.ocksplorer is comprised of two parts (which are both open source): The backend searching task called blockscanner and the front-end UI called blocksplorer. The backend is using a redis-based worker that scans the gists of specific users for mentions of d3 APIs and aggregates per-API data into files on S3. The front-end then requests those files based on the search parameters. The front-end is a small Ember.js application. We welcome any improvements and suggestions!