Michael Holroyd
Computer Graphics Ph.D.
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.
Thanks
Intro to Observable
By Michael Holroyd
Intro to Observable
Presentation on Observable for the Central Virginia Javascript Meetup, Dec 2019.
