mosaic_example.md

Generate Static Dashboards using Mozaic

Select an Example

<style> .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid var(--md-primary-fg-color); /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } select#examples { padding: 1em; border-color: var(--md-primary-fg-color); } </style> Aeromagnetic Survey Airline Travelers Athletes Athlete Birth Waffle Athlete Height Intervals Axes & Gridlines Bias Parameter Contours Crossfilter Density Groups Density 1D Density 2D Driving Shifts into Reverse Earthquakes Feed Earthquakes Globe Facet Interval Flights 200k Flights 10M Flights Density Flights Hexbin Gaia Star Catalog Line Density Line Line Multi-Series Linear Regression Linear Regression 10M Legends Mark Types Moving Average Normalize Stocks NYC Taxi Rides Observable Latency Overview + Detail Pan + Zoom Population Arrows Presidential Opinion Protein Design Region Tests Seattle Temperatures Sorted Bars Scatter Plot Matrix Symbols Table Unemployment U.S. County Map U.S. State Map Voronoi Walmart Openings Seattle Weather Wind Map WNBA Shot Chart

!!! note ""

💡 Mozaic Dashboards are generated on the fly from a yaml configuration file using Mosaic Javascript Library. They are interactive and based on parquet files. Know more [below](#more-on-mozaic) on Mozaic.

=== "Generated Dashboard"

<div id="view"></div>

=== "YAML Configuration"

<div id="yaml" style="white-space: pre-wrap;"></div>

---

More on Mozaic

!!! note ""

[Mosaic javascript library](https://idl.uw.edu/mosaic/) can generate a dashboard:

- from a simple yaml configuration which defines
    - the parquet files to use
    - the interactive elements (inputs and dropdowns)
    - the plots
- with interactivity thanks to duckdb
- with ultra-fast cross-filtering

Above, you can select some yaml files examples provided on Mosaic Website.
At selection, it will:

- initialize a duckdb wasm database in browser
- create tables in the database by loading the parquet files
- generate the html of the inputs and plots.

The generated dashboard is interactive by changing the inputs or selecting areas in the plot.
Under the hood, duckdb queries are made on the fly before rendering the changes.

<script type="module"> import { load } from '../assets/mosaic.js'; const view = document.querySelector('#view'); const yaml = document.querySelector('#yaml'); const exampleMenu = document.querySelector('#examples'); const baseURL = 'https://idl.uw.edu/mosaic/'; async function loadDashboard() { const specURL = `${baseURL}specs/yaml/${exampleMenu.value}.yaml`; await load(specURL, baseURL, view, yaml); } exampleMenu.addEventListener('change', loadDashboard); loadDashboard(); </script>