feat(markdown slides) Moved slide body to an external markdown file.
This commit is contained in:
Walker Waylon Scott
parent
8041ee606a
commit
49c5372c43
3 changed files with 172 additions and 21 deletions
|
|
@ -1,25 +1,57 @@
|
||||||
<head>
|
<div class="reveal">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/reveal.min.css">
|
<!-- Any section element inside of this container is displayed as a slide -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/reveal.js/3.0.0/css/theme/night.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<div class="reveal">
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>
|
|
||||||
<p>
|
|
||||||
Deployed on Heroku
|
|
||||||
|
|
||||||
Check it out at http://pydatavizday.herokuapp.com/
|
<section data-markdown data-separator="^\r?\n----\r?\n$" data-separator-vertical="^\r?\n---\r?\n$" data-separator-notes="^Note:" >
|
||||||
</p>
|
<script type="text/template">
|
||||||
|
{% include 'slides.md' %}
|
||||||
|
</script>
|
||||||
</section>
|
</section>
|
||||||
<section>Presentation material</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/reveal.js/3.0.0/js/reveal.min.js"></script>
|
</div>
|
||||||
<script>
|
|
||||||
Reveal.initialize();
|
|
||||||
</script>
|
<script src="static/lib/js/head.min.js"></script>
|
||||||
</body>
|
<script src="static/js/reveal.js"></script>
|
||||||
</html>
|
|
||||||
|
<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>
|
||||||
|
|
@ -1,3 +1,25 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
{% set active_page = "slides" %}
|
{% 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
97
src/templates/slides.md
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
# pyDataVizDay
|
||||||
|
*a python implementation for Data Viz Day*
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### DASH
|
||||||
|
|
||||||
|
* released in June
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
# 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)
|
||||||
|
```
|
||||||
Loading…
Add table
Add a link
Reference in a new issue