<iframe id="viz" src="https://hub.graphistry.com/graph/graph.html?dataset=Miserables" />
<script>
document.addEventListener("DOMContentLoaded", function () {

    graphistryJS(document.getElementById('viz'))
       .pipe(
          tap((g) => {
            console.log('iframe ready; opening filters, pausing, then adding columns');
            document.getElementById('controls').style.opacity=1.0);
            window.g = g;
          }),
          openFilters,
          delay(5000),
          switchMap((g) => {
            console.log('filters opened & delayed; adding columns');
            const columns = [
                ['edge', 'highways', [66, 101, 280], 'number'],
                ['point', 'theme parks', ['six flags', 'disney world', 'great america'], 'string']
            ];
            return (
                 forkJoin(columns.map(([type, name, values, type]) => addColumn(type, name, values, type)))
                 .pipe(map(() => g)))
       })
       .subscribe(
           (g) => { console.log('event', g); },
           (err) => { console.log('error', err); },
          () => { console.log('all done'); }
        });
</script>