---
layout: post
title: A Javascript Stack for Science
tagline: An example of a few Javascript libraries that provide enhanced dynamicism to information.
file: "/research-pages/assets/data/embedding.json"
file2: "/research-pages/assets/data/embedding2.json"
js:
- name: MathJax
url: http://www.mathjax.org/ #0
- name: Lightbox
url: http://lokeshdhakar.com/projects/lightbox2/ #1
- name: Fullpage.js
url: http://alvarotrigo.com/fullPage/ #2
- name: JQuery
url: http://jquery.com/ #3
- name: D3
url: http://d3js.org #4
- name: Mermaid
url: https://github.com/knsv/mermaid #5
css:
- name: Bootstrap
url: http://getbootstrap.com #0
- name: Jekyll
url: http://jekyllrb.com #1
- name: Octicons
url: http://octicons.github.com #2
- name: Liquid
url: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
external:
- name: Disqus
url: http://disqus.com #0
- name: Embedly
url: http://embed.ly #0
- name: SlideShare
url: http://slideshare.net/tonyfast1 #0
references:
- http://d3js.org #0
- http://alikhosravani.github.io/MIC-Al6061-NIST-project/2014/09/17/Project-description.html #1
- http://tonyfast.com/Titanium/ #2
- http://jekyllrb.com
- http://jekyllrb.com/docs/frontmatter/
- http://disqus.com
- http://www.mathjax.org/
- https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
- http://alvarotrigo.com/fullPage/
- https://github.com/knsv/mermaid #9
- http://bl.ocks.org/tonyfast/b77d1cb766f65f026c67
- http://nbviewer.ipython.org/gist/tonyfast/242af9bda2517a9179c0/blog-to-data.ipynb #11
---
{% assign ref=page.references %}
## This Post
<h4><i>Illustrates the powerful capabilities Javascript offers for creating personalized
and dynamic visualizations of dense scientific information... fluff too.</i></h4>
> It only works in Chrome. I am coming to this as a scientist, not a developer.
## What to do?
* Iteract with the [d3]({{ref[0]}}) visualizations to explore real materials science datasets.
The d3 plots are reduced embeddings for real machine learning examples. This dynamic interaction
allows experts to rapidly peruse their information.
There are two of visualizations.
1. An exploration of [Al-Mg-Si SEM Images]({{ref[1]}}).
2. Micrographs of [$\alpha-\beta$ Titanium]({{ref[2]}})
* Click the Stand-Alone Images to activate Lightbox for a gallery view of visual
information.
> I'll fix this soon, it's kinda broked.
* Observe the references at the end that are automatically collated by a
customized [Jekyll template]({{ref[3]}}).
If you click on the <span class="octicon octicon-pencil"></span> in the menu bar at the top left you can see the
source for this post. It is a hybrid of structured and unstructured data using
[YAML front matter]({{ref[4]}}). References in this post and made using with
the [liquid syntax]({{ref[7]}}),
``{% raw %}{{ref[i]}}{% endraw %}``.
* Interact with the comments served up by [Disqus]({{ref[5]}}).
* Click <span class="octicon octicon-gift"></span> to put the post into presentation mode
thanks to [fullpage.js]({{ref[8]}}).
The d3 visualizations will become easier to use and each the remaining sections
will be parsed into slides.
## A Javascript Stack for Dynamic Presentation
The complete set of tools used on this page is listed below.
<table class="table table-bordered">
<tr>
<th>
Javascript
</th>
<th>
Styling
</th>
<th>
External Services
</th>
</tr>
{% for thingies in page.js %}
<tr>
<td>
<a href="{{ page.js[forloop.index0]['url']}}">{{page.js[forloop.index0]['name']}}</a>
</td>
<td>
<a href="{{ page.css[forloop.index0]['url']}}">{{page.css[forloop.index0]['name']}}</a>
</td>
<td>
<a href="{{ page.external[forloop.index0]['url']}}">{{page.external[forloop.index0]['name']}}</a>
</td>
</tr>
{% endfor %}
</table>
# All the Jazz
# A Chart
Easily create graphs using [Mermaid]({{ref[9]}})'s simple diagramming syntax. There is a [bl.ocks.org]({{ref[10]}}) page that can
be used to explore Mermaid.
<style>
.mermaid div{ color: black; }
</style>
<div class="mermaid">
graph LR;
A[Physics Based Model]-->B(Feature Identification);
B-->C(Feature Encoding);
B-->b1((segmentation));
C-->D(Data Analytics);
C-->c1((spatial statistics));
D-->|collaborate|E{Design};
D-->d1((PCA));
E-->|iterate|A;
</div>
{% assign file={{page.file}} %}
{% include rembedder.html file=file %}
## Some section explaining code
{% highlight javascript %}
function WhatsTheAnswer(){
return parseInt('42');
{% endhighlight %}
## Using Posts as Code
<iframe src="{{ref[11]}}" width="100%" height="475px"></iframe>
{% assign file={{page.file2}} %}
{% include rembedder.html file=file %}
## An Image
> For good measure
## Dolla Dolla Bills Y'all
Fencing latex in ``$`` and ``$$`` will activate MathJax.
eg.
```
$$\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)$$
```
$$\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x).$$
## And Another
