color$ = obs.
merge(obs.of(state => state), // Force emitting the initial state
load$,
internalLight$.map(lighten),
externalLight$.map(lighten),
input$(red, 'r'),
input$(green, 'g'),
input$(blue, 'b'))
.do(console.log)
.scan((state, fn) => fn(state), {r: 127, g: 127, b: 127}) // The state is here. Scan does a 'state reduce' à la redux.
.do(updateUI)
.share()
load$ = obs
.fromEvent(load, 'click')
.debounceTime(100)
.flatMap( _ => threeRandomNumbers )
.bufferCount(3)
.map(color => state => ({r: color[0], g: color[1], b: color[2]}) )
threeRandomNumbers = obs.range(1,3).map(util.random).map(x => 25 * x)
input$ = (input, attr) => obs
.fromEvent(input, 'input')
.throttleTime(100)
.map(x => Number(input.value))
.map(value => state => Object.assign({}, state, {[attr]: value}))
Object.assign({a: 2}, {b: 3})
internalLight$ = obs
.fromEvent(addLight, 'click')
.mapTo(10)
.do(amount => room.send(JSON.stringify(amount))) // This broadcasts the added light to other people
room = {
var socket = new WebSocket("wss://connect.websocket.in/reactive-course?room_id=lighten");
invalidation.then(() => socket.close()) // observablehq housekeeping
socket.addEventListener("message", message => externalLight$.next(JSON.parse(message.data)))
return socket
}
externalLight$ = new rx.Subject();
lighten = amount => state => ({r: increase(state.r, amount), g: increase(state.g, amount), b: increase(state.b, amount)})
increase = (value, amount) => value < 245 ? value + 10 : 255
updateUI = color => {
red.value = color.r
green.value = color.g
blue.value = color.b
}
rgb = color => `rgb(${color.r},${color.g},${color.b})`
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.
