{
d3.select('#wrapper2').selectAll("svg").remove()
const data = [...adlb, ...advs, ...adae]
const wrapper = d3.select("#wrapper2")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height)
const bounds = wrapper.append("g")
.style("transform", `translate(${
dimensions.margin.left
}px, ${
dimensions.margin.top
}px)`)
const radiusScale = d3.scaleSqrt()
.domain([1, maxCount])
.range([5, 20])
const forceData = beeswarmForce(data, xScale, radiusScale)
const dots = bounds.selectAll("dot")
.data(forceData)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
.attr('fill', d => {
if (d.fill === 'labs') {
return '#969696'
} else if (d.fill === 'vitals') {
return '#FD8D3C'
} else {
return '#9E9AC8'
}
})
.on('mousemove', onMousemove)
.on('mouseout', onMouseOut)
function onMousemove(event, d){
const x = event.x
const y = event.y
toolTip
.style('left', `${x}px`)
.style('top', `${y}px`)
.style('display', 'block')
.html(
`<span>Day: ${d.ADY}</span>
</br>
<span>Count: ${d.count}</span>
`
)
d3.select(event.target).style("cursor", "pointer")
}
function onMouseOut(event, d){
toolTip.style("display", "none")
d3.select(event.target).style("cursor", "default");
}
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
.tickValues(Array.from(tickData.keys()))
.tickFormat((d, i) => tickData.get(d))
const xAxis = bounds.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${dimensions.boundedHeight}px)`)
xAxis.selectAll("text")
.attr('transform', 'rotate(-45)')
.attr('text-anchor', 'end')
.attr('dx', '-1em')
}