Óbitos por COVID-19 na Bahia / Vinícius Mello

{

const formatTime = d3.utcFormat("%d/%m/%Y");

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg

.append("g")

.attr("fill", color)

.selectAll("rect")

.data(obitsPerDay100)

.enter()

.append("rect")

.attr("x", (d, i) => x(i))

.attr("y", d => y(d.obits))

.attr("height", d => y(0) - y(d.obits))

.attr("width", x.bandwidth())

.on('mouseover', function(ev, d) {

tooltip

.html(

`<div>Data: ${formatTime(d.date)} </div><div>Óbitos: ${d3.format(

".2f"

)(d.obits)}</div>`

)

.style('visibility', 'visible');

d3.select(this)

.transition()

.attr('fill', hoverColor);

})

.on('mousemove', function(ev, d) {

tooltip

.style('top', 100 + 'px')

.style('left', Math.min(width - 120, ev.pageX + 10) + 'px');

})

.on('mouseout', function(ev, d) {

tooltip.html(``).style('visibility', 'hidden');

d3.select(this)

.transition()

.attr('fill', color);

});

return svg.node();

}

height = 500

margin = ({ top: 30, right: 0, bottom: 30, left: 40 })

y = d3

.scaleLinear()

.domain([0, d3.max(obitsPerDay100, d => d.obits)])

.nice()

.range([height - margin.bottom, margin.top])

color = "steelblue"

hoverColor = '#eec42d'

staticColor = '#437c90'

d3 = require("d3@6")

tooltip = d3

.select('body')

.append('div')

.attr('class', 'd3-tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background', 'rgba(0,0,0,0.6)')

.style('border-radius', '4px')

.style('color', '#fff')

.text('a simple tooltip')

Purpose-built for displays of data