function update (data){ var t = d3.transition() .duration(500) .ease(d3.easeLinear); // update the circles var us = d3.select('#vis').selectAll("circle") .data(data) var div = d3.select('#tooltip') us.enter() .append("circle") // Uses the enter().append() method .attr("cx", function(d, i) { return xScale(d.Frequency) }) .attr("cy", function(d) { return yScale(d.Date) }) // simple tootip is too small //.append('title') // .text(d => formatTime(d.Date) + "s , " + d3.format(".3s")(d.Frequency) + 'Hz' ) .style('cursor', 'crosshair') .on('mouseover', d => { div .transition() .duration(200) .style('opacity', 0.9); div .html('' + '' + '' + '' + '' + '' + '' + '

time	' + formatTime(d.Date) + '	s
freq	' + d3.format(".3s")(d.Frequency) + '	Hz
max amp	' + d.MaxAmplitude + '	dB
avg amp	' + d.AvgAmplitude + '	dB
min amp	' + d.MinAmplitude + '	dB
max bw	' + d3.format(".3s")(d.MaxBandwidth) + '	Hz
avg bw	' + d3.format(".3s")(d.Bandwidth) + '	Hz
min bw	' + d3.format(".3s")(d.MinBandwidth) + '	Hz

' ) .style('left', d3.event.pageX + 18 + 'px') .style('top', d3.event.pageY - 28 + 'px'); }) .on("mousemove", d => { div .style("left", (d3.event.pageX+18) + "px") .style("top", (d3.event.pageY-28) + "px"); }) .on('mouseout', () => { div .transition() .duration(500) .style('opacity', 0); }) .transition(t) .attr("cy", function(d) { return yScale(d.Date) }) .attr("r", function(d) { return rScale(d.Bandwidth) }) .attr("fill", (d) => colorScale(d.AvgAmplitude)) .attr('fill-opacity', 0.2) us .transition(t) .attr("cy", function(d) { return yScale(d.Date) }) .attr("r", function(d) { return rScale(d.Bandwidth) }) .attr("fill", (d) => colorScale(d.AvgAmplitude)) us.exit() .remove(); updateAxis() }