Compare commits
No commits in common. "master" and "gh-pages" have entirely different histories.
21
LICENSE
@ -1,21 +0,0 @@
|
||||
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.
|
83
README.md
@ -1,83 +0,0 @@
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -1,36 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ DEFAULT_LANG }}">
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% block head %}
|
||||
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
|
||||
<title>graphene - Authors</title>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<!--
|
||||
my CSS styles
|
||||
-->
|
||||
<link href="{{ SITEURL }}/theme/css/bootstrap.css" rel="stylesheet" type="text/css">
|
||||
<link href="{{ SITEURL }}/theme/css/main.css" rel="stylesheet" type="text/css">
|
||||
<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="{{ SITEURL }}/theme/css/cosmo.css" rel="stylesheet" type="text/css">
|
||||
<link href="{{ SITEURL }}/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="{{ SITEURL }}/theme/css/pygment.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="{{ SITEURL }}/theme/js/angular-1.3.15.js"></script>
|
||||
<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>
|
||||
|
||||
{% endblock head %}
|
||||
</head>
|
||||
|
||||
<body id="index" class="home">
|
||||
<div class="container">
|
||||
<h1><a href="{{SITEURL}}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
|
||||
<h1><a href="/graphene/">graphene <strong></strong></a></h1>
|
||||
<hr />
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<h1>Authors on graphene</h1>
|
||||
|
||||
<ul> </ul>
|
||||
</div>
|
||||
|
||||
<footer id="contentinfo" class="body">
|
||||
@ -56,18 +55,18 @@
|
||||
</p>
|
||||
|
||||
<!--
|
||||
<script type="text/javascript" src="{{ SITEURL }}/theme/js/jquery-1.11.2.js"></script>
|
||||
<script type="text/javascript" src="{{ SITEURL }}/theme/js/bootstrap-3.3.4.js"></script>
|
||||
<script type="text/javascript" src="{{ SITEURL }}/theme/js/d3-3.5.5.js"></script>
|
||||
<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="{{ SITEURL }}/theme/js/leaflet-0.7.3.js"></script>
|
||||
<script type="text/javascript" src="{{ SITEURL }}/theme/js/leaflet.ajax.min.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>
|
||||
</html>
|
@ -1,66 +0,0 @@
|
||||
# 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()
|
||||
|
||||
```
|
||||
|
@ -1,39 +0,0 @@
|
||||
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()
|
||||
|
@ -1,85 +0,0 @@
|
||||
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()
|
||||
|
@ -1,5 +0,0 @@
|
||||
# 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.
|
||||
|
108
hello/index.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!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>
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
images/speciesconrank.png
Normal file
After Width: | Height: | Size: 63 KiB |
BIN
images/speciesgenrank.png
Normal file
After Width: | Height: | Size: 71 KiB |
156
index.html
Normal file
@ -0,0 +1,156 @@
|
||||
<!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> </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> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<p> </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> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<p> </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>
|
@ -1,52 +0,0 @@
|
||||
{% 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 %}
|
||||
|
@ -1,101 +0,0 @@
|
||||
{% 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> </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> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<p> </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> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<p> </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 %}
|
||||
|
||||
|
@ -1,47 +0,0 @@
|
||||
{% 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 %}
|
||||
|
||||
|
@ -1,16 +0,0 @@
|
||||
This chart is based on a
|
||||
<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
|
||||
|
||||
<p> </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>
|
||||
|
||||
|
@ -1,47 +0,0 @@
|
||||
{% 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 %}
|
||||
|
||||
|
@ -1,16 +0,0 @@
|
||||
This chart is based on a
|
||||
<a href="http://bl.ocks.org/mbostock/3885304">bar chart block</a>.
|
||||
|
||||
<p> </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>
|
||||
|
||||
|
Before Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 63 KiB |
@ -1,60 +0,0 @@
|
||||
#!/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
|
@ -1,4 +0,0 @@
|
||||
{% 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 %}
|
@ -1,29 +0,0 @@
|
||||
{% 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 %}
|
@ -1,13 +0,0 @@
|
||||
{% 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 %}
|
@ -1,5 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ page.title }}{%endblock%}
|
||||
{% block content %}
|
||||
{{ page.content }}
|
||||
{% endblock %}
|
@ -1,16 +0,0 @@
|
||||
# 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.
|
||||
|
@ -24,4 +24,3 @@
|
||||
.x.axis path {
|
||||
display: none;
|
||||
}
|
||||
|
116
speciesconrates.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!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> </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>
|
@ -187,4 +187,3 @@ ng = a.directive('speciesconratesChart', function($compile) {
|
||||
dir.push(ng);
|
||||
|
||||
|
||||
|
@ -70,4 +70,3 @@ 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]);
|
||||
|
||||
|
@ -24,4 +24,3 @@
|
||||
.x.axis path {
|
||||
display: none;
|
||||
}
|
||||
|
116
speciesgenrates.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!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> </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>
|
@ -187,4 +187,3 @@ ng = a.directive('speciesgenratesChart', function($compile) {
|
||||
dir.push(ng);
|
||||
|
||||
|
||||
|
@ -70,4 +70,3 @@ 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]);
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 615 B After Width: | Height: | Size: 615 B |
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 239 B |
Before Width: | Height: | Size: 99 B After Width: | Height: | Size: 99 B |
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 301 B |
Before Width: | Height: | Size: 636 B After Width: | Height: | Size: 636 B |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 490 B |
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 333 B |