My Blog

A Javascript Stack for Science

Thu, 20 Nov 2014 00:00:00 +0000

## This Post

Illustrates the powerful capabilities Javascript offers for creating personalized and dynamic visualizations of dense scientific information... fluff too.

> It only works in Chrome. I am coming to this as a scientist, not a developer. ## What to do? * Iteract with the [d3](http://d3js.org) 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](http://alikhosravani.github.io/MIC-Al6061-NIST-project/2014/09/17/Project-description.html). 2. Micrographs of [$\alpha-\beta$ Titanium](http://tonyfast.com/Titanium/) * 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](http://jekyllrb.com). If you click on the 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](http://jekyllrb.com/docs/frontmatter/). References in this post and made using with the [liquid syntax](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers), ``{{ref[i]}}``. * Interact with the comments served up by [Disqus](http://disqus.com). * Click to put the post into presentation mode thanks to [fullpage.js](http://alvarotrigo.com/fullPage/). 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.

Javascript	Styling	External Services
MathJax	Bootstrap	Disqus
Lightbox	Jekyll	Embedly
Fullpage.js	Octicons	SlideShare
JQuery	Liquid
D3
Mermaid

# All the Jazz # A Chart Easily create graphs using [Mermaid](https://github.com/knsv/mermaid)'s simple diagramming syntax. There is a [bl.ocks.org](http://bl.ocks.org/tonyfast/b77d1cb766f65f026c67) page that can be used to explore 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;

Reduced Embedding Visualizer

MouseOver any point to reveal pertinant information. Each point can be clicked to remind yourself which ones you have visited.

## Some section explaining code

function WhatsTheAnswer(){
  return parseInt('42');

## Using Posts as Code

Reduced Embedding Visualizer

MouseOver any point to reveal pertinant information. Each point can be clicked to remind yourself which ones you have visited.

## An Image > For good measure ![One Image](https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg) ## 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 ![@docfast](http://photos-b.ak.instagram.com/hphotos-ak-xfp1/10632254_450887461721113_670996025_n.jpg)

Ipython Notebook

Wed, 17 Sep 2014 00:00:00 +0000

# Access IPython notebook embeds Embed IPython Notebooks in research posts using a new ``_include``.

{% include notebook.html url='http://notebook.url' %}

Easily embed flickr images into posts

Wed, 17 Sep 2014 00:00:00 +0000

# Embed.ly [Embed.ly](http://embed.ly/) is a service that provides its users to embed content from endpoint urls for [250 services](http://embed.ly/embed/features/providers). It is is easy to test url's by modifying the ``href`` in the HTML embed code below

<a class="embedly-card" href="">crop_template</a>
<script>!function(a){
  var b="embedly-platform",
  c="script";
  if(!a.getElementById(b)){
    var d=a.createElement(c);
    d.id=b,
    d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";
    var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);
</script>

## On ``research-pages`` I added features for **Flickr** images and general **embedly** links. See [``_includes``](https://github.com/Materials-Informatics-Lab/research-pages/tree/gh-pages/_includes) > **Why both when they do the same thing?** Be specific. It will save time down the line. Use the following liquid syntax in your posts and pages.

# Show Flickr Image

{% include flickr.html url='http://www.flickr.com/photos/tonyfast/15198543551/' %}

# Try A SlideShare Presentation

Use the general embedly include statement.

{% include embedly.html url=page.deck %}

# Examples in Action ## Flickr Embed ## SlideShare Embed crop_template Modifications to the styling can be gleaned from the [embedly code generator](http://embed.ly/code).

Data Pages Demo

Wed, 17 Sep 2014 00:00:00 +0000

# Using Data Files in Posts [Data Files in Jekyll](http://jekyllrb.com/docs/datafiles/) provide site-wide access to ``yaml`` and ``json`` files stored in the ``_data`` folder on your Github Pages branch. # How to Data Files Work. * ``yaml`` or ``json`` files are stored in the ``_data`` directory. Examples: ``_data/file-name.yml`` or ``_data/file-name.json``. * Access the file content through ``{{site.data['file-name']}}`` in posts and pages. ``file-name`` is a string thatcorresponds to the file name without the extension. In the following examples we will use different files for the site data. # Demo ``_data/yexample.yaml`` In this case, the file is [``_data/yexample.yaml``](https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/yexample.yaml) and can be accessed with the syntax ``{{site.data['yexample']}}`` **YAML Site Data**

{"description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "units"=>[{"x"=>10, "y"=>10}], "flickr"=>{"view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094", "set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/"}, "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}

# Demo ``_data/jexample.json`` In this case, the file is [``_data/jexample.json``](https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/jexample.json) and can be accessed with the syntax ``{{site.data['jexample']}}`` **JSON Site Data**

{"gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "units"=>[{"y"=>10, "x"=>10}], "flickr"=>{"set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/", "view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094"}, "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}

# Accessing Data Files Front Matter Site variable names can be stored the post front-matter to access the data. In this post the following page variables were defined

---
ydatafile: "yexample" # filename for yaml file
jdatafile: "jexample" # filename for json file
---

The site data can be accessed as a hybrid of page and site data. ## YAML Data File from page variable The variable ``{{site.data[page.ydatafile]}}`` yields: ``` {"description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "units"=>[{"x"=>10, "y"=>10}], "flickr"=>{"view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094", "set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/"}, "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"} ``` ## JSON Data File from page variable The variable ``{{site.data[page.jdatafile]}}`` yields: ``` {"gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "units"=>[{"y"=>10, "x"=>10}], "flickr"=>{"set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/", "view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094"}, "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"} ```

Hazelnut Dataset

Wed, 10 Sep 2014 00:00:00 +0000

## Description This Hazelnut dataset was created by Micro-CT and Segmented by some guy. [Public Download on Dropbox](https://dl.dropboxusercontent.com/u/22455492/natural-3d/macadamia.mat) ## Dataset Preview Please visit [This Flickr Set](https://www.flickr.com/photos/tonyfast/sets/72157647401996846/) to see a preview. crop_template ## Analytics * **Volume Fraction** :: 0.883088032 ## Source This page was generated using the following gist.