31:T11a6,chart = { const data = await empires; const filteredData = data.slice().sort((a, b) => a.start - b.start); // --- create (or reuse) container --- let parent = this; if (!parent) parent = document.createElement("div"); // clear previous render on re-run parent.innerHTML = ""; // dimensions const W = width, L = margin.left, R = margin.right, T = margin.top, B = margin.bottom; const H = Math.max(300, 28 * filteredData.length + T + B); // scales const x = d3 .scaleLinear() .domain(d3.extent(filteredData.flatMap((d) => [d.start, d.end]))) .nice() .range([0, W - L - R]); const y = d3 .scaleBand() .domain(d3.range(filteredData.length)) .range([0, H - T - B]) .padding(0.25); // axes const axisTop = (g) => g .call( d3 .axisTop(x) .ticks(10) .tickFormat((yv) => (yv < 0 ? `${Math.abs(yv)} BCE` : `${yv} CE`)) ) .call((g) => g.selectAll(".domain").attr("opacity", 0.3)); const axisBottom = (g) => g .call( d3 .axisBottom(x) .ticks(10) .tickFormat((yv) => (yv < 0 ? `${Math.abs(yv)} BCE` : `${yv} CE`)) ) .call((g) => g.selectAll(".domain").attr("opacity", 0.3)); // tooltip const createTooltip = (sel) => sel .style("position", "absolute") .style("pointer-events", "none") .style("background", "rgba(0,0,0,0.8)") .style("color", "white") .style("border-radius", "6px") .style( "font", "12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial" ) .style("padding", "8px 10px") .style("opacity", 0); const yearFormat = (yv) => (yv < 0 ? `${Math.abs(yv)} BCE` : `${yv} CE`); const barFill = "#6b7280"; const tooltip = d3.select(document.createElement("div")).call(createTooltip); const svg = d3.select(DOM.svg(W, H)).attr("viewBox", [0, 0, W, H]); const g = svg.append("g").attr("transform", `translate(${L},${T})`); // axes (top & bottom) svg .append("g") .attr("transform", `translate(${L},${T - 10})`) .call(axisTop); svg .append("g") .attr("transform", `translate(${L},${H - B})`) .call(axisBottom); // hover guideline const guideline = svg .append("line") .attr("y1", T - 10) .attr("y2", H - B) .attr("stroke", "rgba(0,0,0,0.25)") .style("pointer-events", "none") .style("opacity", 0); // rows const rows = g .selectAll(".row") .data(filteredData) .join("g") .attr("class", "row") .attr("transform", (_, i) => `translate(0,${y(i)})`); const bandH = Math.max(4, y.bandwidth()); // bars rows .append("rect") .attr("x", (d) => x(Math.min(d.start, d.end))) .attr("y", 0) .attr("width", (d) => Math.max(1, Math.abs(x(d.end) - x(d.start)))) .attr("height", bandH) .attr("rx", 3) .attr("fill", barFill); // labels rows .append("text") .attr("x", (d) => x(Math.min(d.start, d.end)) - 8) .attr("y", bandH / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .style("font", "12px system-ui") .text((d) => d.name); // interactions // --- interactions: hover guideline + tooltip (name + years only) --- const showTooltip = (html) => tooltip.style("opacity", 1).html(html); const hideTooltip = () => tooltip.style("opacity", 0); const moveTooltip = (e) => { const [mx, my] = d3.pointer(e, svg.node()); let tx = mx + 12, ty = my + 16; if (mx > W / 2) tx -= 160; tooltip.style("left", `${tx}px`).style("top", `${ty}px`); }; svg .on("mousemove", (e) => { const [mx] = d3.pointer(e, svg.node()); guideline.attr("transform", `translate(${mx},0)`).style("opacity", 1); moveTooltip(e); }) .on("mouseleave", () => { guideline.style("opacity", 0); hideTooltip(); }); rows .on("mouseover", (e, d) => { d3.select(e.currentTarget) .select("rect") .attr("fill", d3.color(barFill).darker(0.7)); showTooltip(`

${d.name}

${yearFormat(d.start)} – ${yearFormat(d.end)}

`); }) .on("mousemove", (e) => moveTooltip(e)) .on("mouseleave", (e) => { d3.select(e.currentTarget).select("rect").attr("fill", barFill); hideTooltip(); }); parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); return parent; }32:[{"id":"c8a3e2832da47ead6eb0d51c73367f795bab388e92e2ce9574efaee221311e51dbe4e3795e0e719037899ac2d36f6ffd44a30a2f174a8d9af3e304933accdcec","href":"https://static.observableusercontent.com/files/c8a3e2832da47ead6eb0d51c73367f795bab388e92e2ce9574efaee221311e51dbe4e3795e0e719037899ac2d36f6ffd44a30a2f174a8d9af3e304933accdcec","name":"empires1.csv","type":"text/csv","lastModified":1762108305404.656,"size":3195}] 2f:{"title":"Select Empires and Kingdoms","cells":[{"id":0,"value":"# Select Empires and Kingdoms","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"Inputs.table(empires, { layout: \"auto\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"// convenience height for each band\nbandH = () => Math.max(4, y.bandwidth())","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"getTooltipContent = (d) => `\n

${d.name}

Span: ${yearFormat(d.start)} – ${yearFormat(d.end)}

\n ${d.era ? `

Era: ${d.era}

` : \"\"}\n ${\n d.notes ? `

${d.notes}

` : \"\"\n }\n ${\n d.wiki\n ? `

Wikipedia

`\n : \"\"\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"createTooltip = (selection) => {\n selection\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"background\", \"rgba(0,0,0,0.8)\")\n .style(\"color\", \"white\")\n .style(\"border-radius\", \"6px\")\n .style(\n \"font\",\n \"12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial\"\n )\n .style(\"padding\", \"8px 10px\")\n .style(\"opacity\", 0);\n return selection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"axisBottom = (g) =>\n g\n .call(d3.axisBottom(x).ticks(10).tickFormat(yearFormat))\n .call((g) => g.selectAll(\".domain\").attr(\"opacity\", 0.3))","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"axisTop = (g) =>\n g\n .call(d3.axisTop(x).ticks(10).tickFormat(yearFormat))\n .call((g) => g.selectAll(\".domain\").attr(\"opacity\", 0.3))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"// y scale (one row per item)\ny = d3.scaleBand()\n .domain((await empires).map((d, i) => i))\n .range([0, height - margin.top - margin.bottom])\n .padding(0.25)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"// x scale (linear, handles negative years for BCE)\nx = d3\n .scaleLinear()\n .domain(d3.extent(await empires, (d) => [d.start, d.end]).flat())\n .nice()\n .range([0, width - margin.left - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// BCE/CE tick formatter\nyearFormat = (y) => (y < 0 ? `${Math.abs(y)} BCE` : `${y} CE`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"// Simple neutral color (we're ignoring regions)\nbarFill = \"#6b7280\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 28 * (await empires).length + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"margin = ({ top: 40, right: 24, bottom: 40, left: 180 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"empires = FileAttachment(\"empires1.csv\")\n .csv({ typed: true })\n .then((rows) =>\n rows.map((d) => ({\n name: d.Name,\n start: +d.StartYear, // negative = BCE\n end: +d.EndYear,\n era: d.Era,\n notes: d.Notes,\n wiki: d.Wikipedia\n }))\n )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}