LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Charles Reid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,83 @@
+# graphene
+
+Using Cantera and graphs to explore chemical reactions.
+
+Graphene is a repository with scripts for simulating chemical reactions using [Cantera](http://cantera.org/docs/sphinx/html/index.html),
+extracting information about those reactions, and visualizing that information
+using the [D3.js](https://d3js.org/) 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 <a href="https://charlesreid1.github.io/pantera">Pantera</a> 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.
+
+
+
+
+
+
+
+
+
+
+
+

cantera/README.md

@@ -0,0 +1,66 @@
+# Cantera
+
+These scripts will run Cantera, create reactors with the specified conditions, and operate them. 
+
+The resulting data winds up in `cantera_data/`. It consists of a set of simulation times and corresponding objects 
+representing the gas's thermochemical state (specified completely by specifying TPX, temperature pressure composition).
+With this list, post-processing scripts can create a Cantera gas object and set it to the exact condition of the gas 
+in that reaction scenario.
+
+Let's walk through a simple Cantera reactor setup - useful to test out whether Cantera works. 
+
+The sequence of steps needed is as follows:
+* Create a gas
+* Set the initial gas state (TPX)
+* Create a reactor
+* Fill the reactor with the gas
+* Create a reactor network
+* Set specified parameters (timestep, total time, etc.)
+* Advance the reactor network
+* Save and plot results, if desired
+
+Let's consider a mixture of ethylene and air autoigniting, simulated using the GRIMech 3.0 combustion mechanism.
+The above steps are performed for this ethylene air mixture in the `EthyleneTest.py` script.
+
+```
+import cantera as ct
+
+# Set the timestep and total simulation time
+dt = 0.001
+ttotal = 2.0
+
+# Use GRI Mech 3.0
+g = ct.Solution('gri30.xml')
+
+# Set the initial state of the gas
+g.TPX = 298.15 + 900, ct.one_atm, "CH4:4.0, O2:1.0, N2:3.762, H:0.00001"
+
+# Create a reactor, and a reactor network to simulate it.
+r = ct.Reactor(g)
+n = ct.ReactorNet([r])
+
+# This loop advances the reactor until we've reached the final time.
+c = 0
+t = dt
+time_data = []
+temp_data = []
+while True:
+    n.advance(t)
+
+    time_data.append(t)
+    temp_data.append(r.T)
+
+    t = t + dt
+
+    if(c % 10==0):
+        print "Current reactor time:",t
+    if t > ttotal:
+        break
+
+import matplotlib.pyplot as plt
+plt.plot(time_data,temp_data)
+plt.draw()
+plt.show()
+
+```
+

cantera/cantera_test_ethylene.py

@@ -0,0 +1,39 @@
+import cantera as ct
+
+# Set the timestep and total simulation time
+dt = 0.001
+ttotal = 2.0
+
+# Use GRI Mech 3.0
+g = ct.Solution('gri30.xml')
+
+# Set the initial state of the gas
+g.TPX = 298.15 + 900, ct.one_atm, "CH4:4.0, O2:1.0, N2:3.762, H:0.00001"
+
+# Create a reactor, and a reactor network to simulate it.
+r = ct.Reactor(g)
+n = ct.ReactorNet([r])
+
+# This loop advances the reactor until we've reached the final time.
+c = 0
+t = dt
+time_data = []
+temp_data = []
+while True:
+    n.advance(t)
+
+    time_data.append(t)
+    temp_data.append(r.T)
+
+    t = t + dt
+
+    if(c % 10==0):
+        print "Current reactor time:",t
+    if t > ttotal:
+        break
+
+import matplotlib.pyplot as plt
+plt.plot(time_data,temp_data)
+plt.draw()
+plt.show()
+

cantera/species_rxn_rates.py

@@ -0,0 +1,85 @@
+import cantera as ct
+import json
+'''
+Species reaction rate data
+
+This script exports species reaction rate data directly to JSON format - no postprocessing intermediate.
+
+This simulates ethylene autoignition for 1 second. 
+However, because we're hacking this, and not doing postprocessing,
+this will only output the state of the gas at one instant in time. 
+Specifically, t = 0.2 s.
+
+The JSON format is as follows:
+
+[
+    { 'species': 'C2H4', 'fwd_rxn_rate': 0.10, 'rev_rxn_rate': 0.25}
+    { 'species': 'O2', 'fwd_rxn_rate': 1.93, 'rev_rxn_rate': 0.00}
+]
+
+A generic JSON data set looks like this:
+
+[ 
+  { 'letter': 'A', 'frequency': 0.08},
+  { 'letter': 'B', 'frequency': 0.05}
+]
+
+'''
+
+# Set the timestep and total simulation time
+dt = 0.001
+ttotal = 0.5
+
+# Use GRI Mech 3.0
+g = ct.Solution('gri30.xml')
+
+# Set the initial state of the gas
+g.TPX = 298.15 + 900, ct.one_atm, "CH4:4.0, O2:1.0, N2:3.762, H:0.00001"
+
+# Create a reactor, and a reactor network to simulate it.
+r = ct.Reactor(g)
+n = ct.ReactorNet([r])
+
+# This loop advances the reactor until we've reached the final time.
+c = 0
+t = dt
+json_data = []
+while True:
+    n.advance(t)
+
+    if(c==200):
+
+        # Create species reaction data 
+        fr = g.forward_rates_of_progress
+        rr = g.reverse_rates_of_progress
+
+        for sp in g.species_names:
+            i = g.species_index(sp)
+            dat = {}
+            dat['species'] = sp
+            dat['fwd_rxn_rate'] = fr[i]
+            dat['rev_rxn_rate'] = rr[i]
+            json_data.append(dat)
+
+    t = t + dt
+    c = c + 1
+
+    if(c % 10==0):
+        print "Current reactor time:",t
+
+    if t > ttotal:
+        break
+
+# Note that we're writing data into d3_data/, not cantera_data/, 
+# because we're skipping the usual Python postprocessing.
+# Pantera classes and simple reactor and reactonet wrappers
+# will clean this whole thing up. For now, jump into D3: 
+# that's what we're really interested in, anyway.
+with open('../d3_data/species_rxn_rates.json','w') as f:
+    json.dump(json_data,f)
+
+#import matplotlib.pyplot as plt
+#plt.plot(time_data,temp_data)
+#plt.draw()
+#plt.show()
+

cantera_data/README.md

@@ -0,0 +1,5 @@
+# data
+
+Contains the output of the Cantera programs. As mentioned above, this data consists of a list of simulation times, 
+and a corresponding list of objects that will allow the thermochemical state of the gas to be completely specified.
+

hello/index.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-        <title>Hello</title>
-        <meta charset="utf-8" />
-
-        <!--
-        my CSS styles
-        -->
-        <link href="/graphene/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/main.css"           rel="stylesheet" type="text/css">
-
-        <link href="/graphene/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
-        <link href="/graphene/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
-
-        <!--
-        include Angular first
-        <script type="text/javascript" src="/graphene/theme/js/angular-1.3.15.js"></script>
-        -->
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
-
-</head>
-
-<body id="index" class="home">
-    <div class="container">
-        <h1><a href="/graphene/">graphene <strong></strong></a></h1>
-        <hr />
-
-
-<div ng-app="myApp">
-
-    <div ng-controller="HelloController">
-        <p>
-        Angular has something to say: [[message]]
-        </p>
-    
-        <button class="btn btn-large btn-primary" ng-click="changeMessage()">
-          Change Message
-        </button>
-    
-    </div>
-
-</div>
-
-
-<script type="text/javascript">
-
-(function() {
-
-    function HelloController($scope) {
-        $scope.message = "Hello Cruel Angular World!";
-
-        $scope.changeMessage = function() {
-            $scope.message = "Goodbye Cruel Angular World!";
-        };
-    };
-
-    var a = angular.module("myApp", [], function($interpolateProvider) {
-                $interpolateProvider.startSymbol('[[');
-                $interpolateProvider.endSymbol(']]');
-            }
-        );
-    var c = a.controller("HelloController", ["$scope", HelloController]);
-
-})();
-
-</script>
-    </div>
-
-    <footer id="contentinfo" class="body">
-    <hr />
-    <p style="text-align: center">
-        <span class="fa-stack fa-lg">
-            <i class="fa fa-square fa-stack-2x"></i>
-            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
-        </span>
-        Made from the command line with vim by 
-        <a href="http://charlesreid1.com">charlesreid1</a>.
-    </p>
-
-    <p style="text-align: center;">Made with HTML (
-    <a href="http://http://bootstrap.org/">Bootstrap</a>),
-    Javascript (
-    <a href="http://http://d3js.org/">D3.js</a>, 
-    <a href=https://angularjs.org/">Angular.js</a>),
-    Python (
-    <a href="http://getpelican.com">Pelican</a>,
-    <a href="http://cantera.org/docs/sphinx/html/index.html">Cantera</a>,
-    <a href="http://matplotlib.org">Matplotlib</a>).
-    </p>
-
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/jquery-1.11.2.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/bootstrap-3.3.4.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/d3-3.5.5.js"></script>
-        -->
-        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/leaflet-0.7.3.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/leaflet.ajax.min.js"></script>
-        -->
-    </footer><!-- /#contentinfo -->
-
-</body>
-</html>

index.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-        <title>graphene</title>
-        <meta charset="utf-8" />
-
-        <!--
-        my CSS styles
-        -->
-        <link href="/graphene/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/main.css"           rel="stylesheet" type="text/css">
-
-        <link href="/graphene/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
-        <link href="/graphene/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
-
-        <!--
-        include Angular first
-        <script type="text/javascript" src="/graphene/theme/js/angular-1.3.15.js"></script>
-        -->
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
-
-</head>
-
-<body id="index" class="home">
-    <div class="container">
-        <h1><a href="/graphene/">graphene <strong></strong></a></h1>
-        <hr />
-
-
-<style>
-    img.index_img {
-        width: 500px;
-        border-style: solid;
-        border-color: #ddd;
-        border-width: thin;
-    }
-    a.index_btn {
-        margin-top: 10px;
-    }
-    div.row {
-        margin-top: 25px;
-        margin-bottom: 25px;
-    }
-</style>
-
-<div class="container">
-<div class="row">
-
-
-
-<h2><b>welcome to graphene!</b></h2>
-
-<p class="lead">Graphene is a project to create D3.js graphs for thermodynamic and kinetic simulations
-performed with Cantera. Graphene is currently underway.
-</p>
-<p class="lead">Graphene utilizes the following languages, libraries, and utilities:
-<ul>
-    <li><b>Cantera (C++ and Python)</b> for running thermodynamic and kinetic models to create rich data sets.</li>
-    <li><b>Advanced object-oriented Python</b> for post-processing data</li>
-    <li><b>D3.js (Javascript)</b> for visualizing data</li>
-    <li><b>Angular.js (Javascript)</b> for stitching the pages, page elements, and graphs together.</li>
-    <li><b>Pelican (Pelican)</b> for managing page content and generating static HTML/JS/CSS content from markup files and Javascript code.</li>
-    <li><b>vim</b> is the best text editor
-</ul>
-</p>
-
-<p>&nbsp;</p>
-
-<p class="lead">Before we get started, let's just demonstrate how Angular works, with a simple Angular.js Hello World app. 
-This app is a lot more complicated on the backend than on the frontend, but it shows how to make a sekeleton Angular app.
-We'll be using Angular apps to make D3.js charts. Click the button below to visit the Hello Angular World test app:</p>
-<p><a class="index_btn btn btn-large btn-primary" href="hello/">Hello Angular World</a></p>
-
-<p>&nbsp;</p>
-<p>&nbsp;</p>
-
-</div>
-<div class="row">
-
-<p>&nbsp;</p>
-
-<h2><b>Species Generation Rates Rank Chart</b></h2>
-
-<p class="lead">Species are listed and ranked according to their generation rates.
-</p>
-<p>
-<img src="/graphene/images/speciesgenrank.png" class="index_img img-responsive" />
-</p>
-<p>
-<a class="index_btn btn btn-large btn-primary" 
-    href="speciesgenrates.html">Species Generation Rates</a></p>
-
-</div>
-
-<p>&nbsp;</p>
-<p>&nbsp;</p>
-
-</div>
-<div class="row">
-
-<p>&nbsp;</p>
-
-<h2><b>Species Consumption Rates Rank Chart</b></h2>
-
-<p class="lead">Species are listed and ranked according to their consumption rates.
-</p>
-<p>
-<img src="/graphene/images/speciesconrank.png" class="index_img img-responsive" />
-</p>
-<p>
-<a class="index_btn btn btn-large btn-primary" 
-    href="speciesconrates.html">Species Consumption Rates</a></p>
-
-</div>
-
-    </div>
-
-    <footer id="contentinfo" class="body">
-    <hr />
-    <p style="text-align: center">
-        <span class="fa-stack fa-lg">
-            <i class="fa fa-square fa-stack-2x"></i>
-            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
-        </span>
-        Made from the command line with vim by 
-        <a href="http://charlesreid1.com">charlesreid1</a>.
-    </p>
-
-    <p style="text-align: center;">Made with HTML (
-    <a href="http://http://bootstrap.org/">Bootstrap</a>),
-    Javascript (
-    <a href="http://http://d3js.org/">D3.js</a>, 
-    <a href=https://angularjs.org/">Angular.js</a>),
-    Python (
-    <a href="http://getpelican.com">Pelican</a>,
-    <a href="http://cantera.org/docs/sphinx/html/index.html">Cantera</a>,
-    <a href="http://matplotlib.org">Matplotlib</a>).
-    </p>
-
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/jquery-1.11.2.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/bootstrap-3.3.4.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/d3-3.5.5.js"></script>
-        -->
-        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/leaflet-0.7.3.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/leaflet.ajax.min.js"></script>
-        -->
-    </footer><!-- /#contentinfo -->
-
-</body>
-</html>

pelican/angular/hello.html

@@ -0,0 +1,52 @@
+{% extends 'base.html' %}
+
+{% set mytitle="Hello" %}
+
+{# ----------- title -------------- #}
+
+{% block title %}{{ mytitle }}{% endblock %}
+
+{# ----------- content ------------- #}
+
+{% block content %}
+
+<div ng-app="myApp">
+
+    <div ng-controller="HelloController">
+        <p>
+        Angular has something to say: [[message]]
+        </p>
+    
+        <button class="btn btn-large btn-primary" ng-click="changeMessage()">
+          Change Message
+        </button>
+    
+    </div>
+
+</div>
+
+
+<script type="text/javascript">
+
+(function() {
+
+    function HelloController($scope) {
+        $scope.message = "Hello Cruel Angular World!";
+
+        $scope.changeMessage = function() {
+            $scope.message = "Goodbye Cruel Angular World!";
+        };
+    };
+
+    var a = angular.module("myApp", [], function($interpolateProvider) {
+                $interpolateProvider.startSymbol('[[');
+                $interpolateProvider.endSymbol(']]');
+            }
+        );
+    var c = a.controller("HelloController", ["$scope", HelloController]);
+
+})();
+
+</script>
+{% endblock %}
+

pelican/angular/index.html

@@ -0,0 +1,101 @@
+{% extends 'base.html' %}
+
+{% set mytitle="graphene" %}
+
+{# ----------- title -------------- #}
+
+{% block title %}{{ mytitle }}{% endblock %}
+
+{# ----------- content ------------- #}
+
+{% block content %}
+
+<style>
+    img.index_img {
+        width: 500px;
+        border-style: solid;
+        border-color: #ddd;
+        border-width: thin;
+    }
+    a.index_btn {
+        margin-top: 10px;
+    }
+    div.row {
+        margin-top: 25px;
+        margin-bottom: 25px;
+    }
+</style>
+
+<div class="container">
+<div class="row">
+
+
+
+<h2><b>welcome to graphene!</b></h2>
+
+<p class="lead">Graphene is a project to create D3.js graphs for thermodynamic and kinetic simulations
+performed with Cantera. Graphene is currently underway.
+</p>
+<p class="lead">Graphene utilizes the following languages, libraries, and utilities:
+<ul>
+    <li><b>Cantera (C++ and Python)</b> for running thermodynamic and kinetic models to create rich data sets.</li>
+    <li><b>Advanced object-oriented Python</b> for post-processing data</li>
+    <li><b>D3.js (Javascript)</b> for visualizing data</li>
+    <li><b>Angular.js (Javascript)</b> for stitching the pages, page elements, and graphs together.</li>
+    <li><b>Pelican (Pelican)</b> for managing page content and generating static HTML/JS/CSS content from markup files and Javascript code.</li>
+    <li><b>vim</b> is the best text editor
+</ul>
+</p>
+
+<p>&nbsp;</p>
+
+<p class="lead">Before we get started, let's just demonstrate how Angular works, with a simple Angular.js Hello World app. 
+This app is a lot more complicated on the backend than on the frontend, but it shows how to make a sekeleton Angular app.
+We'll be using Angular apps to make D3.js charts. Click the button below to visit the Hello Angular World test app:</p>
+<p><a class="index_btn btn btn-large btn-primary" href="hello/">Hello Angular World</a></p>
+
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+</div>
+<div class="row">
+
+<p>&nbsp;</p>
+
+<h2><b>Species Generation Rates Rank Chart</b></h2>
+
+<p class="lead">Species are listed and ranked according to their generation rates.
+</p>
+<p>
+<img src="{{SITEURL}}/images/speciesgenrank.png" class="index_img img-responsive" />
+</p>
+<p>
+<a class="index_btn btn btn-large btn-primary" 
+    href="speciesgenrates.html">Species Generation Rates</a></p>
+
+</div>
+
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+</div>
+<div class="row">
+
+<p>&nbsp;</p>
+
+<h2><b>Species Consumption Rates Rank Chart</b></h2>
+
+<p class="lead">Species are listed and ranked according to their consumption rates.
+</p>
+<p>
+<img src="{{SITEURL}}/images/speciesconrank.png" class="index_img img-responsive" />
+</p>
+<p>
+<a class="index_btn btn btn-large btn-primary" 
+    href="speciesconrates.html">Species Consumption Rates</a></p>
+
+</div>
+
+{% endblock %}
+
+

pelican/angular/speciesgenrates/speciesconrates.css

@@ -24,3 +24,4 @@
 .x.axis path {
   display: none;
 }
+

pelican/angular/speciesgenrates/speciesconrates.html

@@ -0,0 +1,47 @@
+{% extends 'base.html' %}
+
+{% set mytitle="Species Generation Rates Rank Chart" %}
+
+{# ----------- title -------------- #}
+
+{% block title %}{{ mytitle }}{% endblock %}
+
+{# ----------- content ------------- #}
+
+{% block content %}
+
+<link href="{{ SITEURL }}/speciesconrates.css" rel="stylesheet" stype="text/css" />
+
+<div ng-app="speciesconratesApp">
+
+    <div ng-controller="speciesconratesController" ng-init="initialize()">
+
+        <div class="row">
+            <div class="col-md-12" id="head">
+                <speciesconrates-head></speciesconrates-head>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12" id="chart">
+                <speciesconrates-chart></speciesconrates-chart>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-md-12" id="text">
+                {% include 'speciesconrates.md' %}
+            </div>
+        </div>
+
+
+    </div>
+
+</div>
+
+<script type="text/javascript" src="{{ SITEURL }}/speciesconrates_modcontrol.js"></script>
+<script type="text/javascript" src="{{ SITEURL }}/speciesconrates_directives.js"></script>
+
+{% endblock %}
+
+

pelican/angular/speciesgenrates/speciesconrates.md

@@ -0,0 +1,16 @@
+This chart is based on a 
+<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
+
+<p>&nbsp;</p>
+
+<h2>Ethylene-Air Flame</h2>
+
+<p>The bar chart above shows consumption rates of various species as predicted from
+a Cantera simulation of an idealized ethylene-air mixture. The species are ranked in order
+of decreasing consumption rates.
+</p>
+
+<p>The reaction rate is given in units of [mol/s].
+</p>
+
+

pelican/angular/speciesgenrates/speciesconrates_directives.js

@@ -187,3 +187,4 @@ ng = a.directive('speciesconratesChart', function($compile) {
 dir.push(ng);
 
 
+

pelican/angular/speciesgenrates/speciesconrates_modcontrol.js

@@ -70,3 +70,4 @@ function speciesconratesController($scope,myfactory) {
 // the first few arguments of the list should correspond to the Angular-namespace stuff to feed to HelloController
 var c = a.controller("speciesconratesController", ["$scope", "myfactory", speciesconratesController]);
 
+

pelican/angular/speciesgenrates/speciesgenrates.css

@@ -24,3 +24,4 @@
 .x.axis path {
   display: none;
 }
+

pelican/angular/speciesgenrates/speciesgenrates.html

@@ -0,0 +1,47 @@
+{% extends 'base.html' %}
+
+{% set mytitle="Species Generation Rates Rank Chart" %}
+
+{# ----------- title -------------- #}
+
+{% block title %}{{ mytitle }}{% endblock %}
+
+{# ----------- content ------------- #}
+
+{% block content %}
+
+<link href="{{ SITEURL }}/speciesgenrates.css" rel="stylesheet" stype="text/css" />
+
+<div ng-app="speciesgenratesApp">
+
+    <div ng-controller="speciesgenratesController" ng-init="initialize()">
+
+        <div class="row">
+            <div class="col-md-12" id="head">
+                <speciesgenrates-head></speciesgenrates-head>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12" id="chart">
+                <speciesgenrates-chart></speciesgenrates-chart>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-md-12" id="text">
+                {% include 'speciesgenrates.md' %}
+            </div>
+        </div>
+
+
+    </div>
+
+</div>
+
+<script type="text/javascript" src="{{ SITEURL }}/speciesgenrates_modcontrol.js"></script>
+<script type="text/javascript" src="{{ SITEURL }}/speciesgenrates_directives.js"></script>
+
+{% endblock %}
+
+

pelican/angular/speciesgenrates/speciesgenrates.md

@@ -0,0 +1,16 @@
+This chart is based on a 
+<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
+
+<p>&nbsp;</p>
+
+<h2>Ethylene-Air Flame</h2>
+
+<p>The bar chart above shows consumption rates of various species as predicted from
+a Cantera simulation of an idealized ethylene-air mixture. The species are ranked in order
+of decreasing consumption rates.
+</p>
+
+<p>The reaction rate is given in units of [mol/s].
+</p>
+
+

pelican/angular/speciesgenrates/speciesgenrates_directives.js

@@ -187,3 +187,4 @@ ng = a.directive('speciesgenratesChart', function($compile) {
 dir.push(ng);
 
 
+

pelican/angular/speciesgenrates/speciesgenrates_modcontrol.js

@@ -70,3 +70,4 @@ function speciesgenratesController($scope,myfactory) {
 // the first few arguments of the list should correspond to the Angular-namespace stuff to feed to HelloController
 var c = a.controller("speciesgenratesController", ["$scope", "myfactory", speciesgenratesController]);
 
+

pelican/pelicanconf.py

@@ -0,0 +1,60 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*- #
+from __future__ import unicode_literals
+import re
+import os
+
+
+#SITEURL = ''
+AUTHOR = u'charlesreid1'
+SITENAME = u'graphene'
+SITEURL = '/graphene' ### DO IT LIVE
+
+PATH = 'content'
+TIMEZONE = 'America/Los_Angeles'
+DEFAULT_LANG = u'en'
+
+# the theme 
+THEME = 'simpleangular'
+
+# template locations
+EXTRA_TEMPLATES_PATHS = ['angular/',
+                         'angular/speciesgenrates']
+
+# template files 
+TEMPLATE_PAGES = {}
+
+# our custom index page
+TEMPLATE_PAGES['index.html'] = 'index.html'
+
+# hello angular world is at /hello/ --> /hello/index.html
+TEMPLATE_PAGES['hello.html'] = 'hello/index.html'
+
+# species rxn rates
+TEMPLATE_PAGES['speciesgenrates.html']          = 'speciesgenrates.html'
+TEMPLATE_PAGES['speciesgenrates.css']           = 'speciesgenrates.css'
+TEMPLATE_PAGES['speciesgenrates_modcontrol.js'] = 'speciesgenrates_modcontrol.js'
+TEMPLATE_PAGES['speciesgenrates_directives.js'] = 'speciesgenrates_directives.js'
+TEMPLATE_PAGES['speciesgenrates.json']          = 'speciesgenrates.json'
+
+TEMPLATE_PAGES['speciesconrates.html']          = 'speciesconrates.html'
+TEMPLATE_PAGES['speciesconrates.css']           = 'speciesconrates.css'
+TEMPLATE_PAGES['speciesconrates_modcontrol.js'] = 'speciesconrates_modcontrol.js'
+TEMPLATE_PAGES['speciesconrates_directives.js'] = 'speciesconrates_directives.js'
+TEMPLATE_PAGES['speciesconrates.json']          = 'speciesconrates.json'
+
+
+
+# --------------8<---------------------
+
+# Feed generation is usually not desired when developing
+FEED_ALL_ATOM = None
+CATEGORY_FEED_ATOM = None
+TRANSLATION_FEED_ATOM = None
+AUTHOR_FEED_ATOM = None
+AUTHOR_FEED_RSS = None
+
+DEFAULT_PAGINATION = False
+
+# Uncomment following line if you want document-relative URLs when developing
+#RELATIVE_URLS = True

pelican/simpleangular/templates/_index.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<h2>welcome to the reluctant index <small>a page which is only here because it has to be</small></h2>
+{% endblock content %}

pelican/simpleangular/templates/article.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block head %}
+  {{ super() }}
+  {% for keyword in article.keywords %}
+    <meta name="keywords" contents="{{keyword}}" />
+  {% endfor %}
+
+  {% for description in article.description %}
+    <meta name="description" contents="{{description}}" />
+  {% endfor %}
+
+  {% for tag in article.tags %}
+    <meta name="tags" contents="{{tag}}" />
+  {% endfor %}
+
+{% endblock %}
+
+{% block content %}
+<section id="content" class="body">
+  <header>
+  <h2 class="entry-title">
+      <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
+         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
+  </header>
+  <div class="entry-content">
+    {{ article.content }}
+  </div><!-- /.entry-content -->
+</section>
+{% endblock %}

pelican/simpleangular/templates/authors.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block title %}{{ SITENAME }} - Authors{% endblock %}
+
+{% block content %}
+    <h1>Authors on {{ SITENAME }}</h1>
+
+    <ul>
+    {%- for author, articles in authors|sort %}
+        <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> ({{ articles|count }})</li>
+    {% endfor %}
+    </ul>
+{% endblock %}

pelican/simpleangular/templates/base.html

@@ -1,35 +1,36 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ DEFAULT_LANG }}">
 <head>
-        <title>graphene - Authors</title>
+        {% block head %}
+        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
         <meta charset="utf-8" />
 
         <!--
         my CSS styles
         -->
-        <link href="/graphene/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
+        <link href="{{ SITEURL }}/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/main.css"           rel="stylesheet" type="text/css">
+        <link href="{{ SITEURL }}/theme/css/main.css"           rel="stylesheet" type="text/css">
 
-        <link href="/graphene/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
+        <link href="{{ SITEURL }}/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
+        <link href="{{ SITEURL }}/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
-        <link href="/graphene/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
+        <link href="{{ SITEURL }}/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
 
         <!--
         include Angular first
-        <script type="text/javascript" src="/graphene/theme/js/angular-1.3.15.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/angular-1.3.15.js"></script>
         -->
         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
 
+        {% endblock head %}
 </head>
 
 <body id="index" class="home">
     <div class="container">
-        <h1><a href="/graphene/">graphene <strong></strong></a></h1>
+        <h1><a href="{{SITEURL}}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
         <hr />
 
-    <h1>Authors on graphene</h1>
+        {% block content %}
-
+        {% endblock %}
-    <ul>    </ul>
     </div>
 
     <footer id="contentinfo" class="body">
@@ -55,18 +56,18 @@
     </p>
 
         <!--
-        <script type="text/javascript" src="/graphene/theme/js/jquery-1.11.2.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/jquery-1.11.2.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/bootstrap-3.3.4.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/bootstrap-3.3.4.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/d3-3.5.5.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/d3-3.5.5.js"></script>
         -->
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
         <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
         <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
         <!--
-        <script type="text/javascript" src="/graphene/theme/js/leaflet-0.7.3.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/leaflet-0.7.3.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/leaflet.ajax.min.js"></script>
+        <script type="text/javascript" src="{{ SITEURL }}/theme/js/leaflet.ajax.min.js"></script>
         -->
     </footer><!-- /#contentinfo -->
 
 </body>
-</html>
+</html>

pelican/simpleangular/templates/page.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title }}{%endblock%}
+{% block content %}
+    {{ page.content }}
+{% endblock %}

postprocessing/README.md

@@ -0,0 +1,16 @@
+# postprocessing
+
+These postprocessing scripts will process the Cantera data listed above and turn it into usable JSON data sets 
+that D3 can read and use to build pretty charts.
+
+Just to illustrate, we can look at a simple example. Suppose we run a simulation of a mixture of ethylene and air combusting.
+We set up a Cantera script that creates a gas, a reactor, and a reactornet. It then dumps out the state of the gas, 
+along with the time, at fixed intervals. At this point, we may still have no idea what we're going to visualize.
+
+In the Python postprocessing script, we start to make decisions about our variables: what are the independent and dependent variables?
+What kind of relationship exists between them? What kind of information are we trying to show with a visualization? 
+What D3 chart type would lend itself to visualizing this information? We decide what information we want to extract
+(for example, we may be interested in species reaction rates for one chart, and reaction enthalpies for another chart.)
+
+The information we can visualize is only limited by what Cantera can compute - and that's a LOT.
+

speciesconrates.html

@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-        <title>Species Generation Rates Rank Chart</title>
-        <meta charset="utf-8" />
-
-        <!--
-        my CSS styles
-        -->
-        <link href="/graphene/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/main.css"           rel="stylesheet" type="text/css">
-
-        <link href="/graphene/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
-        <link href="/graphene/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
-
-        <!--
-        include Angular first
-        <script type="text/javascript" src="/graphene/theme/js/angular-1.3.15.js"></script>
-        -->
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
-
-</head>
-
-<body id="index" class="home">
-    <div class="container">
-        <h1><a href="/graphene/">graphene <strong></strong></a></h1>
-        <hr />
-
-
-<link href="/graphene/speciesconrates.css" rel="stylesheet" stype="text/css" />
-
-<div ng-app="speciesconratesApp">
-
-    <div ng-controller="speciesconratesController" ng-init="initialize()">
-
-        <div class="row">
-            <div class="col-md-12" id="head">
-                <speciesconrates-head></speciesconrates-head>
-            </div>
-        </div>
-
-        <div class="row">
-            <div class="col-md-12" id="chart">
-                <speciesconrates-chart></speciesconrates-chart>
-            </div>
-        </div>
-        
-        <div class="row">
-            <div class="col-md-12" id="text">
-This chart is based on a 
-<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
-
-<p>&nbsp;</p>
-
-<h2>Ethylene-Air Flame</h2>
-
-<p>The bar chart above shows consumption rates of various species as predicted from
-a Cantera simulation of an idealized ethylene-air mixture. The species are ranked in order
-of decreasing consumption rates.
-</p>
-
-<p>The reaction rate is given in units of [mol/s].
-</p>
-
-            </div>
-        </div>
-
-
-    </div>
-
-</div>
-
-<script type="text/javascript" src="/graphene/speciesconrates_modcontrol.js"></script>
-<script type="text/javascript" src="/graphene/speciesconrates_directives.js"></script>
-
-    </div>
-
-    <footer id="contentinfo" class="body">
-    <hr />
-    <p style="text-align: center">
-        <span class="fa-stack fa-lg">
-            <i class="fa fa-square fa-stack-2x"></i>
-            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
-        </span>
-        Made from the command line with vim by 
-        <a href="http://charlesreid1.com">charlesreid1</a>.
-    </p>
-
-    <p style="text-align: center;">Made with HTML (
-    <a href="http://http://bootstrap.org/">Bootstrap</a>),
-    Javascript (
-    <a href="http://http://d3js.org/">D3.js</a>, 
-    <a href=https://angularjs.org/">Angular.js</a>),
-    Python (
-    <a href="http://getpelican.com">Pelican</a>,
-    <a href="http://cantera.org/docs/sphinx/html/index.html">Cantera</a>,
-    <a href="http://matplotlib.org">Matplotlib</a>).
-    </p>
-
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/jquery-1.11.2.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/bootstrap-3.3.4.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/d3-3.5.5.js"></script>
-        -->
-        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/leaflet-0.7.3.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/leaflet.ajax.min.js"></script>
-        -->
-    </footer><!-- /#contentinfo -->
-
-</body>
-</html>

speciesgenrates.html

@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-        <title>Species Generation Rates Rank Chart</title>
-        <meta charset="utf-8" />
-
-        <!--
-        my CSS styles
-        -->
-        <link href="/graphene/theme/css/bootstrap.css"      rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/main.css"           rel="stylesheet" type="text/css">
-
-        <link href="/graphene/theme/css/cosmo.css"          rel="stylesheet" type="text/css">
-        <link href="/graphene/theme/css/font-awesome.css"   rel="stylesheet" type="text/css"/>
-        <link href="/graphene/theme/css/pygment.css"        rel="stylesheet" type="text/css"/>
-
-        <!--
-        include Angular first
-        <script type="text/javascript" src="/graphene/theme/js/angular-1.3.15.js"></script>
-        -->
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
-
-</head>
-
-<body id="index" class="home">
-    <div class="container">
-        <h1><a href="/graphene/">graphene <strong></strong></a></h1>
-        <hr />
-
-
-<link href="/graphene/speciesgenrates.css" rel="stylesheet" stype="text/css" />
-
-<div ng-app="speciesgenratesApp">
-
-    <div ng-controller="speciesgenratesController" ng-init="initialize()">
-
-        <div class="row">
-            <div class="col-md-12" id="head">
-                <speciesgenrates-head></speciesgenrates-head>
-            </div>
-        </div>
-
-        <div class="row">
-            <div class="col-md-12" id="chart">
-                <speciesgenrates-chart></speciesgenrates-chart>
-            </div>
-        </div>
-        
-        <div class="row">
-            <div class="col-md-12" id="text">
-This chart is based on a 
-<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
-
-<p>&nbsp;</p>
-
-<h2>Ethylene-Air Flame</h2>
-
-<p>The bar chart above shows consumption rates of various species as predicted from
-a Cantera simulation of an idealized ethylene-air mixture. The species are ranked in order
-of decreasing consumption rates.
-</p>
-
-<p>The reaction rate is given in units of [mol/s].
-</p>
-
-            </div>
-        </div>
-
-
-    </div>
-
-</div>
-
-<script type="text/javascript" src="/graphene/speciesgenrates_modcontrol.js"></script>
-<script type="text/javascript" src="/graphene/speciesgenrates_directives.js"></script>
-
-    </div>
-
-    <footer id="contentinfo" class="body">
-    <hr />
-    <p style="text-align: center">
-        <span class="fa-stack fa-lg">
-            <i class="fa fa-square fa-stack-2x"></i>
-            <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
-        </span>
-        Made from the command line with vim by 
-        <a href="http://charlesreid1.com">charlesreid1</a>.
-    </p>
-
-    <p style="text-align: center;">Made with HTML (
-    <a href="http://http://bootstrap.org/">Bootstrap</a>),
-    Javascript (
-    <a href="http://http://d3js.org/">D3.js</a>, 
-    <a href=https://angularjs.org/">Angular.js</a>),
-    Python (
-    <a href="http://getpelican.com">Pelican</a>,
-    <a href="http://cantera.org/docs/sphinx/html/index.html">Cantera</a>,
-    <a href="http://matplotlib.org">Matplotlib</a>).
-    </p>
-
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/jquery-1.11.2.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/bootstrap-3.3.4.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/d3-3.5.5.js"></script>
-        -->
-        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
-        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
-        <!--
-        <script type="text/javascript" src="/graphene/theme/js/leaflet-0.7.3.js"></script>
-        <script type="text/javascript" src="/graphene/theme/js/leaflet.ajax.min.js"></script>
-        -->
-    </footer><!-- /#contentinfo -->
-
-</body>
-</html>