viewof scatter_all = {
const svg = d3.select("body").select("svg#vis3");
var circleAttrs = {
cx: d => xScale_scatter(d[xaxis]),
cy: d => yScale_scatter(d[yaxis]),
r: 5,
fill: "red",
stroke: "black",
width: 2,
strokeOpacity: 0.7,
fillOpacity: 1
};
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
svg.append("g")
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", circleAttrs.cx)
.attr("cy", circleAttrs.cy)
.attr("r", circleAttrs.r)
.attr('fill', circleAttrs.fill)
.attr('opacity', circleAttrs.fillOpacity)
.attr('stroke', circleAttrs.stroke)
.attr("stroke-width", circleAttrs.width)
.on('mouseover', handleMouseOver)
.on('mouseout', handleMouseOut);
svg.select("#axis2").remove();
var xAxis = d3.axisBottom();
xAxis.scale(xScale_scatter)
svg.append("g")
.attr("transform", `translate(0, ${height+135- margin.bottom})`)
.attr("id", "axis2")
.style("font", "bold 12px sans-serif")
.attr("fill", "black")
.call(xAxis)
svg.select("#text2").remove();
svg.append("text")
.attr("transform", `translate(${width/2}, ${height+135- margin.bottom+40})`)
.attr("id", "text2")
.style("text-anchor", "middle")
.attr("fill", "black")
.style("font", "bold 15px sans-serif")
.text(xaxis);
svg.append("text")
.attr("x", width / 2 )
.attr("y", +50)
.style("text-anchor", "middle")
.attr("fill", "black")
.text("Earthquake Data 1965-2016")
svg.select("#axis1").remove();
var yAxis = d3.axisLeft();
yAxis.scale(yScale_scatter)
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.attr("id", "axis1")
.style("font", "bold 12px sans-serif")
.attr("fill", "black")
.call(yAxis)
svg.select("#text3").remove();
svg.append("text")
.attr("transform", `translate(${margin.left - 50}, ${(height+135- margin.bottom)/2+25})rotate(-90)`)
.attr("id", "text3")
.style("text-anchor", "middle")
.style("font", "bold 15px sans-serif")
.attr("fill", "black")
.text(yaxis);
function handleMouseOver(d, i) {
console.log(d,i)
console.log(this)
d3.select(this)
.attr("fill", "springgreen")
.attr("stroke-width", 20)
.attr("stroke", "springgreen")
svg.append("text")
.attr('x', this.getAttribute('cx'))
.attr('y', this.getAttribute('cy'))
.attr('id', 'tooltip')
.style("font", "bold 25px sans-serif")
.text(`(${d.Depth_km}, ${d.Magnitude})`)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 1)
}
function handleMouseOut(d, i) {
d3.select(this).transition()
.attr('fill', 'red')
.attr("stroke-width", circleAttrs.width)
.attr("stroke", "black")
svg.select('#tooltip').remove()
}
return svg.node();
}