website: major update

3 files changed, 392 insertions, 534 deletions

diff --git a/docs/samples/bindings.js b/docs/samples/bindings.js
deleted file mode 100644
index cac29e417..000000000
--- a/docs/samples/bindings.js
+++ /dev/null
@@ -1,159 +0,0 @@
-// requires index.js
-
-function Binding(name){
-  this.name = name
-  this.value = undefined
-  this.inputs = []
-  this.listeners = []
-  this.formatter = undefined
-}
-
-
-Binding.prototype.addInput = function(el) {
-  var binding = this
-  var _onInput = function(ev) {
-    binding.setValue(el.value, el)
-  }
-  var input = {
-    el: el,
-    _onInput: _onInput,
-  }
-  this.inputs.push(input)
-  if (this.value === undefined) {
-    this.value = el.value
-  } else {
-    input.el.value = this.value
-  }
-  el.addEventListener('input', _onInput, {passive:true})
-}
-
-
-// listener signature:
-//   function(nextval string, prevval string, b Binding)void
-//
-Binding.prototype.addListener = function(listener) {
-  this.listeners.push(listener)
-}
-
-
-Binding.prototype.setValue = function(nextval, origin) {
-  // console.log('Binding.setValue nextval:', nextval, {origin})
-  var prevval = this.value
-  if (this.formatter) {
-    nextval = this.formatter(nextval, prevval)
-  }
-  if (this.value === nextval) {
-    return
-  }
-  var binding = this
-  this.value = nextval
-  this.inputs.forEach(function(input) {
-    if (input.el !== origin) {
-      input.el.value = nextval
-    }
-  })
-  this.listeners.forEach(function(listener) {
-    listener(nextval, prevval, this)
-  })
-}
-
-
-function Bindings() {
-  this.bindings = {}
-}
-
-Bindings.prototype.getBinding = function(name, input) {
-  var binding = this.bindings[name]
-  if (!binding) {
-    binding = new Binding(name)
-    this.bindings[name] = binding
-  }
-  return binding
-}
-
-Bindings.prototype.bindInput = function(name, input) {
-  // console.log('bindInput', name, input)
-  var binding = this.getBinding(name)
-  binding.addInput(input)
-}
-
-Bindings.prototype.bindAllInputs = function(queryOrInputElementList) {
-  var bindings = this
-
-  var inputs = (
-    typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) :
-    queryOrInputElementList
-  )
-
-  inputs.forEach(function(input) {
-    var bindingName = input.dataset.binding
-    if (bindingName) {
-      bindings.bindInput(bindingName, input)
-    }
-  })
-}
-
-// listener signature:
-//   function(nextval string, prevval string, b Binding)void
-//
-Bindings.prototype.addListener = function(name, listener) {
-  var binding = this.getBinding(name)
-  binding.addListener(listener)
-}
-
-Bindings.prototype.setValue = function(name, value) {
-  var binding = this.getBinding(name)
-  binding.setValue(value)
-}
-
-
-Bindings.prototype.value = function(name, defaultValue) {
-  var binding = this.bindings[name]
-  return binding && binding.value !== undefined ? binding.value : defaultValue
-}
-
-
-function fmt_float(nextval, prevval) {
-  var n = parseFloat(nextval)
-  return isNaN(n) ? 0 : n
-}
-
-function fmt_int(nextval, prevval) {
-  var n = parseInt(nextval)
-  return isNaN(n) ? 0 : n
-}
-
-
-// configure is convenience function for setting value, adding a
-// listener and associating a formatter with a binding.
-// If a listener and a value is provided, the value is set and the listener
-// is immediately invoked.
-//
-Bindings.prototype.configure = function(name, value, formatter, listener) {
-  var binding = this.getBinding(name)
-  if (listener) {
-    binding.addListener(listener)
-  }
-  if (value !== undefined && value !== null) {
-    binding.setValue(value)
-  }
-  if (formatter) {
-    if (typeof formatter == 'string') {
-      switch (formatter) {
-        case 'number':
-        case 'float':
-          formatter = fmt_float; break;
-        
-        case 'int':
-        case 'integer':
-          formatter = fmt_int; break;
-
-        default:
-          throw new Error('unknown formatter "' + formatter + '"')
-      }
-    } else if (typeof formatter != 'function') {
-      throw new Error('formatter should be a string or function')
-    }
-    binding.formatter = formatter
-  }
-}
diff --git a/docs/samples/index.css b/docs/samples/index.css
new file mode 100644
index 000000000..2203be989
--- /dev/null
+++ b/docs/samples/index.css
@@ -0,0 +1,243 @@
+body {
+  padding-bottom: 0;
+  background: white;
+}
+
+.row.footer h2 {
+  margin:0;
+  text-align:center;
+}
+
+livesample {
+  display: block;
+  color: #111;
+  outline: none;
+  padding-left: 20px;
+  border-left: 2px solid transparent;
+  margin-left:-22px;
+  margin-top: 1em;
+  margin-bottom: 1.6em;
+}
+livesample:hover {
+  /*color: rgb(3, 102, 214);*/
+  border-left-color: rgb(3, 102, 214);
+}
+livesample:focus {
+  border-left-color: #eee;
+}
+livesample > p {
+  margin-top: 0;
+}
+livesample.s1 {
+  padding-left: 16px;
+  letter-spacing: -0.01em;
+  font-size: 5em;
+  font-weight: 600;
+  line-height: 1.1;
+  margin-top: 0;
+  margin-bottom: 0.3em;
+}
+livesample.s2 {
+  max-width: 400px;
+  font-size: 1em;
+}
+livesample.s3 {
+  font-size: 13px;
+  line-height: 18px;
+}
+  livesample.s3 b, livesample.s3 strong {
+    font-weight:500;
+    color: black;
+  }
+
+livesample.col3 {
+  -moz-column-width: 20em;
+  -moz-columns:      20em;
+  -webkit-columns:   20em;
+  columns:           20em;
+
+  -moz-column-gap:    2em;
+  -webkit-column-gap: 2em;
+  column-gap:         2em;
+}
+livesample.col2 {
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  column-count: 2;
+}
+
+.font-style-regular       { font-weight:400 !important; font-style:normal !important; }
+.font-style-italic        { font-weight:400 !important; font-style:italic !important; }
+.font-style-medium        { font-weight:500 !important; font-style:normal !important; }
+.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; }
+.font-style-bold          { font-weight:700 !important; font-style:normal !important; }
+.font-style-bold-italic   { font-weight:700 !important; font-style:italic !important; }
+.font-style-black         { font-weight:900 !important; font-style:normal !important; }
+.font-style-black-italic  { font-weight:900 !important; font-style:italic !important; }
+
+div.live {
+  margin-top:1em;
+  margin-bottom:100px;
+  padding-bottom:20px;
+  border-bottom: 1px solid #ddd;
+}
+  div.live .learn-more {
+    margin-top:40px;
+    user-select: none;
+  }
+  div.controls {
+    position: absolute;
+    right: 0;
+    top: 150px;
+    width: 250px;
+    padding: 10px 0;
+    /*background:#eee;*/
+    opacity:0.3;
+    transition: 90ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
+    /*border:1px solid #bbb;*/
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-right:none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font-size: 13px;
+  }
+  div.controls:hover {
+    opacity:1;
+    background:#f5f5f5;
+    border-color: transparent;
+  }
+  div.controls .control {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    min-height: 30px;
+    margin: 0 16px;
+  }
+  div.controls .control > * {
+    flex: 1 1 auto;
+    margin:0;
+    margin-right: 16px;
+    box-sizing: border-box;
+  }
+  div.controls .control > :last-child {
+    margin-right: 0;
+  }
+  div.controls .control > select {
+    min-width: 6em;
+    align-items: center;
+    justify-content: center;
+  }
+  div.controls .control > input,
+  div.controls .control > select {
+    width: 0;
+    outline: none;
+  }
+  div.controls .control > input[type="number"],
+  div.controls .control > input[type="text"] {
+    background: none;
+    border: none;
+    padding: 4px 0;
+    font-size: inherit;
+    /*border-radius: 2px;*/
+  }
+  div.controls .control > input[type="number"] {
+    max-width: 48px;
+    text-align: right;
+    -moz-font-feature-settings:    'calt' 1, 'zero' 1, 'tnum' 1;
+    -ms-font-feature-settings:     'calt' 1, 'zero' 1, 'tnum' 1;
+    -o-font-feature-settings:      'calt' 1, 'zero' 1, 'tnum' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
+    font-feature-settings:         'calt' 1, 'zero' 1, 'tnum' 1;
+  }
+  div.controls .control > input[type=number]::-webkit-inner-spin-button, 
+  div.controls .control > input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0;
+  }
+  div.controls .control > input[type="range"] {
+    /*max-width: 80%;*/
+    flex: 1 1 auto;
+    display: block;
+  }
+  div.controls .control > img.icon,
+  div.controls .control > label {
+    font-family: georgia, serif;
+    font-style: italic;
+    color: black;
+    width: 16px;
+    height: 16px;
+    flex: 0 0 auto;
+    margin-right: 16px;
+    opacity: 0.6;
+  }
+  div.controls canvas {
+    height: 200px;
+  }
+  div.controls .control.info,
+  div.controls canvas {
+    transition: 390ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
+    opacity: 0;
+  }
+  div.controls:hover .control.info,
+  div.controls:hover canvas {
+    opacity: 1;
+  }
+
+
+/* narrow windows */
+@media only screen and (max-width: 1200px) {
+  div.controls {
+    width: 210px;
+    font-size: 12px;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  div.controls {
+    width: 140px;
+    font-size: 11px;
+  }
+  div.controls canvas {
+    display: none;
+  }
+  div.controls .control.info {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  div.controls .control > input[type="range"] {
+    width: 0;
+    flex: 0 1 0%;
+    display: none;
+  }
+  div.controls .control > input[type="number"] {
+    max-width: 100%;
+    flex: 1 1 auto;
+  }
+}
+@media only screen and (max-width: 740px) {
+  livesample.s1 {
+    font-size:4.5em;
+  }
+  div.controls {
+    display: none;
+  }
+}
+@media only screen and (max-width: 565px) {
+  livesample.s1 {
+    font-size:4em;
+  }
+}
+@media only screen and (max-width: 414px) {
+  livesample.s1 {
+    font-size:3.4em;
+  }
+}
+
+.sample-images img, .sample-images svg {
+  margin: 100px 0;
+}
+.sample-images > img:first-child, .sample-images > svg:first-child {
+  margin-top:50px;
+}
diff --git a/docs/samples/index.html b/docs/samples/index.html
index 08de84f72..a56b6aa60 100644
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@@ -1,300 +1,73 @@
-<!DOCTYPE HTML>
-<html lang="en" prefix="og: http://ogp.me/ns#">
-  <head>
-    <meta charset="utf-8">
-    <title>Inter UI font family</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta property="og:title" content="Inter UI font family">
-    <meta property="twitter:title" content="Inter UI font family">
-    <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
-    <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
-    <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
-    <meta property="twitter:card" content="summary">
-    <meta property="twitter:site" content="@rsms">
-    <meta property="twitter:creator" content="@rsms">
-    <meta property="og:image" content="https://rsms.me/inter/res/poster.png">
-    <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png">
-    <meta property="fb:app_id" content="38027689216">
-    <meta property="og:url" content="https://rsms.me/inter/">
-    <meta property="og:site_name" content="rsms.me">
-    <meta property="og:type" content="product">
-    <meta property="og:locale" content="en_US" />
-    <meta name="format-detection" content="telephone=no">
-    <link rel="icon" type="image/png" href="../favicon.png" />
-    <link href="../inter-ui.css?v=2.5" rel="stylesheet">
-    <link href="../index.css?v=5" rel="stylesheet">
-    <style type="text/css">
-body {
-  padding-bottom: 0;
-  background: white;
-}
-
-.row.footer h2 {
-  margin:0;
-  text-align:center;
-}
-
-/*.row.menu {
-  background: white;
-}*/
-
-livesample {
-  display: block;
-  color: #111;
-  outline: none;
-  padding-left: 20px;
-  border-left: 2px solid transparent;
-  margin-left:-22px;
-  margin-top: 1em;
-  margin-bottom: 1.6em;
-}
-livesample:hover {
-  /*color: rgb(3, 102, 214);*/
-  border-left-color: rgb(3, 102, 214);
-}
-livesample:focus {
-  border-left-color: #eee;
-}
-livesample > p {
-  margin-top: 0;
-}
-livesample.s1 {
-  padding-left: 16px;
-  letter-spacing: -0.005em;
-  font-size: 5em;
-  font-weight: 600;
-  line-height: 1.1;
-  margin-top: 0;
-  margin-bottom: 0.3em;
-}
-livesample.s2 {
-  max-width: 400px;
-  font-size: 1em;
-}
-livesample.s3 {
-  font-size: 13px;
-  line-height: 18px;
-}
-  livesample.s3 b, livesample.s3 strong {
-    font-weight:500;
-    color: black;
-  }
-
-livesample.col3 {
-  -moz-column-width: 20em;
-  -moz-columns:      20em;
-  -webkit-columns:   20em;
-  columns:           20em;
-
-  -moz-column-gap:    2em;
-  -webkit-column-gap: 2em;
-  column-gap:         2em;
-}
-livesample.col2 {
-  -moz-column-count: 2;
-  -webkit-column-count: 2;
-  column-count: 2;
-}
-
-.font-style-regular       { font-weight:400 !important; font-style:normal !important; }
-.font-style-italic        { font-weight:400 !important; font-style:italic !important; }
-.font-style-medium        { font-weight:500 !important; font-style:normal !important; }
-.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; }
-.font-style-bold          { font-weight:700 !important; font-style:normal !important; }
-.font-style-bold-italic   { font-weight:700 !important; font-style:italic !important; }
-.font-style-black         { font-weight:900 !important; font-style:normal !important; }
-.font-style-black-italic  { font-weight:900 !important; font-style:italic !important; }
-
-div.live {
-  margin-top:1em;
-  margin-bottom:100px;
-  padding-bottom:100px;
-  border-bottom: 1px solid #ddd;
-}
-  div.controls {
-    position: absolute;
-    right: 0;
-    top: 150px;
-    width: 220px;
-    padding: 10px 16px;
-    /*background:#eee;*/
-    opacity:0.3;
-    border:1px solid #bbb;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    border-right:none;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  div.controls:hover {
-    opacity:1;
-    background:#f5f5f5;
-    border-color: transparent;
-  }
-  div.controls .control {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-    height:30px;
-  }
-  div.controls .control > * {
-    /*max-width: 50%;*/
-    flex: 1 1 auto;
-    margin:0;
-    margin-right: 16px;
-    box-sizing: border-box;
-  }
-  div.controls .control > :last-child {
-    margin-right: 0;
-  }
-  div.controls .control > select {
-    min-width: 6em;
-    align-items: center;
-    justify-content: center;
-  }
-  div.controls .control > input,
-  div.controls .control > select {
-    width: 0;
-    outline: none;
-  }
-  div.controls .control > input[type="number"],
-  div.controls .control > input[type="text"] {
-    background: none;
-    border: none;
-    padding: 4px 0;
-    font-size: 13px;
-    /*border-radius: 2px;*/
-  }
-  div.controls .control > input[type="number"] {
-    max-width: 60px;
-    text-align: right;
-    -moz-font-feature-settings:    'calt' 1, 'zero' 1, 'tnum' 1;
-    -ms-font-feature-settings:     'calt' 1, 'zero' 1, 'tnum' 1;
-    -o-font-feature-settings:      'calt' 1, 'zero' 1, 'tnum' 1;
-    -webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
-    font-feature-settings:         'calt' 1, 'zero' 1, 'tnum' 1;
-  }
-  div.controls .control > input[type="range"] {
-    /*max-width: 80%;*/
-    flex: 1 1 auto;
-    display: block;
-  }
-  div.controls .control > img.icon {
-    width: 16px;
-    height: 16px;
-    flex: 0 0 auto;
-    margin-right: 16px;
-    opacity: 0.8;
-  }
-
-  /*div.controls .control > input.foo {
-    background-color: hotpink;
-    border:none;
-    border-radius: 90px;
-  }*/
-
-
-/* narrow windows */
-@media only screen and (max-width: 1200px) {
-  div.live div.controls {
-    width: 200px;
-  }
-}
-@media only screen and (max-width: 1024px) {
-  div.live div.controls {
-    width: 100px;
-  }
-  div.controls .control > input[type="range"] {
-    width: 0;
-    flex: 0 1 0%;
-    display: none;
-  }
-  div.controls .control > input[type="number"] {
-    max-width: 100%;
-    flex: 1 1 auto;
-  }
-}
-@media only screen and (max-width: 740px) {
-  livesample.s1 {
-    font-size:4.5em;
-  }
-  div.live div.controls {
-    display: none;
-  }
-}
-@media only screen and (max-width: 565px) {
-  livesample.s1 {
-    font-size:4em;
-  }
-}
-@media only screen and (max-width: 414px) {
-  livesample.s1 {
-    font-size:3.4em;
-  }
-}
-    </style>
-  </head>
-  <body>
-
-    <div class="row menu">
-      <ul class="menu">
-        <li class="home"><a href="../">Inter UI</a></li>
-        <li><a class="download-link"
-          href="https://github.com/rsms/inter/releases/latest/"
-        >Download</a></li>
-        <li><a href="/inter/samples/" class="active">Samples</a></li>
-        <li><a href="../lab/">Playground</a></li>
-        <li><a href="https://github.com/rsms/inter/">Source</a></li>
-      </ul>
+---
+layout: default
+title: Samples
+---
+{%
+
+capture url_root
+  %}{% if site.safe == false %}/{% else %}/inter/{% endif
+%}{%
+endcapture %}{%
+
+for file in site.static_files %}{%
+  assign _path = file.path | remove_first: "/inter" %}{%
+  if _path == "/samples/index.css" %}{%
+    assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  elsif _path == "/res/bindings.js" %}{%
+    assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  elsif _path == "/res/graphplot.js" %}{%
+    assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
+  endif %}{%
+endfor
+
+%}
+<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
+<script src="{{url_root}}res/bindings.js?v={{ bindings_js_v }}"></script>
+<script src="{{url_root}}res/graphplot.js?v={{ graphplot_js_v }}"></script>
+
+<div class="row"><div>
+  <div class="live">
+
+    <div class="controls">
+      <div class="control">
+        <img title="Style" class="icon" src="icons/style.svg">
+        <select data-binding="style">
+          <option value="regular" default>Regular</option>
+          <option value="italic">Italic</option>
+          <option value="medium" default>Medium</option>
+          <option value="medium-italic">Medium Italic</option>
+          <option value="bold" default>Bold</option>
+          <option value="bold-italic">Bold Italic</option>
+          <option value="black" default>Black</option>
+          <option value="black-italic">Black Italic</option>
+        </select>
+      </div>
+      <div class="control">
+        <img title="Size" class="icon" src="icons/font-size.svg">
+        <input type="range" min="8" max="100" step="1" data-binding="font-size">
+        <input type="number" min="4" max="400" step="1" data-binding="font-size">
+      </div>
+      <div class="control">
+        <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg">
+        <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="letter-spacing">
+        <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing">
+      </div>
+      <canvas class="graphplot">Canvas not Supported</canvas>
+      <div class="control info">
+        <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a>
+      </div>
     </div>
 
-    <div class="row white"><div>
-      <div class="live">
-
-        <div class="controls">
-          <div class="control">
-            <img title="Style" class="icon" src="icons/style.svg">
-            <select data-binding="style">
-              <option value="regular" default>Regular</option>
-              <option value="italic">Italic</option>
-              <option value="medium" default>Medium</option>
-              <option value="medium-italic">Medium Italic</option>
-              <option value="bold" default>Bold</option>
-              <option value="bold-italic">Bold Italic</option>
-              <option value="black" default>Black</option>
-              <option value="black-italic">Black Italic</option>
-            </select>
-          </div>
-          <div class="control">
-            <img title="Size" class="icon" src="icons/font-size.svg">
-            <input type="range" min="8" max="100" step="1" data-binding="font-size">
-            <input type="number" min="4" max="400" step="1" data-binding="font-size">
-          </div>
-          <div class="control">
-            <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg">
-            <input type="range" min="-0.05" max="0.06" step="0.001" data-binding="letter-spacing">
-            <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing">
-          </div>
-          <!-- <div class="control">
-            <img class="icon" src="icons/font-size.svg">
-            <input type="text" class="foo" data-binding="foo">
-            <input type="text" class="foo" data-binding="foo">
-          </div> -->
-        </div>
+    <livesample contenteditable class="s1">
+      Fabulous typography encountering spring
+    </livesample>
 
-        <livesample contenteditable class="s1">
-          Fabulous typography encountering spring
-        </livesample>
+    <livesample contenteditable class="s2">
+      The user interface (UI), in the industrial design field of human-computer
+      interaction, is the space where interactions between humans and machines occur.
+    </livesample>
 
-        <livesample contenteditable class="s2">
-          The user interface (UI), in the industrial design field of human-computer
-          interaction, is the space where interactions between humans and machines occur.
-        </livesample>
-
-        <livesample contenteditable class="s3 col3">
+    <livesample contenteditable class="s3 col3">
 <p><b>Fire Island Beach</b> is a barrier of sand, stretching for twenty miles
 along the south coast of Long Island, and separating the Great South Bay
 from the Atlantic ocean.
@@ -350,89 +123,67 @@ When the tide is on the right moon and the wind has blown a gale from
 the southeast, the strand is entirely submerged, and people upon the
 main shore three miles away can see the surf breaking over the Beach
 hills.
-</p><p>
-Such a riot of sea and wind strews the whole extent of beach with
-whatever has been lost or thrown overboard, or torn out of sunken ships.
-Many a man has made a good week’s work in a single day by what he has
-found while walking along the Beach when the surf was down.
-</p><p>
-“The Captain” knew all this and had patrolled that Beach scores of
-times.
-</p><p>
-Ten years had passed since the first time which laid the habit of
-wandering along the surf-shore apparently in search of whatever the sea
-had cast up. Sometimes a spar, sometimes sheets of copper torn from a
-wreck and carried by a high surf far along the strand, sometimes a
-vessel’s gilded name, at other times only scattered drift-wood were the
-rewards of these lonely walks.
 </p>
-        </livesample>
-      </div>
-
-      <p class="sample-images">
-        <img src="img/01.png" srcset="img/01@2x.png 2x" width="888">
-        <img src="img/02.png" srcset="img/02@2x.png 2x" width="888">
-        <!-- <img src="img/02.svg" width="888"> -->
-        <img src="img/03.png" srcset="img/03@2x.png 2x" width="888">
-        <img src="img/04.png" srcset="img/04@2x.png 2x" width="888">
-        <img src="img/05.png" srcset="img/05@2x.png 2x" width="888">
-        <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888">
-        <img src="img/06.png" srcset="img/06@2x.png 2x" width="888">
-        <img src="img/07.png" srcset="img/07@2x.png 2x" width="888">
-        <img src="img/08.png" srcset="img/08@2x.png 2x" width="888">
-        <img src="img/09.png" srcset="img/09@2x.png 2x" width="888">
-        <img src="img/10.png" srcset="img/10@2x.png 2x" width="888">
-        <img src="img/11.png" srcset="img/11@2x.png 2x" width="888">
-        <img src="img/12.png" srcset="img/12@2x.png 2x" width="888">
-        <img src="img/13.png" srcset="img/13@2x.png 2x" width="888">
-        <img src="img/14.png" srcset="img/14@2x.png 2x" width="888">
-        <img src="img/15.png" srcset="img/15@2x.png 2x" width="888">
-      </p>
-      <p style="text-align:center">
-        <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a>
-      </p>
-    </div></div>
-
-    <script src="../index.js?v=2"></script>
-    <script src="bindings.js"></script>
-    <script type="text/javascript">(function(){
-
-
-
-// InterUIDynamicTracking takes the font size in points or pixels and returns
-// the compensating tracking in EM.
+    </livesample>
+    <p class="learn-more">
+      &nbsp;
+      <!-- <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a> -->
+    </p>
+  </div>
+
+  <p class="sample-images">
+    <img src="img/01.png" srcset="img/01@2x.png 2x" width="888">
+    <img src="img/02.png" srcset="img/02@2x.png 2x" width="888">
+    <!-- <img src="img/02.svg" width="888"> -->
+    <img src="img/03.png" srcset="img/03@2x.png 2x" width="888">
+    <img src="img/04.png" srcset="img/04@2x.png 2x" width="888">
+    <img src="img/05.png" srcset="img/05@2x.png 2x" width="888">
+    <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888">
+    <img src="img/06.png" srcset="img/06@2x.png 2x" width="888">
+    <img src="img/07.png" srcset="img/07@2x.png 2x" width="888">
+    <img src="img/08.png" srcset="img/08@2x.png 2x" width="888">
+    <img src="img/09.png" srcset="img/09@2x.png 2x" width="888">
+    <img src="img/10.png" srcset="img/10@2x.png 2x" width="888">
+    <img src="img/11.png" srcset="img/11@2x.png 2x" width="888">
+    <img src="img/12.png" srcset="img/12@2x.png 2x" width="888">
+    <img src="img/13.png" srcset="img/13@2x.png 2x" width="888">
+    <img src="img/14.png" srcset="img/14@2x.png 2x" width="888">
+    <img src="img/15.png" srcset="img/15@2x.png 2x" width="888">
+  </p>
+  <p style="text-align:center">
+    <a
+      href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/"
+      class="plain">Open these samples in Figma</a>
+  </p>
+</div></div>
+
+<script type="text/javascript">(function(){
+
+
+
+// InterUIDynamicTracking produces tracking in EM for the given font size
 //
 function InterUIDynamicTracking(fontSize, weightClass) {
   // if (!weightClass) { -- currently unused
   //   weightClass = 400
   // }
   //
-  // y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x)
-  // [6-35]  0.05877 .. -0.0101309  (13==0; stops growing around 30-35)
-  // See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788
-  //
-  return -0.01021241 + 0.3720623 * Math.pow(Math.E, (-0.2808687 * fontSize))
-
-  // y = 0.025 - (ln(x) * 0.01)
-  // return 0.025 - Math.log(fontSize) * 0.01
+  var a = -0.0149, b = 0.298, c = -0.23;
+  return a + b * Math.pow(Math.E, (c * fontSize))
 }
 
-
-function InterUIDynamicLeading(fontSize, weightClass) {
-  var lineHeight = Math.round(fontSize * 1.4)
-  //
-  // TODO
-  //
-  // console.log(
-  //   'lineHeight:', lineHeight,
-  //   `(${Math.round(fontSize * 1.45)})`,
-  // )
-
-  return lineHeight
+// InterUIDynamicLineHeight produces the line height for the given font size
+//
+function InterUIDynamicLineHeight(fontSize, weightClass) {
+  var l = 1.4
+  return Math.round(fontSize * l)
 }
 
 
 var bindings = new Bindings()
+var graph = new GraphPlot($('canvas.graphplot'))
+graph.setOrigin(-0.2, 0.8)
+graph.setScale(0.049, 5)
 
 var s2 = $('livesample.s2')
 
@@ -443,22 +194,39 @@ function updateWidth() {
   s2.style.maxWidth = Math.round(w) + 'px'
 }
 
+function updateTracking() {
+  var fontSize = bindings.value('font-size', 0)
+  var letterSpacing = InterUIDynamicTracking(fontSize, 400)
+  bindings.setValue('letter-spacing', letterSpacing)
+}
+
+function updateGraph() {
+  graph.clear()
+  var fontSize = bindings.value('font-size', 0)
+  var letterSpacing = bindings.value('letter-spacing')
+  graph.plotf(function(x) {
+    return InterUIDynamicTracking(x, 400)
+  })
+  var graphedFontSize = Math.min(24, fontSize) // clamp to [-inf,24]
+  graph.plotPoints([[graphedFontSize, letterSpacing]], '#000')
+}
+
 bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) {
   s2.style.letterSpacing = letterSpacing + 'em'
   updateWidth()
+  updateGraph()
+})
+bindings.setFormatter('letter-spacing', function(v) {
+  return v.toFixed(3)
 })
 
-bindings.configure('font-size', 18, 'int', function(fontSize, prevval) {
+bindings.configure('font-size', 16, 'float', function(fontSize, prevval) {
   s2.style.fontSize = fontSize + 'px'
   updateWidth()
+  updateTracking()
 
-  var letterSpacing = InterUIDynamicTracking(fontSize, 400)
-  letterSpacing = parseFloat(letterSpacing.toFixed(3)) // lower precision
-
-  var lineHeight = InterUIDynamicLeading(fontSize, 400)
+  var lineHeight = InterUIDynamicLineHeight(fontSize, 400)
   s2.style.lineHeight = lineHeight + 'px'
-
-  bindings.setValue('letter-spacing', letterSpacing)
 })
 
 bindings.configure('style', null, null, function (style) {
@@ -478,8 +246,14 @@ bindings.configure('style', null, null, function (style) {
 bindings.bindAllInputs('div.live .control input')
 bindings.bindAllInputs('div.live .control select')
 
-
-
-    })();</script>
-  </body>
-</html>
+// resize canvas when window resizes
+var resizeDebounceTimer = null
+window.addEventListener('resize', function(){
+  clearTimeout(resizeDebounceTimer)
+  resizeDebounceTimer = setTimeout(function(){
+    graph.autosize()
+    updateGraph()
+  }, 500)
+}, {passive:true, capture:false})
+
+})();</script>