Kevin Kiningham

2020 Democratic Nominee PredictIt Odds

2019-02-15T00:00:00+00:00

The above chart is an experiment in using Google Doc’s cloud scripting functionality. Every 10 minutes, a cloud function runs and pulls odds data from PredictIt’s market API. It then stores it in a Google Sheets document, which automatically renders a chart that we can embed in a webpage. Surprisingly, this takes less than 50 lines of code and can be implemented entirely from the browser!

Bash Completion on OS X With Homebrew

2018-09-09T00:00:00+00:00

Bash completion is one of those convenient features you forget about until you have to use a system where it’s not available. Recently, I found out that many homebrew formulas come with built-in support for bash completions. Assuming you already have homebrew installed, you’ll first install the bash-completion formula

$ brew install bash-completion

Next, add the following line to your .bash_profile

[ -f /usr/local/etc/bash_completion ] && . /usr/local/etc/bash_completion

Restart your shell, and that’s it! Now you should have bash completion support for git, bazel, and many other command line utilities.

Rendering math with KaTeX

2017-11-01T00:00:00+00:00

KaTeX is an open source javascript library for typesetting equations. To use it on a static site (like GitHub pages), add the following.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

If you want to render equations automatically, KaTeX includes an extension that will attempt to render all text elements on page load.

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

For more control, you can also manually render elements. For example, on this site I use Kramdown, which embeds equations in a <script type="math/text"> element. To typeset, I use katex.renderToString and replace each element with a bit of jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    $("script[type='math/tex']").replaceWith(
      function(){
        var tex = $(this).text();
        return "<span class=\"inline-equation\">" +
               katex.renderToString(tex) +
               "</span>";
    });

    $("script[type='math/tex; mode=display']").replaceWith(
      function(){
        var tex = $(this).text();
        return "<div class=\"equation\">" +
               katex.renderToString("\\displaystyle "+tex) +
               "</div>";
    });
  });
</script>

Examples

Math in a figure element

$P(x)=\frac{1}{\sigma\sqrt{2\pi}}e^{-\frac{(x-\mu)^2}{2\sigma ^2}}$

The pdf of the Guassian distribution

Math in a block

$\phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)$

Math inline: $\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)$