A generator for Yeoman

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


A generator for Yeoman, built for data journalists.



A smart generator encourages using proper data integrity protection techniques.

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


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.


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


generator-graphic is available on npm:

npm install -g generator-graphic


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:


Open in your browser.

generator-graphic sets up the following directory structure:

|-- 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
`--           project documentation


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


MIT License

npm loves you