Cameron Yick
data vis engineer @datadoghq. currently into visual exaptation | creative (en)coding | metalearning | swimming. he/him
Frontend Fishbowl Demo
02/25/2019
Cameron Yick / Team Dataviz
External Demo: Victory Charts
// chart.js
// VanillaJS (Pseudocode method inside some charting class)
handleBrushMove(event) {
const { start, end } = event.selection;
controlledChart.setChartSelection(start, end);
}
Pros:
- Fast to set up
Cons:
- Controller and controlled strongly coupled
// React-Redux
handleBrushMove(event) {
const { start, end } = event.selection;
// setChartSelection is a redux action,
// modifies some shared state in Redux
this.props.setChartSelection(start, end);
// Now controller and controlled component
// both use mapStateToProps to
// pull selection from Redux Store
}
Pros
- Controller and Controlled are decoupled
Cons
- Requires react/redux boilerplate
// Create a thing that can be watched
// Convention to end observables with $
const chartSelection$ = new Subject();
// Inside your handler, stream can be injected
handleBrushMove(event) {
const { start, end } = event.selection;
chartSelection$.next({ start, end })
}
// Meanwhile, in another file...
chartSelection$.subscribe(selection => {
const { start, end } = selection;
minimap.moveTo(start, end);
})
// Add more subscriptions freely!
// Introduce throttle, debounce, merge (hotkeys) in a file
// decoupled from the rest of your charting logic...
By Cameron Yick
data vis engineer @datadoghq. currently into visual exaptation | creative (en)coding | metalearning | swimming. he/him