ganeshv

Browserified Cheerio

Manually browserified cheerio.js. Edit 3 files, one in cheerio itself and two dependencies - lib/cheerio.js, - node_modules/domutils/index.js - node_modules/entities/index.js to replace dynamic "require" lines with static equivalents. Holds up to simple hand testing. cheerio is exposed in the browser as a global (window.cheerio).

ganeshv

Testing a Pigshell gist

ganeshv

GDP data for various countries, obtained from Quandl and plotted with pigshell

Use up-arrow to walk through the command history and edit to select your own countries. Redirecting the output of the chart command to /downloads will cause a PNG file to be saved to the browser's download directory. e.g. echo $gdp | cut -f "Date,IND" | chart -t tseries >/downloads/india-gdp.png

ganeshv

GDP data for various countries, obtained from Quandl and plotted with pigshell

Similar to this, except we run the script in a non-interactive shell and dump output to the div. In most cases, the interactive shell is preferred as it gives the reader an opportunity of trying out their own variations, but occasionally you don't want the reader distracted by what's happening behind the curtain.

ganeshv

Life expectancy data for countries, obtained from Wikipedia and plotted with pigshell

ycat http://en.wikipedia.org/wiki/List_of_countries_by_life_expectancy | hgrep -r 0 table.wikitable | table2js foo country data | iframe -g /usr/template/d3-worldmap1

Running through the pipeline step by step:

• ycat uses YQL to retrieve the contents of the Wikipedia page. We use ycat to jump the same-origin barrier.
• hgrep selects HTML elements using a jQuery/CSS-like expression.
• table2js converts the table contents into plain Javascript objects, the

ganeshv

Life expectancy data for countries, obtained from Wikipedia and plotted with pigshell on an orthographic projection. The template is based on Rotate the world by Jason Davies. Colors by Cynthia Brewer

ycat http://en.wikipedia.org/wiki/List_of_countries_by_life_expectancy | hgrep -r 0 table.wikitable | table2js foo country data | iframe -o proj=orthographic -g /usr/template/d3-worldmap1

Running through the pipeline step by step:

• ycat uses YQL to retrieve the contents of the Wikipedia page. We use ycat to jump the same-origin barrier.
• hgrep selects HTML elements using a jQuery/CSS-like expression.
• table2js converts the table contents into plain Javascript objects, the

ganeshv

World map chloropleth template

This template follows pigshell's convention for "gist templates":

• It is supplied data using postMessage(), as a single object of the form { opts: {...}, data: [...] }
• It posts a message to the parent with an object of the form { height: <number> } to enable the framing context to adjust the height of the iframe.
• If the URL does not contain a hash fragment, it displays sample data from the containing gist.

ganeshv

license: gpl-3.0

ganeshv

Countrywise GDP data for 2012 obtained from Quandl visualized using the Zoomable Treemap Template

Click a cell to zoom in. Click the orange bar at the top to zoom out.

ganeshv