Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Explore the five-layer Vase Framework: how data quality connects autonomous-driving tasks to performance goals."> | |
| <title>Vase — Explore the Framework</title> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%232d6658' d='M4 3h24C15 15 17 20 28 29H4C15 20 17 15 4 3Z'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="styles.css"><script src="app.js" defer></script> | |
| </head> | |
| <body> | |
| <a class="skip" href="#explorer">Skip to framework</a> | |
| <header class="topbar"><a class="brand" href="#"><svg viewBox="0 0 30 36" aria-hidden="true"><path d="M2 2h26C17 14 17 22 28 34H2C13 22 13 14 2 2Z"/></svg><span>VASE<span class="brand-sub">A data quality perspective</span></span></a><nav aria-label="Main navigation"><a class="current" href="#explorer">Framework</a><a href="#context">In context</a><a href="#research">The research <span aria-hidden="true">↗</span></a></nav><span class="edition">INTERACTIVE RESEARCH EXPLORER</span></header> | |
| <main> | |
| <section class="intro"><div><p class="eyebrow"><span class="small-dot"></span> AUTONOMOUS DRIVING · DATA QUALITY</p><h1>Better decisions<br>begin with <em>better data.</em></h1><p class="intro-copy">Explore how the Vase Framework connects the data, data quality<br class="desktop-break"> to the tasks we perform and the goals we want to achieve.</p></div><div class="intro-aside"><span class="section-no">01 / THE FRAMEWORK</span><p>Five layers.<br>Data quality perspective.</p><button id="start-tour" class="dark-button">Take a guided tour <span aria-hidden="true">↗</span></button></div></section> | |
| <section id="explorer" class="explorer" aria-label="Interactive Vase Framework"> | |
| <div class="explorer-bar"><div class="mode-group" role="group" aria-label="Explorer view"><button id="mode-layers" aria-pressed="true">Explore layers</button><button id="mode-relations" aria-pressed="false">See relationships</button></div><span id="explorer-hint">Select a layer to look inside <span aria-hidden="true">↓</span></span></div> | |
| <div class="explorer-body"> | |
| <div class="diagram-area"><div class="diagram-top"><span class="tiny-label">THE VASE FRAMEWORK</span><span class="figure-tag"></span></div> | |
| <div class="vase-shell"> | |
| <svg class="vase-svg" viewBox="0 0 580 500" aria-hidden="true"> | |
| <defs><linearGradient id="vase-wash" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#e4eadd"/><stop offset=".5" stop-color="#f2e8cd"/><stop offset="1" stop-color="#f4ded9"/></linearGradient><marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto-start-reverse"><path d="M0 0L6 3L0 6" fill="none" stroke="#81938b"/></marker></defs> | |
| <path class="vase-outline" d="M106 24H474C396 128 376 189 379 250C381 318 414 384 474 471H106C166 384 199 318 201 250C204 189 184 128 106 24Z"/> | |
| <path class="flow-line" d="M84 78C31 144 30 351 83 424" marker-end="url(#arrow)"/> | |
| <path class="flow-line" d="M496 425C549 351 550 145 497 78" marker-end="url(#arrow)"/> | |
| <text class="flow-label" transform="translate(25 336) rotate(-90)">DATA SUPPORTS TASKS</text><text class="flow-label" transform="translate(560 152) rotate(90)">GOALS GUIDE REQUIREMENTS</text> | |
| </svg> | |
| <div class="vase-layers" role="group" aria-label="Five framework layers, from Data to Goal"> | |
| <button class="layer data" data-layer="data" aria-pressed="true"><span class="layer-number">01</span><span><strong>Data</strong><small>Sources & modalities</small></span><span class="layer-arrow">↗</span></button> | |
| <button class="layer quality" data-layer="quality" aria-pressed="false"><span class="layer-number">02</span><span><strong>Data Quality</strong><small>Dimensions & metrics</small></span><span class="layer-arrow">↗</span></button> | |
| <button class="layer task" data-layer="task" aria-pressed="false"><span class="layer-number">03</span><span><strong>Task</strong><small>The central connection</small></span><span class="layer-arrow">↗</span></button> | |
| <button class="layer application" data-layer="application" aria-pressed="false"><span class="layer-number">04</span><span><strong>Application</strong><small>Tasks working together</small></span><span class="layer-arrow">↗</span></button> | |
| <button class="layer goal" data-layer="goal" aria-pressed="false"><span class="layer-number">05</span><span><strong>Goal</strong><small>Performance objectives</small></span><span class="layer-arrow">↗</span></button> | |
| </div></div><p class="diagram-caption">Task-Centric and Data Quality Framework.<br><span>Quality is meaningful when it fits a purpose.</span></p> | |
| </div> | |
| <div class="detail-area" id="detail-area"><div id="layer-content" aria-live="polite" aria-atomic="true"></div><div id="relationship-content" hidden><p class="eyebrow">CONNECTED BY DESIGN</p><h2>Follow the relationships.</h2><p class="detail-intro">Explore a connection to see why the layers belong together.</p><div class="relation-buttons" role="group" aria-label="Framework relationships"><button data-relation="0" aria-pressed="true">Data Quality <span>↔</span> Task</button><button data-relation="1" aria-pressed="false">Task <span>↔</span> Application</button><button data-relation="2" aria-pressed="false">Goal <span>↔</span> Data Quality</button></div><div id="relation-detail" aria-live="polite"></div></div></div> | |
| </div> | |
| <div id="tour" class="tour" hidden><div><span class="tiny-label" id="tour-progress">STEP 1 OF 5</span><p id="tour-prompt"></p></div><div class="tour-controls"><button id="tour-exit" class="text-button">Exit tour</button><button id="tour-prev" class="outline-button">← Back</button><button id="tour-next" class="dark-button">Next layer →</button></div></div> | |
| <div class="explorer-footer"><span><span class="small-dot"></span> Task-centric. Quality-aware. Goal-oriented.</span><a href="https://arxiv.org/html/2506.17346v1#S2" target="_blank" rel="noopener">Read the framework in the paper ↗</a></div> | |
| </section> | |
| <section id="context" class="context-section"><div class="context-heading"><div><p class="eyebrow">02 / PUT IT IN CONTEXT</p><h2>Same data.<br><em>Different requirements.</em></h2></div><p>Change the purpose and see what data quality dimension matters.</p></div> | |
| <div class="scenario-tabs" role="group" aria-label="Choose an illustrative scenario"><button data-scenario="0" aria-pressed="true"><span>01</span> Detect an obstacle</button><button data-scenario="1" aria-pressed="false"><span>02</span> Plan a path</button><button data-scenario="2" aria-pressed="false"><span>03</span> Review an incident</button></div> | |
| <div id="scenario-content" aria-live="polite"></div> | |
| </section> | |
| <section id="research" class="research-section"><div><p class="eyebrow">03 / THE RESEARCH BEHIND THE EXPLORER</p><h2>A framework with<br>a path to evidence.</h2><p>This explorer introduces the framework. The redundancy study develops one dimension through object-detection experiments.</p></div><div class="paper-links"><a href="https://arxiv.org/abs/2506.17346" target="_blank" rel="noopener"><span class="paper-label">THE FOUNDATION · 2025 <span>↗</span></span><h3>A Novel Multi-layer Task-centric and Data Quality Framework for Autonomous Driving</h3><p>Yuhan Zhou · Haihua Chen · Kewei Sha</p></a><a href="https://arxiv.org/abs/2603.06544" target="_blank" rel="noopener"><span class="paper-label">THE REDUNDANCY STUDY · 2026 <span>↗</span></span><h3>Modeling and Measuring Redundancy in Multisource Multimodal Data for Autonomous Driving</h3><p>Yuhan Zhou · Mehri Sattari · Haihua Chen · Kewei Sha</p></a></div></section> | |
| </main> | |
| <footer><span class="footer-brand">VASE / FRAMEWORK EXPLORER</span><p>Framework and layer order adapted from Zhou, Chen & Sha (2025), Fig. 1 and §II.<br>Definitions condensed for this interface. Examples and walkthroughs are explanatory adaptations. <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Source: CC BY 4.0</a>.</p><a href="#">Back to top ↑</a></footer> | |
| <noscript><p class="noscript">Enable JavaScript to explore the interactive layers. <a href="https://arxiv.org/html/2506.17346v1#S2">Read the accessible framework description in the paper.</a></p></noscript> | |
| </body></html> | |