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 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.
    2. Micrographs of $\alpha-\beta$ 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.

    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. References in this post and made using with the liquid syntax, {{ref[i]}}.

  • Interact with the comments served up by Disqus.

  • Click to put the post into presentation mode thanks to fullpage.js.

    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’s simple diagramming syntax. There is a bl.ocks.org 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

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)$$

And Another

@docfast