render = () => {
const dom = d3.select("#_dom");
const svg = d3.select("#_svg");
const canvas = d3.select("#_canvas").node().getContext("2d");
const join = d3.select("custom")
.selectAll(".bar")
.data(data, d => d.letter);
const exit = join
.exit()
.transition()
.duration(duration)
.attr("y", d => y(0))
.attr("height", 0)
.remove();
const enter = join.enter()
.append("rect")
.attr("class", "bar")
.attr("y", d => y(0))
.attr("x", d => x(d.letter))
.attr("height", 0)
.attr("width", x.bandwidth())
.style("fill", "steelblue");
const update = enter
.merge(join)
.transition()
.delay(duration)
.duration(duration)
.attr("x", d => x(d.letter))
.attr("width", x.bandwidth())
.transition()
.delay((d, i) => i * duration / 4)
.ease(d3.easeBounce)
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count))
renderSvg(svg);
renderHtml(dom);
renderCanvas(canvas, enter, exit, enter.merge(update));
}