This whole project is deprecated, and has been replaced by Chiasm. This repo is still here because it contains some nice examples that have not yet been ported to bl.ocks, and a cool example viewer. -- Curran March 2015

model-contrib

The aim of the Model-Contrib project is to provide reusable interactive visualization modules that use model.js, and also provide examples that use the modules.

Check out the project home page for a listing of components and examples.

Project Structure

The project home page is an AngularJS application that shows a listing of modules and examples, and thumbnails for each example. The data that drives the application can be found in index.json, which is generated by the NodeJS script generateIndex.js. The thumbnails are generated by the Node.js script generateThumbnails.js, which uses PhantomJS to render the pages, and GraphicsMagick to resize them.

Contributing

If you are working with ModelJS, please consider contributing reusable modules and examples that use them. Add modules under the modules directory, and examples under examples.

To create a new example, make a copy of the starter example directory under examples. Feel free to add more top-level Bower dependencies as needed.

For discussion, please reply to the ModelJS thread on the D3 Mailing List, or email me directly at curran.kelleher@gmail.com . I would like to make this a collaborative effort to pool Open Source community resources for reusable visualizations, please let me know if you would like to work with me on this. Feel free to email me at curran.kelleher@gmail.com.

Workflow

The script server.js implements a simple static file server for development use. It is convenient to serve the examples locally during development.

• to install required NPM packages, run npm install
• launch a local development server by running node server.js
• navigate to http://localhost:8000/#/ to view what will be shown at http://curran.github.io/model-contrib/#/

After adding an example or module, you can update the home page Angular app and screenshots with the following steps:

• run gulp, which will run the code through JSHint and create the Docco documentation for all examples (under docs).
• run node buildIndex.js, which creates index.json. This data file is the database that powers the project home page, which you can access locally at http://localhost:8000/#/.
• run node generateThumbnails.js to render a thumbnail of each example and puts it under the thumbnails directory.
• refresh http://localhost:8000/#/ to check that there are no errors in the rendered visualizations.
• For modules, click on the module entry to check if the Docco documentation for your module looks good.
• For examples, click on the example entry to check if the example viewer (which renders README.md into HTML) presents the example well.

Improvements to the Angular side of the example code viewer or home page are also welcome.

By Curran Kelleher November 2014