feat(markdown slides) Moved slide body to an external markdown file.

This commit is contained in:
Walker Waylon Scott 2017-07-02 11:36:12 -05:00
parent 8041ee606a
commit 49c5372c43
3 changed files with 172 additions and 21 deletions

View file

@ -1,25 +1,57 @@
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/night.css">
</head>
<div class="reveal">
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<p>
Deployed on Heroku
Check it out at http://pydatavizday.herokuapp.com/
</p>
</section>
<section>Presentation material</section>
</div>
<section data-markdown data-separator="^\r?\n----\r?\n$" data-separator-vertical="^\r?\n---\r?\n$" data-separator-notes="^Note:" >
<script type="text/template">
{% include 'slides.md' %}
</script>
</section>
</div>
<script src="https://cdn.jsdelivr.net/reveal.js/3.0.0/js/reveal.min.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
</div>
<script src="static/lib/js/head.min.js"></script>
<script src="static/js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'static/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'static/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'static/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-vertical]' ); } },
{ src: 'static/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'static/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-vertical]' ); } },
{ src: 'static/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'static/plugin/zoom-js/zoom.js', async: true },
{ src: 'static/plugin/notes/notes.js', async: true }
]
});
</script>
<script type="text/javascript">
// 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div>
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
Reveal.addEventListener( 'ready', function( event ) {
$('.slide-background').append(header);
});
}
else {
$('div.reveal').append(header);
}
</script>

View file

@ -1,3 +1,25 @@
{% extends "layout.html" %}
{% set active_page = "slides" %}
{% block title %}slides{% endblock %}
{% block head %}
{{ super() }}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="static/css/reveal.css">
<link rel="stylesheet" href="static/css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="static/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'static/css/print/pdf.css' : 'static/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
{% endblock %}

97
src/templates/slides.md Normal file
View file

@ -0,0 +1,97 @@
# pyDataVizDay
*a python implementation for Data Viz Day*
![python](https://www.python.org/static/opengraph-icon-200x200.png)
----
# Open The Viz
[pydatavizday.herokuapp.com](pydatavizday.herokuapp.com)
---
**Seriously** Get out your devices
[pydatavizday.herokuapp.com](pydatavizday.herokuapp.com)
----
## Pros
* Fast High Level Data Science
* Powerful Web stack
* Testing
* Documentation
* Free
----
## Cons
* No GUI (Drag and Drop Environment)
* Longer Learning Curve
*
----
## Stack for this viz
* Python
* pandas
* flask
* javascript
* C3
* reveal
* jquery
* HTML
* Bootstrap
----
## Other Considerations
* Jupyter Notebooks
* Jupyter Dashboards
* DASH (just released in mid JUNE)
---
### Jupyter Notebooks
* My Adhoc analysis of choice
* Many plugins (including reveal)
* Data/viz/slides All in one place
---
### Jupyter Dashboards
* Dashboard plugin for Jupyter notebook
![jupyter dashboard](https://github.com/jupyter/dashboards/raw/master/docs/source/_static/dashboards_intro.png)
---
### DASH
* released in June
![dash](https://camo.githubusercontent.com/a1be75b74d4a47c50df7018e914d63a2e232e503/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a44455441517136572d7079746c4e6f487a4c496144412e706e67)
----
# Example
* making sure highlighting works
``` python
import pandas as pd
l = [1, 2, 3]
for item in l:
print('this is an item from l')
print(l)
```