imclab / depict

Depict aims to easily render fallback images for complex visualizations. (IE 8, I'm looking at you.)

Depict

Depict aims to easily render fallback images for complex visualizations. (IE 8, I'm looking at you.)

Given a url and css selector, depict outputs a .png of the rendered element.

With depict, charts based on living data can be rendered into flat images at regular intervals, no human interaction required. Think jobs numbers, congressional votes, etc.

Features

• Include an extra css file before rendering, useful for hiding UI components that don't make sense for static images

Installation

Depict requires PhantomJS, which can be installed on OS X via Homebrew.

brew update
brew install phantomjs

Then, install depict from npm. The global install is recommended for easy command-line access.

npm install -g depict

Usage

Usage: depict URL OUT_FILE [OPTIONS]

Options:
  -h, --help           Display help  [default: false]
  -s, --selector       CSS selector  [default: "body"]
  -c, --css            CSS file to include in rendering  [default: false]
  -H, --hide-selector  Hide attributes of this selector berore rendering.  [default: false]
  -w, --browser-width  Specify the desired browser width.                  [default: 1440]
  -d, --delay          Specify a delay time, in milliseconds.              [default: 1000]

Examples

For a specific chart:

depict \
http://www.nytimes.com/interactive/2013/07/07/business/a-nation-of-wineries.html \
-s '#g-chart-va' \
va-wine.png

To render the full graphic:

depict \
http://www.nytimes.com/interactive/2013/07/07/business/a-nation-of-wineries.html \
-s '#main' \
a-nation-of-wineries.png

To hide certain components, such as UI elements:

depict \
http://www.nytimes.com/interactive/2013/07/07/business/a-nation-of-wineries.html \
-s '.g-us-map-grid' \
us-wine.png \
-H '.g-us-map-slider'

To include a css file:

depict \
http://www.nytimes.com/interactive/2013/07/07/business/a-nation-of-wineries.html \
-s '.g-us-map-grid' \
us-wine.png \
-c exclude-ui.css

Pro tips

Run a local webserver to use depict during development:

python -m SimpleHTTPServer 1337
depict http://0.0.0.0:1337 chart.png -s '#chart'

Add a line in your Makefile to run depict automatically. (You are using make, right?)

fallback/chart.png: index.html
    depict http://0.0.0.0:1337 $@ -s '#chart'

Hide multiple css selectors by using commas:

depict \
http://www.nytimes.com/interactive/2013/07/07/business/a-nation-of-wineries.html \
-s '.g-us-map-grid' \
us-wine.png \
-H '.g-us-map-slider, .g-map-legend-click'