EJ Fox & Ian Johnson
streaming data, code, acid, design
viewof userColors = {
let u = html`<div><b>User Colors: </b><div></div></div>`;
function onSnapshot(qs) {
let docs = qs.docs.map(d => {
let data = { id: d.id, ...d.data() };
return data;
});
console.log(docs);
// choice.value = docs[0].hex;
u.value = docs.map(d => d.hex);
d3.select(u)
.select("div")
.text(docs.map(d => d.hex));
u.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
// whenever the users db is modified this callback should get called
db.collection("colors")
// .get("background")
.onSnapshot(onSnapshot);
return u;
}
viewof moire = {
let u = html`<div><b>Moire: </b><pre></pre></div>`;
function onSnapshot(qs) {
let docs = qs.docs.map(d => {
let data = { id: d.id, ...d.data() };
return data;
});
console.log(docs);
// choice.value = docs[0].hex;
u.value = docs[0];
d3.select(u)
.select("pre")
.text(JSON.stringify(docs[0], null, 2));
u.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
// whenever the users db is modified this callback should get called
db.collection("moire")
// .get("background")
.onSnapshot(onSnapshot);
return u;
}
moire
setters = {
if (moire.theta != θ)
db.collection('moire')
.doc("stream")
.update({ theta: θ });
if (moire.layers != layers)
db.collection('moire')
.doc("stream")
.update({ layers: layers });
if (moire.scaleFactor != scale)
db.collection('moire')
.doc("stream")
.update({ scaleFactor: scale });
if (moire.spacing != spacing)
db.collection('moire')
.doc("stream")
.update({ spacing: spacing });
}
// width = 600;
1080 / 1920
getHexGridCircles(hexGrids[0], scale)
app = {
let app = firebase.initializeApp(firebaseConfig);
firebase.analytics();
firebase.auth().useDeviceLanguage();
return app;
}
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.
