dataviz & research
Public
Edited
May 17, 2023
1 fork
3 stars
html`<div class="element" id="el2">0</div>`
block = ({
start: function(event) {
console.log('start', event);
},
change: function(force, event) {
// event.preventDefault();
this.style.width = Pressure.map(force, 0, 1, 200, 300) + 'px';
this.innerHTML = force;
console.log('change', force);
},
startDeepPress: function(event) {
console.log('start deep press', event);
this.style.backgroundColor = '#FF0040';
},
endDeepPress: function() {
console.log('end deep press');
this.style.backgroundColor = '#0080FF';
},
end: function() {
console.log('end');
this.style.width = '200px';
this.innerHTML = 0;
},
unsupported: function() {
console.log(this);
this.innerHTML = 'Your device / browser does not support this :(';
}
})
Pressure.set(document.querySelectorAll('#el2'), block);
Pressure = require("pressure/dist/pressure.js")
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.
