app.jl.html

<h1 id="imag">US soil measurements</h1>
<div class="row">
    <div class="st-col col-12 col-sm st-module">
        <plotly id="i8wie" class="sync_data" data="W3siZ2J0eXBlIjoiTGluZSBDaGFydCIsIngiOiIkX3tzdGF0aW9uX2RhdGEuUFNfZGF0ZX0iLCJ5IjoiJF97c3RhdGlvbl9kYXRhLlBTfSIsInR5cGUiOiJzY2F0dGVyIiwibW9kZSI6ImxpbmVzIiwibmFtZSI6IlN1cmZhY2UgcHJlc3N1cmUgKFBTKSJ9LHsieCI6IiRfe3N0YXRpb25fZGF0YS5UU19kYXRlfSIsInkiOiIkX3tzdGF0aW9uX2RhdGEuVFN9IiwidHlwZSI6InNjYXR0ZXIiLCJuYW1lIjoiU3VyZmFjZSB0ZW1wZXJhdHVyZSAgKFRTKSJ9LHsieCI6IiRfe3N0YXRpb25fZGF0YS5XUzEwTV9kYXRlfSIsInkiOiIkX3tzdGF0aW9uX2RhdGEuV1MxME19IiwidHlwZSI6InNjYXR0ZXIiLCJuYW1lIjoiV2luZCBzcGVlZCAoV1MxME0pIn0seyJ4IjoiJF97c3RhdGlvbl9kYXRhLlBSRUNUT1RfZGF0ZX0iLCJ5IjoiJF97c3RhdGlvbl9kYXRhLlBSRUNUT1R9IiwidHlwZSI6InNjYXR0ZXIiLCJuYW1lIjoiUHJlY2lwaXRhdGlvbiAoUFJFQ1RPVCkifV0=" config="e30=" layout="eyJtYXJnaW4iOnsiYiI6IjMwIiwiciI6MCwibCI6IjMwIiwidCI6IjAifSwibGVnZW5kIjp7Im9yaWVudGF0aW9uIjoiaCIsInkiOiIxLjEifSwicGxvdF9iZ2NvbG9yIjoiIzEwMTgyNyIsInBhcGVyX2JnY29sb3IiOiIjMTAxODI3IiwiZm9udCI6eyJjb2xvciI6IiNmZmZmZmYifX0="></plotly>
        <plotly id="igbvk" class="sync_data" data="W3siZ2J0eXBlIjoiU2NhdHRlciBNYXBib3giLCJsYXQiOiIkX3tzdGF0aW9uX2xhdH0iLCJsb24iOiIkX3tzdGF0aW9uX2xvbn0iLCJtb2RlIjoibWFya2VycyIsInR5cGUiOiJzY2F0dGVybWFwYm94IiwibmFtZSI6IlRyYWNlIiwibWFya2VyIjp7ImNvbG9yIjoiJF97bWFwY29sb3J9In0sInoiOiIkX3ttYXBjb2xvcn0ifV0=" config="e30=" layout="eyJkcmFnbW9kZSI6Inpvb20iLCJtYXBib3giOnsic3R5bGUiOiJvcGVuLXN0cmVldC1tYXAiLCJjZW50ZXIiOnsibGF0IjozOCwibG9uIjotOTB9LCJ6b29tIjozfSwibWFyZ2luIjp7InIiOjAsInQiOjAsImIiOjAsImwiOjB9fQ=="></plotly>
    </div>
    <div id="i6zah" class="st-col st-module st-gap-md">
        <h5>Controls<br></h5>
        <q-select id="i80x" label="Station" :options="codes" v-model="selected_code"></q-select>
        <q-select id="ix5fg" label="Metrics" :options="metrics" :multiple="true" :use-chips="true" v-model="selected_metrics"></q-select>
        <p class="st-field-label">Points per line</p>
        <q-slider id="i8w53" v-model="N" color="primary" :label="true" :max="3000" :min="96" :step="100" :markers="true"></q-slider>
        <q-select id="il4dw" label="Map metric" :options="metrics" v-model="map_metric"></q-select>
        <q-input iscomposite="true" id="idh94" v-model="date" :clearable="true" :filled="true" label="Date">
            <q-icon id="i0q81" class="cursor-pointer" name="event">
                <q-popup-proxy id="iw1kn">
                    <q-date id="i39bm" v-model="date" mask="YYYY-MM-DD" :no-unset="true" :today-btn="true"></q-date>
                </q-popup-proxy>
            </q-icon>
        </q-input>
        <h6 id="iuttf">App info</h6>
        <p>This app presents the data in the <a data-cke-saved-href="https://www.kaggle.com/datasets/cdminix/us-drought-meteorological-data" target="_blank" href="https://www.kaggle.com/datasets/cdminix/us-drought-meteorological-data">US Drought Meteorological Data dataset</a>, which contains measurements of meteorological quantities taken across 56000 stations in the US.</p>
        <p>To work with such a large dataset (2GB in CSV format), this app uses the Arrow file format to load the data, and server-side resampling for plotting.</p>
    </div>
</div>