Web Audio Theremin & Oscilloscope

This is a theremin with a built-in oscilloscope, made using the Web Audio API. This was my first time working with Web Audio and the next thing I want to integrate is using multiple oscillators and filters to manipulate the waveform when moving the mouse horizontally. Until then, vertical movement changes frequency while horizontal movement changes the gain.

** Update: Added the ability to select a waveform from a drop-down at the top left.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {margin: 0; overflow:hidden;}
        #wave-select {position: absolute; left:10px; top:10px;}
        svg {border: black; cursor: none; background: #FCF4B5}
        circle {fill: black; fill-opacity: .75;}
        #wave {fill: none; stroke: #F1896F; stroke-width:2;}
        #ticker {fill: green; stroke: #222; stroke-width:.5; fill-opacity: .2;}
    </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="wave-select">
        Waveform: 
        <select id="waveType" onchange="oscillator.type = this.value">
            <option value="sine">Sine</option>
            <option value="square">Square</option>
            <option value="sawtooth">Sawtooth</option>
            <option value="triangle">Triangle</option>
        </select>
    </div>
</body>
<script>
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
        oscillator = audioCtx.createOscillator(),
        gainNode = audioCtx.createGain(),
        analyser = audioCtx.createAnalyser();

oscillator.connect(audioCtx.destination);
    gainNode.connect(audioCtx.destination);
    oscillator.connect(gainNode);
    oscillator.connect(analyser);

var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(analyser.frequencyBinCount);

gainNode.gain.value = -1
    oscillator.frequency.value = 0
    oscillator.start(0);

var width = innerWidth,
				height = innerHeight;

var scaleY = d3.scalePow().exponent(-.25).domain([height,10]).range([100,5000]),
        scaleX = d3.scaleLinear().domain([0,bufferLength]).range([0,width]),
        gainScale = d3.scaleLinear().domain([0,width]).range([-1,0]),
        octaves = [110,220,440,880,1760,3520]

var tickerHist = [0]

var line = d3.line()
        .x(function(d, i) {return scaleX(i)})
        .y(function(d) {return (d-122.5) * (gainNode.gain.value+1)})

var tickerLine = d3.area()
        .x(function(d, i) {return (i - tickerHist.length)*2})
        .y0(height)
        .y1(function(d) {return scaleY.invert(d)})

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)

svg.on("mouseover", oscStart)
        .on("mouseout", oscStop)
        .on("mousemove", oscChange)
        .on("touchstart", oscStart)
        .on("touchend", oscStop)
        .on("touchmove", oscChange)

function oscStart() {
        if (oscillator.noteOn) oscillator.noteOn(0);
        circle.style("visibility", "visible")
    }
    function oscStop() {
        circle.style("visibility", "hidden")

oscillator.frequency.value = 0;
        gainNode.gain.value = -1
        updateWave(100)
    }
    function oscChange() {
        circle.attr("cx", d3.event.pageX).attr("cy", d3.event.pageY)
        ticker.attr("transform", `translate(${d3.event.pageX},0)`)

oscillator.frequency.value = scaleY(d3.event.pageY);
        gainNode.gain.value = gainScale(d3.event.pageX);
        updateWave(1);      
    }

document.addEventListener("touchmove", function(e) {e.preventDefault();}, false);

var octavesLines = svg.append("g")
        .attr("class", "octaves").selectAll("path")
        .data(octaves)
      .enter().append("path")
        .style("stroke", "#9CD2B8")
        .attr("stroke-dasharray",[5,5])
        .attr("d", function(d) {return `M0 ${scaleY.invert(d)} H ${width+11}`})

var circle = svg.append("circle")
        .attr("r", 10)
        .style("visibility", "hidden")

var freq = svg.append("text")
        .attr("x", 10)
        .attr("y", height - 10)
        .text('Frequency: -')

var waveShape = svg.append("g").append("path")
        .datum(dataArray)
        .attr("id", "wave")
        .attr("transform", `translate(0,${height/2})`)

var ticker = svg.append("g").append("path")
        .attr("transform", `translate(${width+10},0)`)
        .attr("id", "ticker")
        .datum(tickerHist)

updateWave()

d3.timer(function() {
        updateTicker(oscillator.frequency.value);
    }, 100)

function updateTicker(fVal) {
        tickerHist.push(fVal)
        if (tickerHist.length > width*1.1) {
            tickerHist.shift()
        }
        ticker.attr("d", tickerLine)
    }

function updateWave(duration) {
        analyser.getByteTimeDomainData(dataArray);

waveShape.transition().duration(duration).ease(d3.easeLinear).attr("d",line)    
        freq.text(`Frequency: ${d3.format(',.0f')(oscillator.frequency.value)} Hz`);    
    }
</script>
</html>

https://d3js.org/d3.v4.min.js