diff --git a/package-lock.json b/package-lock.json
index 97d22b6..38b3a38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,28 +14,32 @@
         "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "@rollup/plugin-typescript": "^8.0.0",
-        "@tsconfig/svelte": "^1.0.13",
+        "@tsconfig/svelte": "^2.0.1",
         "@types/d3-array": "^2.12.1",
+        "@types/d3-contour": "^2.0.0",
+        "@types/d3-geo": "^2.0.0",
         "@types/d3-random": "^2.2.0",
         "@types/d3-scale": "^3.3.0",
         "@types/d3-scale-chromatic": "^2.0.0",
         "@types/katex": "^0.11.0",
         "d3-array": "latest",
-        "d3-random": "^2.2.2",
+        "d3-contour": "^3.0.1",
+        "d3-geo": "^3.0.1",
+        "d3-random": "^3.0.1",
         "d3-scale": "latest",
         "d3-scale-chromatic": "^3.0.0",
         "katex": "^0.13.11",
         "ml-matrix": "latest",
-        "prettier": "^2.3.0",
+        "prettier": "^2.3.1",
         "prettier-plugin-svelte": "^2.3.0",
-        "rollup": "^2.50.4",
+        "rollup": "^2.51.1",
         "rollup-plugin-css-only": "^3.1.0",
         "rollup-plugin-livereload": "^2.0.0",
         "rollup-plugin-svelte": "^7.0.0",
         "rollup-plugin-terser": "^7.0.0",
         "svelte": "^3.38.2",
-        "svelte-check": "^2.0.0",
-        "svelte-collapsible": "^0.0.9",
+        "svelte-check": "^2.1.0",
+        "svelte-collapsible": "^0.1.1",
         "svelte-preprocess": "^4.7.3",
         "tslib": "^2.0.0",
         "typescript": "^4.3.2"
@@ -262,9 +266,9 @@
       "dev": true
     },
     "node_modules/@tsconfig/svelte": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.13.tgz",
-      "integrity": "sha512-5lYJP45Xllo4yE/RUBccBT32eBlRDbqN8r1/MIvQbKxW3aFqaYPCNgm8D5V20X4ShHcwvYWNlKg3liDh1MlBoA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+      "integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
       "dev": true
     },
     "node_modules/@types/d3-array": {
@@ -273,6 +277,25 @@
       "integrity": "sha512-hN879HLPTVqZV3FQEXy7ptt083UXwguNbnxdTGzVW4y4KjX5uyNKljrQixZcSJfLyFirbpUokxpXtvR+N5+KIg==",
       "dev": true
     },
+    "node_modules/@types/d3-contour": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-2.0.4.tgz",
+      "integrity": "sha512-WMac1xV/mXAgkgr5dUvzsBV5OrgNZDBDpJk9s3v2SadTqGgDRirKABb2Ek2H1pFlYVH4Oly9XJGnuzxKDduqWA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-array": "^2",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-2.0.4.tgz",
+      "integrity": "sha512-kP0LcPVN6P/42hmFt0kZm93YTscfawZo6tioL9y0Ya2l5rxaGoYrIG4zee+yJoK9cLTOc8E8S5ExqTEYVwjIkw==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/d3-random": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.1.tgz",
@@ -306,6 +329,12 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "node_modules/@types/katex": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.11.1.tgz",
@@ -559,6 +588,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-contour": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-3.1.0.tgz",
+      "integrity": "sha512-vV3xtwrYK5p1J4vyukr70m57mtFTEQYqoaDC1ylBfht/hkdUF0nfWZ1b3V2EPBUVkUkoqq5/fbRoBImBWJgOsg==",
+      "dev": true,
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -568,6 +609,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dev": true,
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -581,10 +634,13 @@
       }
     },
     "node_modules/d3-random": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
-      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==",
-      "dev": true
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-scale": {
       "version": "4.0.2",
@@ -1536,9 +1592,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.61.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.61.0.tgz",
-      "integrity": "sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==",
+      "version": "1.62.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz",
+      "integrity": "sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -1721,19 +1777,18 @@
       }
     },
     "node_modules/svelte-collapse": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/svelte-collapse/-/svelte-collapse-0.0.2.tgz",
-      "integrity": "sha512-9RCiMOiHCOBC1Ah5M7u0STG7HhPBZPwTcGo9iXXQEKWXsLdIVFigVXARr4aG7CwwEXqT2gioVT8hjscGDIh7WQ==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-collapse/-/svelte-collapse-0.0.4.tgz",
+      "integrity": "sha512-TXG836Uhn6SzDFsB3PIHBTormEl45Eb0denD34nYz1zM4PeArh5OYN6G3ZGmMHpG7DAHhRaEX5ikDpHfk2JNcA==",
       "dev": true
     },
     "node_modules/svelte-collapsible": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/svelte-collapsible/-/svelte-collapsible-0.0.9.tgz",
