Published
Edited
Jun 4, 2019
md`# MapScript UI`
import {svelte, render, readable, derived, observe, Stores} from '@ajbouh/svelte-experiments'
import {Results} from '8a16453ac64d7b1a' // '38ee701f49402801'
import {compile, grammar, semantics} from '@ajbouh/mapscript'
import {
viewof positions,
xAnchorUpdate,
viewof xAnchor,
yAnchorUpdate,
viewof yAnchor,
xRangeExtent,
yRangeExtent,
updatePositions,
drag,
update,
} with {
} from '@ajbouh/mapscript-layout'
import {World, editor} from '6e557ad8d4923730'
import {query} from 'bd26bdcad5cbe1c8'
// x = html`<style>
// .toolbar {
// display: grid;
// width: 100%;
// background: green;
// grid-template-columns: 1fr min-content min-content;
// }
// .viewer .toolbar .input,
// .viewer .toolbar button {
// display: inline-block;
// }
// .toolbar .CodeMirror-empty.CodeMirror-focused { outline: none; }
// .toolbar .CodeMirror pre.CodeMirror-placeholder { color: #999; }
// </style>
// <div class="toolbar"><span class="input">${search.element}</span><button>graph</button><button>inspector</button>`
// rt = render(Results, {
// results: derived(
// [observe(search.element), Stores.resolvePromises(world.generator)],
// ([$q, $c], set) => {
// const x = Array.from(query($q, $c))
// console.log("x", x, $q, $c)
// set(x)
// }),
// height: '40em',
// attrHighlightFilter: attr => attr.meta.selected,
// })
update
xAnchor
yAnchor
updatePositions
positions
viewof positions
xAnchorUpdate
yAnchorUpdate
d3 = require("d3@^5.8")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
