graphene

Using Cantera and graphs to explore chemical reactions.

Graphene is a repository with scripts for simulating chemical reactions using Cantera, extracting information about those reactions, and visualizing that information using the D3.js library.

Directories

cantera/ - Scripts to run Cantera to create a tabulated list of gas states for a particular reaction scenario.

cantera_data/ - Contains (sample) Cantera data.

postprocessing/ - Scripts to post-process Cantera data using Python. This takes the gas states in the cantera_data/ directory and creates JSON data for D3.

d3_data/ - Contains JSON data for D3 visualizations.

pelican/ - Contains the contents of the Github pages site, which uses Pelican to turn Javascript/HTML/Markdown into a website.

Cantera

Scripts for creating reactors, running simulations, and saving the state of the gas at specified intervals for post-processing.

Data does not go here; data goes into the data/ directory.

(Currently, the example script that is hacked together outputs a D3-ready JSON file directly from the script running Cantera simulations. This method is faster, but skips intermediate steps and is less extensible/limited to simpler stuff. Doing this in a better way will require supporting structure in the form of object-oriented extensions to Cantera. That's where the Pantera library comes in. Pantera is not implemented in graphene yet.)

Cantera Data

TODO

This is the data folder. It contains example reaction data, so that you can get up and running with Graphene without the need for Cantera. It also contains data output by the scripts in create/, which create reactors and generate reaction data.

Data files in this directory are read in and processed by various Python post-processing scripts. These dump out JSON data that is readable by D3.

(Also being skipped by a more straightforward Cantera-D3 process.)

Postprocessing

TODO

Contains Python scripts for post-processing Cantera data in cantera_data/ directory and turning it into JSON data for D3 in the d3_data/ directory.

(Also being skipped by a more straightforward Cantera-D3 process.)

Pelican

The Pelican site hosts all of the D3 visualizations. Once a D3 data set has been generated in the d3_data directory, the D3 visualization that uses it are developed in the D3 directory, where Pelican can readily turn them into static HTML pages.

D3 visualizations

Species Generation Rates

The first D3 viz I did was to illustrate how to extend the simple bar chart Block into an Angular.js app. While this is not exciting, and requires much more code and much more labor than, say, a Matplotlib code, it is also extendable to other, more complex visualizations - such as the bubble chart version of species generation rates.

These charts, in turn, can be embedded in pages with other charts and cross-linked, or made interactive by adding a panel to display information about elements that are clicked. While a single, static, simple bar chart may not be utilizing all the amazing powers of D3, it does show how to work out some of the details, before moving on to more complex visualizations.