| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>SBIBM Reference Posterior Viewer</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <main class="app" id="app"> |
| <header class="hero"> |
| <div> |
| <p class="eyebrow">SBIBM reference posteriors</p> |
| <h1>Pairplot viewer</h1> |
| <p class="lede"> |
| Browser-only visualization of public reference posterior parquet files from |
| <code>sbi-dev/sbibm</code>. |
| </p> |
| </div> |
| <a class="repo-link" href="https://huggingface.co/datasets/sbi-dev/sbibm" target="_blank" rel="noreferrer"> |
| Dataset repo |
| </a> |
| </header> |
|
|
| <section class="panel plot-panel" aria-label="Pairplot viewer"> |
| <div class="toolbar"> |
| <label class="task-control"> |
| <span>Task</span> |
| <select id="taskSelect"></select> |
| </label> |
| <label> |
| <span>Observation</span> |
| <select id="observationSelect"></select> |
| </label> |
| <button id="loadButton" type="button">Load</button> |
| <div class="legend"> |
| <span><i class="dot sample"></i>sample</span> |
| <span><i class="dot truth"></i>true θ</span> |
| </div> |
| </div> |
| <div class="status" id="status">Click Load to fetch posterior samples.</div> |
| <div class="plot-scroll"> |
| <canvas id="plotCanvas" width="900" height="900"></canvas> |
| </div> |
| </section> |
|
|
| <details class="panel advanced"> |
| <summary>Advanced options</summary> |
| <div class="advanced-body"> |
| <div class="task-info" id="taskInfo"></div> |
| <label class="points-control"> |
| <span>Max points</span> |
| <select id="pointLimitSelect"> |
| <option value="1000">1,000</option> |
| <option value="2500" selected>2,500</option> |
| <option value="5000">5,000</option> |
| <option value="10000">10,000</option> |
| </select> |
| </label> |
| <div class="dimensions"> |
| <div class="panel-title">Dimensions</div> |
| <p class="hint">Select 2 to 12 parameter dimensions. High-dimensional tasks default to the first four; large grids scroll.</p> |
| <div class="dimension-grid" id="dimensionGrid"></div> |
| </div> |
| </div> |
| </details> |
| </main> |
|
|
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
