31:Tb6a,chart = { const svg = d3.select(DOM.svg(width, height)).attr("class", "barchart"); const gx = svg.append("g").call(xAxis); const gy = svg.append("g").call(yAxis); const yLabels = []; gy.selectAll(".tick") .selectAll("text") .each(d => yLabels.push(d)); const maxAvgLen = Math.floor( (Math.min(...yLabels.map(d => d.length)) + Math.max(...yLabels.map(d => d.length))) / 2 ); let avgLabel = maxAvgLen < 40 ? maxAvgLen : 40; const bar = svg .append("g") .attr("fill", "#ff6464") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .on("mouseover", function() { return tooltip.style("opacity", 1); }) .on("mousemove", function() { let [x, y] = d3.mouse(this); return tooltip.style("top", y - 10 + "px").style("left", x + "px"); }) .on("mouseout", function() { return tooltip.style("opacity", 0); }); const label = svg .append("g") .attr("fill", "black") .attr("opacity", 0.8) .attr("text-anchor", "start") .style("font-size", "12px") .style("font-family", "'Lucida Console', Monaco, monospace") .selectAll("text") .data(data) .join("text") .attr("x", x(0) + 10) .attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.mode === "pvalue" ? d3.format(".3")(d.pvalue) : d3.format(".3")(d.value) ); const title = svg .append("text") .attr("class", "title") .attr("fill", "black") .attr("opacity", 0.8) .style("font", "12px sans-serif") .attr("x", margin.left + (width - margin.left) / 2) .attr("y", height - margin.bottom + 40) .text("−log₁₀(p‐value)"); svg.node().update = () => { d3.selectAll(".domain").attr("opacity", 0); const t = svg.transition().duration(750); bar .data(data, d => d.name) .order() .transition(t) .delay((d, i) => i * 20) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)); label .data(data, d => d.name) .order() .transition(t) .delay((d, i) => i * 20) .attr("x", x(0) + 10) .attr("y", d => y(d.name) + y.bandwidth() / 2) .text(d => d.mode === "pvalue" ? d3.format(".3")(d.pvalue) : d3.format(".3")(d.value) ); gx.transition(t) .call(xAxis) .selectAll(".tick") .delay((d, i) => i * 20) .selectAll("line") .attr("opacity", 0.1); gy.transition(t) .call(yAxis) .selectAll(".tick") .delay((d, i) => i * 20) .selectAll("text") .attr("fill", "black") .style("font-size", "12px") .style("font-family", "'Lucida Console', Monaco, monospace") .text(d => trimLabel(d, avgLabel)); }; return svg.node(); }32:T517,{ const title = d3.select(".title") switch (order) { case "logp": data.forEach(function (item) { item.value = -Math.log10(item.pvalue); item.mode = order }); title.text("−log₁₀(p‐value)") data.sort((a, b) => b.value - a.value); break; case "pvalue": data.forEach(function (item) { item.value = item.pvalue; item.mode = order }); title.text("P‐value") data.sort((a, b) => a.value - b.value); break; case "odds": data.forEach(function (item) { item.value = item.odds; item.mode = order }); title.text("Odds ratio") data.sort((a, b) => b.value - a.value); break; case "combined": data.forEach(function (item) { item.value = item.combined; item.mode = order }); title.text("Combined score") data.sort((a, b) => b.value - a.value); break; } x.domain([0, d3.max(data, d => d.value)]); y.domain(data.map(d => d.name)); chart.update(); return order; }33:[] 2f:{"title":"Sortable Bar Chart","cells":[{"id":1,"value":"md`# Sortable Bar Chart\n_{*This bar chart was [converted into a React component](https://observablehq.com/@maxim-k/react-component-of-the-sortable-bar-chart) by putting all parameters inside a \\`\\`chart\\`\\` function.*}\n\nUse the dropdown menu to change the sort order.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"viewof color = {\n const select = html``;\n select.selectedIndex = 0;\n select.dispatchEvent(new CustomEvent(\"input\"));\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"viewof numBar = {\n const select = html``;\n select.selectedIndex = 0;\n select.dispatchEvent(new CustomEvent(\"input\"));\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"viewof svgButton = {\n const button = html`