Animated Bar Chart with Tooltip / Bohdan Saienko

chart = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

const rect = svg

.selectAll('g')

.data(data)

.enter()

.append('rect')

.attr('fill', staticColor)

.attr('x', (d, i) => x(d.country))

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

.attr('y', d => y(0))

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

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

tooltip

.html(

`<div>Country: ${d.country}</div><div>Value: ${d.value}</div>`

)

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

d3.select(this).transition().attr('fill', hoverColor);

})

.on('mousemove', function () {

tooltip

.style('top', d3.event.pageY - 10 + 'px')

.style('left', d3.event.pageX + 10 + 'px');

})

.on('mouseout', function () {

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

d3.select(this).transition().attr('fill', staticColor);

});

rect

.transition()

.ease(d3.easeLinear)

.duration(800)

.attr('y', d => y(d.value))

.attr('height', d => height - y(d.value))

.delay((d, i) => i * 100);

return svg.node();

}

data = sort(rawData);

staticColor = '#437c90';

hoverColor = '#eec42d';

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');

x = d3

.scaleBand()

.range([0, width])

.domain(data.map(d => d.country))

.padding(0.2);

y = d3

.scaleLinear()

.domain([0, d3.max(data, d => d.value)])

.range([height, 0]);

sort = (data) => data.sort((a, b) => d3.ascending(a.value, b.value));

d3 = require("d3@4")

Purpose-built for displays of data