The avatar for @bryangingechen
Bryan Gin-ge Chen
here to learn
Published
Observable
Edited
Oct 4, 2019
23 stars
Observable
Notebook stepperNotebook import inspector (deprecated)Version Pinning for NotebooksSandpiles in the reactive runtimeWebSocket-powered notebook editing toolsExporting notebooks with their sourcefromV1From raw notebook source to Observable runtime V1 modulesNotebook Visualizer (Firefox-compatible)
Imports: tips and tricks
Find non-default global objects for "require""Force Update Pattern" in ObservableImporting data from Google Spreadsheets into a notebook / webpage
Insert cell
Insert cell
Insert cell
import { canvas } with {
numStr,
size
} from 'https://gistcdn.githack.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057/raw/ce1df31e7f2bbb9c3ee25779c858ded45c05e1f3/3x-1-paths-in-binary.js'
// https://gist.github.com/bryangingechen/03dfcef05981f7aec41745e8eccf4057
Insert cell
canvas
Insert cell
Insert cell
Insert cell
Insert cell
import {shellSort as shell1} from "@tmcw/sorting"
Insert cell
shell1
Insert cell
Insert cell
import {shellSort as shell2} from "@tmcw/sorting"
Insert cell
shell2
Insert cell
Insert cell
import {shellSort as shell3} with {} from "@tmcw/sorting"
Insert cell
shell3
Insert cell
Insert cell
import {shellSort as shell4} with {} from "@tmcw/sorting"
Insert cell
shell4
Insert cell
Insert cell
Insert cell
Insert cell
import {_gnomeSort as gnome4} with {sortH as height} from "@tmcw/sorting-overview"
Insert cell
Insert cell
gnome4
Insert cell
Insert cell
import {_gnomeSort as gnome5} with {} from "@tmcw/sorting-overview"
Insert cell
gnome5
Insert cell
Insert cell
import {gnomeSort} from "@tmcw/sorting-overview"
Insert cell
gnomeSort
Insert cell
Insert cell
import {viewof order as order1} with {} from '@fil/drag-to-re-arrange'
Insert cell
// try dragging the colored boxes left and right
viewof order1
Insert cell
Insert cell
order1
Insert cell
Insert cell
import {viewof order as viewof order2} with {} from '@fil/drag-to-re-arrange'
Insert cell
Insert cell
import {viewof order, order} from '@fil/drag-to-re-arrange'
Insert cell
viewof order
Insert cell
order
Insert cell
Insert cell
import {viewof d, d as XXXX} from '@bumbeishvili/data-driven-range-sliders'
Insert cell
// The above graphic is a range slider, try dragging!
viewof d
Insert cell
d
Insert cell
// This and d reference the same object
XXXX
Insert cell
Insert cell
viewof XXXX
Insert cell
Insert cell
Insert cell
import {mutableWalls as mutableWalls0} with {} from '@observablehq/introduction-to-mutable-state'
Insert cell
mutableWalls0
Insert cell
Insert cell
import {mutableWalls as mutableWalls1, mutable wall as wall1} with {} from '@observablehq/introduction-to-mutable-state'
Insert cell
mutableWalls1
Insert cell
wall1
Insert cell
Insert cell
import {a} from '3c69b22e8a78157b'
Insert cell
a
Insert cell
Insert cell
Insert cell
import { viewof order as order3 } with {
viewof d as viewof order
} from '@fil/drag-to-re-arrange'
Insert cell
Insert cell
import { viewof order as order4 } with {
viewof d as order
} from '@fil/drag-to-re-arrange'
Insert cell
viewof order4
Insert cell
Insert cell
viewof order4 === viewof d
Insert cell
order4 === d
Insert cell
Insert cell
Insert cell
import { viewof order as order5 } with {
d as order
} from '@fil/drag-to-re-arrange'
Insert cell
viewof order5
Insert cell
order5
Insert cell
viewof order5.value
Insert cell
Insert cell
viewof order5 === viewof d
Insert cell
order5 === d
Insert cell
Insert cell

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.
Learn more