All the pieces are in place!

Next: build up the package

dev/demo/demo.Rmd

 ```
 
 ```{r data}
-# data <- list(
-#   labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
-#   datasets = list(
-#     list(name = "Python", values = runif(7 * 4, 0, 50)),
-#     list(name = "R", values = runif(7 * 4, 0, 100))
-#   )
-# )
-
 data <-
   babynames %>% 
   filter(

dev/demo/demo.html

 
 
 <div id="chart"></div>
-<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co"># data &lt;- list(</span></a>
-<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="co">#   labels = rep(c(&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thu&quot;, &quot;Fri&quot;, &quot;Sat&quot;), 4),</span></a>
-<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="co">#   datasets = list(</span></a>
-<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co">#     list(name = &quot;Python&quot;, values = runif(7 * 4, 0, 50)),</span></a>
-<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co">#     list(name = &quot;R&quot;, values = runif(7 * 4, 0, 100))</span></a>
-<a class="sourceLine" id="cb1-6" data-line-number="6"><span class="co">#   )</span></a>
-<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="co"># )</span></a>
-<a class="sourceLine" id="cb1-8" data-line-number="8"></a>
-<a class="sourceLine" id="cb1-9" data-line-number="9">data &lt;-</a>
-<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="st">  </span>babynames <span class="op">%&gt;%</span><span class="st"> </span></a>
-<a class="sourceLine" id="cb1-11" data-line-number="11"><span class="st">  </span><span class="kw">filter</span>(</a>
-<a class="sourceLine" id="cb1-12" data-line-number="12">    name <span class="op">%in%</span><span class="st"> </span><span class="kw">c</span>(<span class="st">&quot;Ruth&quot;</span>, <span class="st">&quot;August&quot;</span>),</a>
-<a class="sourceLine" id="cb1-13" data-line-number="13">    year <span class="op">&gt;=</span><span class="st"> </span><span class="dv">1980</span></a>
-<a class="sourceLine" id="cb1-14" data-line-number="14">  ) <span class="op">%&gt;%</span><span class="st"> </span></a>
-<a class="sourceLine" id="cb1-15" data-line-number="15"><span class="st">  </span><span class="kw">group_by</span>(year, name) <span class="op">%&gt;%</span><span class="st"> </span></a>
-<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="st">  </span><span class="kw">summarize</span>(<span class="dt">n =</span> <span class="kw">sum</span>(n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
-<a class="sourceLine" id="cb1-17" data-line-number="17"><span class="st">  </span><span class="kw">ungroup</span>() <span class="op">%&gt;%</span><span class="st"> </span></a>
-<a class="sourceLine" id="cb1-18" data-line-number="18"><span class="st">  </span><span class="kw">pivot_wider</span>(year, name, <span class="dt">values_from =</span> n)</a>
-<a class="sourceLine" id="cb1-19" data-line-number="19"></a>
-<a class="sourceLine" id="cb1-20" data-line-number="20">data[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ]</a></code></pre></div>
+<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1">data &lt;-</a>
+<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="st">  </span>babynames <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="st">  </span><span class="kw">filter</span>(</a>
+<a class="sourceLine" id="cb1-4" data-line-number="4">    name <span class="op">%in%</span><span class="st"> </span><span class="kw">c</span>(<span class="st">&quot;Ruth&quot;</span>, <span class="st">&quot;August&quot;</span>),</a>
+<a class="sourceLine" id="cb1-5" data-line-number="5">    year <span class="op">&gt;=</span><span class="st"> </span><span class="dv">1980</span></a>
+<a class="sourceLine" id="cb1-6" data-line-number="6">  ) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="st">  </span><span class="kw">group_by</span>(year, name) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="st">  </span><span class="kw">summarize</span>(<span class="dt">n =</span> <span class="kw">sum</span>(n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-9" data-line-number="9"><span class="st">  </span><span class="kw">ungroup</span>() <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="st">  </span><span class="kw">pivot_wider</span>(year, name, <span class="dt">values_from =</span> n)</a>
+<a class="sourceLine" id="cb1-11" data-line-number="11"></a>
+<a class="sourceLine" id="cb1-12" data-line-number="12">data[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ]</a></code></pre></div>
 <pre><code>## # A tibble: 5 x 3
 ##    year August  Ruth
 ##   &lt;dbl&gt;  &lt;int&gt; &lt;int&gt;

dev/dev.Rmd

 ```
 
 </details>
+
+
+## This is basically what `htmlwidgets` does, just inside a framework
+
+We now have all of the pieces of an `htmlwidget`,
+it's just a bit less coordinated.
+
+1. `htmlwidgets` gives us a slightly nicer way of specifying dependencies
+   in `inst/htmlwidgets/frappeChart.yaml`. We'll have to update that file.
+   
+2. When we started we added a `div(id = "chart")`. 
+   It would be annoying to have to make sure that each `id` is always unique.
+   `htmlwidgets` will add this `div` for us and give each one a unique id.
+   We won't have to write any code for this, it just happens.
+   
+3. We'll write an R function that will take input data and options and format
+   it into a list, like the `opts` we've been using.
+   Then we hand the data to `htmlwidgets` and it embeds it in a `<script>` tag
+   for us.
+   It will also find that data automatically and make it available on the JS side.
+   
+4. Finally, we wrote some code in JavaScript to initialize the chart.
+   In the same way, we'll write some code in `inst/htmlwidgets/frappeChart.js`
+   which is where we'll reformat the data and options passed from the R world
+   by htmlwidgets. We also need to instantiate the chart object. For advanced
+   usage, this is also where we'll put code that would let us update the
+   widget in place without having to re-render the whole chart.
+