-      "integrity": "sha512-GVLnPSuh2P1JaYpk/KpONakwSrr11577DyjRsHZFqLEq0kTtZWxm2qN5jM4k0VA1DDDrlkrH281NGpmkA9u+YQ==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/svelte-collapsible/-/svelte-collapsible-0.1.1.tgz",
+      "integrity": "sha512-Kos33wOf3zAaJKPY0ZFlOxXKBhUSQM+XSojKTd7g/TNdQWwKubmSUoIKf0H8X60KTcwVsWtWSzniBPFtUCHruQ==",
       "dev": true,
       "dependencies": {
-        "sirv-cli": "^1.0.0",
-        "svelte-collapse": "0.0.2"
+        "svelte-collapse": "^0.0.4"
       }
     },
     "node_modules/svelte-preprocess": {
diff --git a/package.json b/package.json
index 741de3b..7c438e0 100644
--- a/package.json
+++ b/package.json
@@ -12,28 +12,32 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
-    "@tsconfig/svelte": "^1.0.13",
+    "@tsconfig/svelte": "^2.0.1",
     "@types/d3-array": "^2.12.1",
+    "@types/d3-contour": "^2.0.0",
+    "@types/d3-geo": "^2.0.0",
     "@types/d3-random": "^2.2.0",
     "@types/d3-scale": "^3.3.0",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/katex": "^0.11.0",
     "d3-array": "latest",
-    "d3-random": "^2.2.2",
+    "d3-contour": "^3.0.1",
+    "d3-geo": "^3.0.1",
+    "d3-random": "^3.0.1",
     "d3-scale": "latest",
     "d3-scale-chromatic": "^3.0.0",
     "katex": "^0.13.11",
     "ml-matrix": "latest",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "prettier-plugin-svelte": "^2.3.0",
-    "rollup": "^2.50.4",
+    "rollup": "^2.51.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.38.2",
-    "svelte-check": "^2.0.0",
-    "svelte-collapsible": "^0.0.9",
+    "svelte-check": "^2.1.0",
+    "svelte-collapsible": "^0.1.1",
     "svelte-preprocess": "^4.7.3",
     "tslib": "^2.0.0",
     "typescript": "^4.3.2"
diff --git a/src/App.svelte b/src/App.svelte
index 5399b54..a4efe8a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -31,6 +31,7 @@ Future thoughts:
   import PlotMarginals from "./PlotMarginals.svelte";
   import PlotKernelSlices from "./PlotKernelSlices.svelte";
   import PlotBivariateCovariance from "./PlotBivariateCovariance.svelte";
+  import PlotCovarianceFunction from "./PlotCovarianceFunction.svelte";
   import RandomSample from "./RandomSample.svelte";
   import Animation from "./Animation.svelte";
   import ConfigModel from "./ConfigModel.svelte";
@@ -63,6 +64,7 @@ Future thoughts:
     confidence: true,
     samples: true,
     marginals: true,
+    fullcov: false,
     withNoise: false,
   };
 
@@ -121,6 +123,8 @@ Future thoughts:
   $: covProps = covEllipse(covY1Y2);
 
   let points = [];
+
+  let widthPlotMarginals: number;
 </script>
 
 <div>
@@ -170,7 +174,7 @@ Future thoughts:
         observations on which to condition the Gaussian process by
         <strong>clicking</strong>
         anywhere in the plot; these observations are drawn as black circles &#9899;.
-        To remove an observation, click on it again.
+        To remove an observation again, click on it.
         <small
           ><em>Note:</em> Two observations too close to each other can lead to numerical
           issues and long compute times. If the app seems to hang, reload the page
@@ -228,7 +232,11 @@ Future thoughts:
       <div class="chart" style="grid-area: bicovmatrix;">
         <ShowBivariateCovarianceMatrix {atX1} {atX2} />
       </div>
-      <div class="chart" style="grid-area: marginals;">
+      <div
+        class="chart"
+        style="grid-area: marginals;"
+        bind:clientWidth={widthPlotMarginals}
+      >
         <PlotMarginals
           {xs}
           {means}
@@ -245,6 +253,20 @@ Future thoughts:
         <PlotBivariateCovariance {atX1} {atX2} {covProps} {plotProps} />
       </div>
     </div>
+    <label
+      ><input type="checkbox" bind:checked={plotProps.fullcov} />Visualize full
+      covariance function <Katex
+        math={"\\operatorname{cov}(f(x),f(x'))"}
+      /></label
+    >
+    {#if plotProps.fullcov}
+      <div
+        class="fullcovchart"
+        style="width: {widthPlotMarginals}px; height: {widthPlotMarginals}px;"
+      >
+        <PlotCovarianceFunction {covMat} />
+      </div>
+    {/if}
   </div>
 
   <CollapsibleCard open={true}>
@@ -333,6 +355,9 @@ Future thoughts:
     min-width: 200px;
     /* background-color: #fafafa; */
   }
