31:Tbfb,chart = { const tooltipDiv = d3.select(tooltipContainer); const container = d3.create("div").style("min-height", "150px"); container.append(() => tooltipDiv.node()); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]); const bg = svg .append("rect") .classed("background", true) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "white"); const labelCollapsed = svg .append("text") .attr("x", 0) .attr("y", 12) .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("opacity", 0) .text("All Events"); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xAxisGroup = g.append("g").call(xAxis); const xAxis2Group = g.append("g").call(xAxis2); const yAxisGroup = g.append("g").call(yAxis); const eventsGroup = g.append("g").classed("events", true); eventsGroup .selectAll("rect") .data(parsed) .join("rect") .attr("x", d => xScale(d.startDate)) .attr("y", d => yScale(d.id)) .attr("width", d => { const w = Math.round(xScale(d.endDate) - xScale(d.startDate)); return w < rectProps.minWidth || isNaN(w) ? rectProps.minWidth : w; }) .attr("height", 16) .attr("fill", "cornflowerblue") .attr("opacity", 0.7) .style("mix-blend-mode", "multiply") .each(function() { d3.select(this).call(tooltip, tooltipDiv); }); function collapse() { eventsGroup .selectAll("rect") .transition() .call(transition) .attr("y", 0); xAxisGroup .transition() .call(transition) .attr("transform", `translate(0, ${rectProps.height})`); xAxis2Group .transition() .call(transition) .attr("opacity", 0); yAxisGroup .transition() .call(transition) .attr("opacity", 0); svg .transition() .call(transition) .attr("viewBox", [ 0, 0, width, rectProps.height + margin.top + margin.bottom ]); labelCollapsed .transition() .call(transition) .attr("opacity", 1); } function expand() { labelCollapsed.attr("opacity", 0); eventsGroup .selectAll("rect") .transition() .call(transition) .attr("y", d => yScale(d.id)); xAxis2Group .transition() .call(transition) .attr("opacity", 1); xAxisGroup .transition() .call(transition) .attr("transform", `translate(0, ${height - margin.bottom})`); yAxisGroup .transition() .call(transition) .attr("opacity", 1); svg .transition() .call(transition) .attr("viewBox", [0, 0, width, height]); } function toggle(event) { if (event.target.value) { collapse(); } else { expand(); } } // thanks to Steven Tan (@chienleng) for the suggestion of adding an event listener to a view viewof collapsed.addEventListener("input", toggle); return container.node(); }32:T899,tooltip = (selection, tt) => { selection .on("mouseover", handleMouseover) .on("mousemove", handleMousemove) .on("mouseleave", handleMouseleave); function handleMouseover() { if (!viewof collapsed.value) { darkenSel(); showTooltip(); setContents(); } } function handleMousemove(event) { const [mouseX, mouseY] = d3.pointer(event, this); setMoseoverDate(mouseX); setFilteredData(mouseX); if (!viewof collapsed.value) { moveTooltip(mouseX, mouseY); } } function handleMouseleave() { if (!viewof collapsed.value) { lightenSel(); hideTooltip(); } } function darkenSel() { selection.attr("opacity", 1).style("mix-blend-mode", null); } function lightenSel() { selection .attr("opacity", rectProps.opacity) .style("mix-blend-mode", "multiply"); } function showTooltip() { tt.style("display", "block"); } function hideTooltip() { tt.style("display", "none"); } function moveTooltip(mouseX, mouseY) { tt.style("top", yPos(mouseY)).style("left", xPos(mouseX)); } function xPos(mouseX) { return mouseX > width / 2 ? `calc(${mouseX}px - ${tt.style("width")})` : `${mouseX + 24}px`; } function yPos(mouseY) { return mouseY > height / 2 ? `calc(${mouseY - 24}px - ${tt.style("height")})` : `${mouseY + 12}px`; } function setContents() { if (!viewof collapsed.value) { tt.selectAll("p") .data(Object.entries(selection.datum())) .join("p") .html( ([key, value]) => `${key}: ${ typeof value === 'object' ? value.toLocaleString("en-US") : value }` ); } else { tt.selectAll("p").remove(); } } function setMoseoverDate(mouseX) { mutable mouseoverDate = dateXPos(mouseX).toLocaleString("en-US"); } function setFilteredData(mouseX) { mutable filteredData = dataAroundDate(dateXPos(mouseX)); } function dateXPos(mouseX) { return xScale.invert(mouseX); } function dataAroundDate(date) { return parsed.filter(d => +d.startDate <= +date && +d.endDate >= +date); } }33:[] 2f:{"title":"Collapsable Gantt Chart","cells":[{"id":0,"value":"md`# Collapsable Gantt Chart\n\nA collapsable Gantt Chart allows for condensing the chart's duration based data into a form that highlights temporal density and reduces chart's vertical space. \n\nWhen collapsed, the CSS \\`mix-blend-mode\\` property helps highlight where events overlap to emphasize density. However, this approach is limited in that the color gradation is a by product of the \\`mix-blend-mode\\` and is thus less controllable then say using a linear or threshold scale to set the fill color.\n\nData sourced from [San Francisco 311 service requests](#).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"btnToggle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"filteredData.length\n ? html`

