Manipulate SVG plots

Draw a barplot with an ID my-plot and the SVG format.

barplot(1:10)

Add mouseover events on all bars.

document.querySelectorAll('#my-plot #surface4 path').forEach(el => {
  // beep for 500 milliseconds
  // code adapted from https://stackoverflow.com/a/29641185/559676
  function beep() {
    const ctx = new AudioContext();
    var osc = ctx.createOscillator();
    osc.type = 'sine';
    osc.frequency.value = 800;
    osc.connect(ctx.destination);
    osc.start(); 
    setTimeout(() => { osc.stop(); }, 100);
  }
  el.addEventListener('mouseover', e => {
    this.event.target.style.transform = 'rotateX(15deg)';
    beep();
  });
  el.addEventListener('mouseout', e => {
    this.event.target.style.transform = '';
  });
});