Sortable Bar Chart / jingweizhang1995

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

chart = {

const svg = d3.create("svg")

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

const bar = svg.append("g")

.attr("fill", "#5d9942")

.selectAll("rect")

.data(data)

.join("rect")

.style("mix-blend-mode", "multiply")

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

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

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

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

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

tooltip

.html(`<div>Organization: ${d.name}</div><div>Count: ${d.value}</div>`)

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

d3.select(this).transition().attr('fill', "#fddd10");

})

.on('mousemove', function (e) {

tooltip

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

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

})

.on('mouseout', function () {

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

d3.select(this).transition().attr('fill', "#5d9942");

})

;

const gx = svg.append("g")

.call(xAxis);

const gy = svg.append("g")

.call(yAxis);

return Object.assign(svg.node(), {

update(order) {

x.domain(data.sort(order).map(d => d.name));

const t = svg.transition()

.duration(750);

bar.data(data, d => d.name)

.order()

.transition(t)

.delay((d, i) => i * 20)

.attr("x", d => x(d.name));

gx.transition(t)

.call(xAxis)

.selectAll(".tick")

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

}

});

}

update = chart.update(order)

data = d3.csvParse(await FileAttachment("OutreachCount - Sheet1.csv").text(), ({Organization, Counts}) => ({name: Organization, value: +Counts}))

x = d3.scaleBand()

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

.range([margin.left, width - margin.right])

.padding(0.1)

y = d3.scaleLinear()

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

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

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).tickSizeOuter(0))

.style("font-size", "15px")

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y))

.call(g => g.select(".domain").remove())

.style("font-size", "15px")

height = 700

margin = ({top: 20, right: 50, bottom: 100, left: 40})

d3 = require("d3@6")

Purpose-built for displays of data