Observable
CVJS December 2019
Michael Holroyd, PhD
@meekohi
meekohi.com
SceneThink
Tools for event organizers
- Create your event once, promote everywhere. Landing pages, e-mail, ...
Tools for event curators
- Approve events, full editorial control, create and share content + collections.
SceneThink
Growing partner network
- Charlottesville: C-VILLE, Charlottesville Tomorrow, WTJU, UVA Arts, Downtown Assoc.
- Cville, DC, Asheville, Portland, Seattle, Santa Fe, Boston, Eugene, Fort Collins, ...more
@meekohi
@meekohi
@meekohi
@meekohi
@meekohi
@meekohi
Observable
Mike Bostock (d3)
Jeremy Ashkenas (underscore)
- Web-based interactive "Javascript" notebooks.
- Collaborative: fork projects and inline suggestions.
- Reactive cells with automatic data-flow resolution. Like a spreadsheet.
Data
https://observablehq.com/@observablehq/introduction-to-data
- For small data, inline or attached files are super quick.
- API / ajax is trivial. Secrets can be stored per account.
- Can host raw data on gist.com, etc.
- Direct db access also supported (!)
client = DatabaseClient("Baby Names")
names = client.query(`
SELECT name, gender, year, SUM(number) AS number
FROM names
WHERE year > ?
GROUP BY name, gender, year`, [1920])"Javascript"
https://observablehq.com/@observablehq/observables-not-javascript
- Not quite Javascript.
- Cells are separate scripts and implicitly wait for promises.
- yields are bottlenecked to 60fps
- viewof and mutable keywords
{
let i = 0;
while (true) {
yield ++i;
}
}while (true) {
context.save();
context.clearRect(0, 0, width, height);
for (let i = 0; i < n; ++i) {
const p = particles[i];
p.x += p.vx;
if (p.x < -mD) p.x += width + mD * 2;
else if (p.x > width + mD) p.x -= width + mD * 2;
p.y += p.vy;
if (p.y < -mD) p.y += height + mD * 2;
else if (p.y > height + mD) p.y -= height + mD * 2;
p.vx += 0.2 * (Math.random() - .5) - 0.01 * p.vx;
p.vy += 0.2 * (Math.random() - .5) - 0.01 * p.vy;
context.beginPath();
context.arc(p.x, p.y, radius, 0, 2 * Math.PI);
context.fill();
}
context.restore();
yield context.canvas;
}Standard Library
https://observablehq.com/@observablehq/standard-library
https://observablehq.com/@observablehq/introduction-to-views
- viewof connects HTML elements to data.
- KaTeX rendering
- now, width, other helpers
tex.block`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`How it Runs
Libraries
Don't
Quick Demo
Create a map of all SceneThink locations, pulled directly from the database.