here to learn
Published unlisted
Edited
Nov 17, 2020
4 stars
import {fromV1, parser} from '@bryangingechen/fromv1'
import {importModule} from '@bryangingechen/dynamic-import-polyfill'
myModule = importModule(
`https://api.observablehq.com/d/${getNotebookId(document.baseURI)}.js`
)
fromV1(myModule)
parsedArray = fromV1(myModule).map((d) => ({parsed:parser.parseCell(d.value), ...d}))
{
const div = html`<div>Hey there, I'm a div element!<br>
<span id="child">`;
const child = div.querySelector('#child');
const update = () => {
const myID = +div.parentNode.id.slice(1);
child.innerText = `My cell id is: ${myID}, and here's what I know about myself:
${JSON.stringify(parsedArray.find(({id})=> id === myID))}`;
}
div.addEventListener('attached', update);
return div;
}
nbJSON = fetch(
'https://gist.githubusercontent.com/bryangingechen/cdcecfd40c3e4863b2b3a0970b053c2f/raw/789d29cc5297cc1f5ec181758f3b25f46a555a20/8d72f1a5131e5033.json'
).then(function(response) {
return response.json();
})
parsedArray2 = nbJSON.nodes.map((d) => ({parsed:parser.parseCell(d.value), ...d}))
{
const div = html`<div>Hey there, I'm another div element!<br>
<span id="child2">`;
const child = div.querySelector('#child2');
const update = () => {
const myID = +div.parentNode.id.slice(1);
child.innerText = `My cell id is: ${myID}, and here's what I know about myself:
${JSON.stringify(parsedArray2.find(({id})=> id === myID))}`;
}
div.addEventListener('attached', update);
return div;
}
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example
observer = {
// Select the node that will be observed for mutations
var targetNode = document.body;
// Options for the observer (which mutations to observe)
var config = { attributes: false, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
console.log(mutationsList);
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
mutation.addedNodes[0].dispatchEvent(new CustomEvent('attached'));
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
invalidation.then(() => observer.disconnect());
return observer
}
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.