+  .fullcovchart {
+    background-color: #fafafa; /* TODO */
+  }
   .squarechart {
     width: 350px;
     height: 350px;
diff --git a/src/PlotCovarianceFunction.svelte b/src/PlotCovarianceFunction.svelte
new file mode 100644
index 0000000..dcb7a0e
--- /dev/null
+++ b/src/PlotCovarianceFunction.svelte
@@ -0,0 +1,135 @@
+<!-- Copyright (c) 2021 ST John -->
+<script>
+  // TODO: make contour plot actually react to window resizing
+  // TODO: fix color scale
+
+  import { onMount } from "svelte";
+  import { scaleLinear, scaleSequential } from "d3-scale";
+  import { interpolateBlues as colorScale } from "d3-scale-chromatic";
+  import { contours } from "d3-contour";
+  import { geoPath } from "d3-geo";
+  // import { geoIdentity } from "d3-geo";
+  import { x1, x2 } from "./store.js";
+  import { linspace } from "./mymath.js";
+  import { getSVGpoint } from "./getsvgpoint.js";
+  import Axes from "./Axes.svelte";
+  import XIndicatorCross from "./XIndicatorCross.svelte";
+  export let covMat;
+
+  let svg;
+  let width = 300;
+  let height = 300;
+
+  const padding = { top: 25, right: 15, left: 50 }; // to match PlotMarginals
+  padding.bottom = padding.left + padding.right - padding.top; // to square up
+
+  $: xTicks = size > 180 ? linspace(0, 6, 7) : linspace(0, 6, 3);
+  $: yTicks = xTicks;
+
+  // fix aspect ratio to be square:
+  $: size = Math.min(width, height);
+
+  $: xScale = scaleLinear()
+    .domain([minX, maxX])
+    .range([padding.left, size - padding.right]);
+
+  $: yScale = scaleLinear()
+    .domain([maxX, minX])
+    .range([size - padding.bottom, padding.top]);
+
+  $: minX = Math.min.apply(null, xTicks);
+  $: maxX = Math.max.apply(null, xTicks);
+
+  $: contourGenerator = contours().size([covMat.rows, covMat.columns]);
+  $: flatCov = covMat.transpose().to1DArray();
+  let numContours = 15;
+  $: contourGeo = linspace(-1, 1, numContours).map((threshold) =>
+    contourGenerator.contour(flatCov, threshold)
+  );
+
+  // https://observablehq.com/@d3/contours
+  // Converts from grid coordinates (indexes) to screen coordinates (pixels).
+  function createTransform(xScale, yScale) {
+    return ({ type, value, coordinates }) => {
+      return {
+        type,
+        value,
+        coordinates: coordinates.map((rings) => {
+          return rings.map((points) => {
+            return points.map(([x, y]) => [
+              xScale((x / covMat.rows) * 6 + 0),
+              yScale((y / covMat.rows) * 6 + 0),
+            ]);
+          });
+        }),
+      };
+    };
+  }
+  $: mytransform = createTransform(xScale, yScale);
+  $: contourPaths = contourGeo.map(mytransform).map(geoPath());
+
+  $: color = scaleSequential([0, contourPaths.length - 1], colorScale);
+  onMount(resize);
+  $: console.log("width", width, "height", height);
+
+  function resize() {
+    ({ width, height } = svg.getBoundingClientRect());
+  }
+  function handleMousemove(event) {
+    const pt = getSVGpoint(svg, event);
+    const newX = xScale.invert(pt.x);
+    const newY = yScale.invert(pt.y);
+    if (event.shiftKey) {
+      x1.set(newX);
+      x2.set(newY);
+    } else {
+      x1.set(newY);
+      x2.set(newX);
+    }
+  }
+</script>
+
+<svelte:window on:resize={resize} />
+
+<div id="container">
+  <svg bind:this={svg} on:mousemove={handleMousemove}>
+    {#each contourPaths as contourPath, i}
+      <path d={contourPath} style="fill: {color(i)};" />
+    {/each}
+
+    <Axes
+      {xScale}
+      {yScale}
+      {xTicks}
+      {yTicks}
+      width={size}
+      height={size}
+      {padding}
+    />
+
+    <XIndicatorCross
+      {xScale}
+      {yScale}
+      x={$x1}
+      style="stroke: red; stroke-width: 2"
+    />
+    <XIndicatorCross
+      {xScale}
+      {yScale}
+      x={$x2}
+      style="stroke: orange; stroke-width: 2"
+    />
+  </svg>
+</div>
+
+<style>
+  #container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/XIndicatorCross.svelte b/src/XIndicatorCross.svelte
new file mode 100644
index 0000000..62d3a76
--- /dev/null
+++ b/src/XIndicatorCross.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let xScale, yScale, x, style;
+
+  $: minX = 0; // xs[0];
+  $: maxX = 6; // xs[xs.length - 1];
+</script>
+
+<line
+  x1={xScale(x)}
+  x2={xScale(x)}
+  y1={yScale(minX)}
+  y2={yScale(maxX)}
+  {style}
+/>
+<line
+  x1={xScale(minX)}
+  x2={xScale(maxX)}
+  y1={yScale(x)}
+  y2={yScale(x)}
+  {style}
+/>
diff --git a/src/version.js b/src/version.js
index 218ef46..f334513 100644
--- a/src/version.js
+++ b/src/version.js
@@ -1 +1 @@
-export default "0.3.2";
+export default "0.4.0-dev";