${filteredData.length} event${\n filteredData.length > 1 ? \"s\" : \"\"\n } occured at ${mouseoverDate}

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"md`## Intro Animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"introDelayMs = 1500","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"mutable introPlayed = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"playIntro = {\n if (!introPlayed) {\n await Promises.delay(introDelayMs);\n set(viewof collapsed, true);\n mutable introPlayed = true;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`## Collapsed State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof collapsed = Input(false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"// utility function for updating the collapsed Input value\nfunction set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`## Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"tooltipContainer = html`

\n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`## Chart Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"transition = t => t.duration(1200).ease(d3.easeLinear)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"xScale = d3\n .scaleTime()\n .domain(dateExtent)\n .range([margin.left, width - margin.right - margin.left])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"yScale = d3\n .scaleBand()\n .domain(ids)\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"xAxis = g =>\n g\n .classed(\"x-axis\", true)\n .call(d3.axisBottom(xScale).tickSizeInner(0))\n .call(g => g.attr(\"transform\", `translate(0, ${height - margin.bottom})`))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"xAxis2 = g =>\n g\n .classed(\"x-axis-2\", true)\n .attr(\"opacity\", 1)\n .attr(\"isolation\", \"isolate\")\n .call(\n d3.axisBottom(xScale).tickSizeInner(height - margin.bottom - margin.top)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick text\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ccc\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"yAxis = g =>\n g\n .classed(\"y-axis\", true)\n .attr(\"opacity\", 1)\n .call(d3.axisLeft(yScale).tickSizeInner(0))\n .call(g => g.attr(\"transform\", `translate(${margin.left}, 0)`))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"margin = ({ top: 0, left: 24, bottom: 24, right: 12 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"rectProps = ({ height: 16, padding: 2, minWidth: 2, opacity: 0.7 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"height = parsed.length * (rectProps.height + rectProps.padding) +\n margin.top +\n margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"mutable mouseoverDate = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"mutable filteredData = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"ids = parsed.map(d => d.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"dateExtent = d3.extent(\n d3.merge([parsed.map(d => d.startDate), parsed.map(d => d.endDate)])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"parsed = data\n .map(({ startDate, endDate, ...d }) => ({\n ...d,\n startDate: new Date(startDate),\n endDate: new Date(endDate)\n }))\n .sort((a, b) => b.startDate - a.startDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"requestCategories = [\"Residential Building Request\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"requestLimit = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { data } with {\n requestCategories as categories,\n requestLimit as limit\n} from \"@clhenrick/hello-soda-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"import { html } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"import { Button, Input } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}