generator-graphic

A generator for Yeoman

npm install generator-graphic
14 downloads in the last week
19 downloads in the last month

generator-graphic

A generator for Yeoman, built for data journalists.

Why?

Accuracy

A smart generator encourages using proper data integrity protection techniques.

  • Keep original data files separated
  • Use make to keep data manipulations documented
  • Include README.md for proper documentation

Speed

Using a generator speeds up repetitive tasks we don't have the time (or patience) to keep performing.

  • Easily include popular JavaScript dependencies
  • Uses grunt commands for frequent tasks, like starting a server or converting preprocessed css.

Deployment

  • Keep ready-to-deploy project in public folder
  • Extend with scripts for deployment in your environment

Installation

generator-graphic is available on npm:

npm install -g generator-graphic

Usage

Start the generator with:

yo graphic

Follow the prompts:

[?] What is the slug? homes
[?] Would you like to use a prebuilt template? No
[?] Which libraries would you like to include? (Press <space> to select)
>o d3
 o underscore
 o leaflet

...

To view graphic locally:

grunt

Open http://0.0.0.0:8000/ in your browser.

generator-graphic sets up the following directory structure:

project-folder
|
|-- data
|   |-- original        original data files
|   `-- workspace       altered data files, scripts
|
|-- Gruntfile.js        defines grunt commands, like `grunt server`
|
|-- Makefile            data manipulation goes here
|
|-- node_module         node dependency files, autogenerated
|   `-- *                   
|
|-- package.json        defines project settings
|
|-- public              folder to be deployed to web server
|   |-- index.html
|   |-- css
|   |   `-- base.css
|   |
|   |-- js
|   |   `-- base.js
|   |   
|   `-- lib             included js/css/image/* files
|       `-- *
|-- sass                optionally included for compass/sass files
|   `-- base.scss
|
`-- README.md           project documentation

Compass/SASS

generator-graphic optionally includes Compass/SASS. To compile .scss files automatically:

grunt compass

Prebuilt templates

generator-graphic includes code to get your graphic off the ground.

d3 chart

d3 chart screenshot

License

MIT License

npm loves you