Beyond Axes

class: center, middle, inverse, title-slide

# Beyond Axes
## Simulating Systems with Interactive Graphics
### Sean Kross
### 2017-08-03

---

background-image: url(https://www.gatesnotes.com/-/media/Images/Articles/About-Bill-Gates/Remembering-Hans-Rosling/hans-rosling-memoriam_2017_article_1200x564_v1.jpg)

---

![](img/ted.png)

[The Best Stats You've Ever Seen](https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen)

<!--
In general I'm not a fan of Ted talks, but Hans Rosling's talk
[*The Best Stats You've Ever Seen*](https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen) is must-see because of his signature
presentation style and his use of interactive graphics. When he gave this talk
in 2006 there were virtually no off-the-shelf interactive graphics packages so
Gapminder built their own, which Dr. Rosling uses during his talk to the
amazement of the audience.

I've been thinking about this talk and about how it conveys intuition in
three dimensions.  Seeing countries rise and fall along human development 
parameters across time allows the audience to think of each country as an
independent agent in a system. As the system evolves Dr. Rosling walks the
audience through how policy changes that were made in each country effect
their movement in the system and the resulting societal improvements.
-->

---
class: center, middle

# Most People Struggle to Understand Models

---

![](img/election.png)

---

![](img/flip-tweet.png)

---
class: center, middle

# Interactive Model Explanations that I Admire

---
class: center, middle

# The Parable of the Polygons

by Vi Hart and Nicky Case

Based on [Thomas Schelling](https://www.stat.berkeley.edu/~aldous/157/Papers/Schelling_Seg_Models.pdf)'s *Dynamic Models of Segregation*

---

![](img/polygons.png)

[Live Demo](http://ncase.me/polygons/)

<!--
I'm just going to do a quick demo but I really encourage you to
[go play with this application yourself](http://ncase.me/polygons/). In this
model there are two kinds of people, blue squares and yellow triangles. As you
can see some of these shapes are rocking back and forth with their mouths open -
clearly uncomfortable, while other shapes are happy and sitting still. The
unhappy shapes won't be happy unless they're surrounded by a certain percentage
of shapes that are like them. You can click and drag each shape individually to
make it more happy, or you can click the "Start Movin'" button and the unhappy
shapes will randomly move until they find a happy position. Over time you can
see that this environment becomes drastically more segregated, and if you
increase the bias the arrangement of the shapes becomes even more segregated.

I believe this kind of demonstration, where users can adjust model parameters
and witness resulting behavior conveys an intuition about this sociological
model that isn't expressed by showing the relationship between bias and
segregation alone.
-->

---
class: center, middle

# To Build a Better Ballot

by Nicky Case

---

![](img/ballot.png)

[Live Demo](http://ncase.me/ballot/sandbox/?m=%7B%22s%22%3A%22FPTP%22%2C%22v%22%3A%5B%5B157%2C149%5D%5D%2C%22c%22%3A%5B%5B63%2C100%5D%2C%5B237%2C100%5D%2C%5B266%2C266%5D%5D%2C%22d%22%3A%22The%20Election%20of%201912%22%7D)

<!--
Once again I strongly encourage you to
[play with this on your own](http://ncase.me/ballot/). This interactive model
explores different kinds of voting procedures, most of which have been developed
by political scientists without being put into practice. In this situation I've
set up a reenactment of the US election of 1912. Each little circle in the in
the big square on the screen represents one voter, and with the First Past the
Post electoral rules each dot will vote for the shape that is closest to it.

Now if you remember your history books you'll recall that in 1912 Woodrow
Wilson (the blue square) was the Democratic challenger to the incumbent
Republican William Howard Taft (the yellow triangle). However Theodore
Roosevelt, a former President and third party candidate entered the race with
a political platform that was close to Taft's. If I drag
Theodore-red-hexagon-Roosevelt slightly up and to the left, you can see that it
creates a "spoiler effect" allowing the blue square (Wilson) to win the
election! However if I leave Teddy where he is and simply change the voting
system to "Score" you can see that the yellow triangle wins the election instead
of the blue square. Users can therefore experiment with different kinds of voter
preferences, numbers of candidates, and voting systems to see how a democratic
process is effected.
-->

---
class: center, middle

# How Can we Empower Folks to Build Interactive Models?

<!--
The two previous interactive models are very engaging and they were enabled
by individuals who have years of art and design experience on top of deep and
dangerous Javascript knowledge. I don't believe it's reasonable to teach every
data scientist to have this level of Javascript fluency, so I was thinking about
how existing technologies could be adapted with current data science
thinking to produce interactive models in this style.

It also would be nice to be able to introduce web technologies and Javascript
within the familiarity of a data scientist's pipeline.
-->

---
class: center, middle

![](img/p5js.svg)

"A Software Sketchbook"

---
class: center, middle

![](img/p5-doc.png)

---
class: center, middle

![](img/p5-doc-box.png)

---
class: center, middle

![](img/p5-plus-r.png)

---

```r
library(p5)

p5() %>%
  createCanvas(100, 100) %>%
  background("#002d72") %>%
  rect(x = 10, y = 10, w = 50, h = 50)
```

<div id="p5-4048277034" style="width:100px;height:100px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-4048277034">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(100,100,null);\np.background('#002d72');\n};","between":";","draw":"p.draw = function() {\np.rect(10,10,50,50);\n};","post":";","data":null,"fn":"wqonaodihp"},"evals":[],"jsHooks":[]}</script>

---

```r
library(p5)
library(tibble)

squares <- data_frame(x = c(100, 100, 200, 200),
                      y = c(50, 150, 50, 150),
                      w = rep(40, 4),
                      h = rep(40, 4))

squares %>%
  p5() %>%
  createCanvas(300, 200) %>%
  background("#002d72") %>%
  rect()
```

<div id="p5-8965364798" style="width:300px;height:200px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-8965364798">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(300,200,null);\np.background('#002d72');\n};","between":";","draw":"p.draw = function() {\np.rect(100,50,40,40);\np.rect(100,150,40,40);\np.rect(200,50,40,40);\np.rect(200,150,40,40);\n};","post":";","data":{"x":[100,100,200,200],"y":[50,150,50,150],"w":[40,40,40,40],"h":[40,40,40,40]},"fn":"lmdodqqeus"},"evals":[],"jsHooks":[]}</script>

---

```r
p5() %>%
  createCanvas(100, 100) %>%
  background("#DCDCDC") %>%
  arc(50, 55, 50, 50, 0, ~HALF_PI) %>%
  noFill() %>%
  arc(50, 55, 60, 60, ~HALF_PI, ~PI) %>%
  arc(50, 55, 70, 70, ~PI, ~PI+QUARTER_PI) %>%
  arc(50, 55, 80, 80, ~PI+QUARTER_PI, ~TWO_PI)
```

<div id="p5-7871591529" style="width:100px;height:100px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-7871591529">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(100,100,null);\np.background('#DCDCDC');\n};","between":";","draw":"p.draw = function() {\np.arc(50,55,50,50,0,p.HALF_PI,null);\np.noFill();\np.arc(50,55,60,60,p.HALF_PI,p.PI,null);\np.arc(50,55,70,70,p.PI,p.PI+p.QUARTER_PI,null);\np.arc(50,55,80,80,p.PI+p.QUARTER_PI,p.TWO_PI,null);\n};","post":";","data":null,"fn":"nvcsdlvpmx"},"evals":[],"jsHooks":[]}</script>

---

```r
library(tibble)

stripes <- data_frame(
  x = rep(0, 7),
  y = cumsum(c(0, rep(30, 6))),
  w = rep(190*2, 7),
  h = rep(15, 7)
)

stripes_ <- stripes %>%
  p5() %>%
  createCanvas(190*2, 200) %>%
  fill("#B22234") %>%
  noStroke() %>%
  rect()

stars_ <- p5() %>%
  fill("#3C3B6E") %>%
  noStroke() %>%
  rect(0, 0, 152, 105)

bind_sketches(stripes_, stars_)
```

---

<div id="p5-1586832263" style="width:504px;height:504px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-1586832263">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(380,200,null);\n};","between":";","draw":"p.draw = function() {\np.fill('#B22234');\np.noStroke();\np.rect(0,0,380,15);\np.rect(0,30,380,15);\np.rect(0,60,380,15);\np.rect(0,90,380,15);\np.rect(0,120,380,15);\np.rect(0,150,380,15);\np.rect(0,180,380,15);\np.fill('#3C3B6E');\np.noStroke();\np.rect(0,0,152,105);\n};","post":";","data":{"x":[0,0,0,0,0,0,0],"y":[0,30,60,90,120,150,180],"w":[380,380,380,380,380,380,380],"h":[15,15,15,15,15,15,15]},"fn":"yjuvybnrqt"},"evals":[],"jsHooks":[]}</script>

---

```r
draw() %>%
  background("#F4F8FC") %>%
  line(~mouseX, 0, ~mouseX, 200) %>%
  sketch(draw = .)
```

<div id="p5-7372369725" style="width:504px;height:504px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-7372369725">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\n};","between":";","draw":"p.draw = function() {\np.background('#F4F8FC');\np.line(p.mouseX,0,p.mouseX,200);\n};","post":";","data":null,"fn":"hertaldpux"},"evals":[],"jsHooks":[]}</script>

---

```r
p5() %>%
  createCanvas(400, 300) %>%
  background("#F4F8FC") %>%
  ellipse(~mouseX, ~mouseY, 30, 30)
```

<div id="p5-9078125390" style="width:400px;height:300px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-9078125390">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(400,300,null);\np.background('#F4F8FC');\n};","between":";","draw":"p.draw = function() {\np.ellipse(p.mouseX,p.mouseY,30,30);\n};","post":";","data":null,"fn":"aixwcksqlv"},"evals":[],"jsHooks":[]}</script>

---

```r
setup_ <- setup() %>%
  createCanvas(640, 480)
draw_ <- draw() %>%
  js("
      if (mouseIsPressed) {
        fill(0);
      } else {
        fill(255);
      }
  ") %>%
  ellipse(~mouseX, ~mouseY, 80, 80)
sketch(setup = setup_, draw = draw_)
```

<div id="p5-6570965519" style="width:504px;height:504px;" class="p5 html-widget"></div>
<script type="application/json" data-for="p5-6570965519">{"x":{"section":"sketch","pre":";","setup":"p.setup = function() {\np.createCanvas(640,480,null);\n};","between":";","draw":"p.draw = function() {\n\n      if (p.mouseIsPressed) {\n        p.fill(0);\n      } else {\n        p.fill(255);\n      }\n  \np.ellipse(p.mouseX,p.mouseY,80,80);\n};","post":";","data":null,"fn":"tpyjzrogkd"},"evals":[],"jsHooks":[]}</script>

---

# Goals:

1. Make it easier to create interactive models in R.
2. Create a bridge for R programmers to learn Javascript.

---

# Thank You!

Link to this talk: [seankross.com/jsm-talk](http://seankross.com/jsm-talk)

Code for this talk: [github.com/seankross/jsm-talk](https://github.com/seankross/jsm-talk)

Try out p5 in R: [github.com/seankross/p5](https://github.com/seankross/p5)

Find me on Twitter: [@seankross](https://twitter.com/seankross)

Special thanks to Drs. Jeff Leek, Roger Peng, and Brian Caffo for supporting me
in this work as part of the Johns Hopkins Data Science Lab.