31:Ta91,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const svgAxis = d3.create("svg").attr("viewBox", [0, 0, width, 30]); const tooltip = svg.append("g").attr("class", "tooltip"); svgAxis .append("rect") .attr("fill", "white") .attr("width", width) .attr("height", 30) .attr("x", 0); svgAxis.append("g").call(xAxis); const sidebar = html``; const container = html`

${sidebar}${svg.node()}

`; const unstick = makeSticky(container, sidebar, { interval: 0, transition: 10, offset: 60 }); svg .append("defs") .selectAll("linearGradient") .data(data.filter(d => d.end !== null)) .join("linearGradient") .attr("id", d => (d.gradientId = DOM.uid("gradient")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => x(d.start)) .attr("x2", d => x(d.end)) .call(g => g.append("stop").attr("stop-color", "currentColor")) .call(g => g .append("stop") .attr("offset", "100%") .attr("stop-color", d => (d.endUnknown ? "#fff" : "#ccc")) ); const line = svg .append("g") .attr("stroke", "currentColor") .attr("stroke-width", 2) .selectAll("line") .data(data) .join("line") .attr("stroke", d => (d.end === null ? "currentColor" : d.gradientId)) .attr("x1", d => x(d.start)) .attr("x2", d => x(d.end || x.domain()[1])) .attr("y1", d => y(d.index)) .attr("y2", d => y(d.index)); svg.append("g").call(xAxis); svg.node().get; const label = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.start) - 6) .attr("y", d => y(d.index)) .attr("dy", "0.35em") .attr("fill-opacity", d => (d.end === null ? null : 0.6)) .append("a") .attr("href", d => d.link) .attr("target", "_blank") .text(d => d.name) .on("mousemove", d => { const event = d3.event; const { offsetX, offsetY } = d3.event; tooltip.call(tooltipCall, { mouseX: offsetX, mouseY: offsetY, value: d.description }); }) .on("touchend mouseleave", () => tooltip.call(tooltipCall, null)); const dot = svg .append("g") .attr("fill", "currentColor") .selectAll("circle") .data(data.filter(d => d.end !== null && d.endUnknown === false)) .join("circle") .attr("cx", d => x(d.end)) .attr("cy", d => y(d.index)) .attr("r", 2); // return svg.node(); invalidation.then(unstick); return container; }32:T5ca,tooltipCall = (g, d) => { if (!d) return g.style("display", "none"); const { mouseX, mouseY, value } = d; const padding = { x: 10, y: 10 }; g.raise(); g.style("display", 'block') .style("pointer-events", "none") .style("font", "12px sans-serif") .style("background-color", "green"); // break text into lined of 4 words const textlines = value.split(" ").reduce((ac, e, i, arr) => { if (i % 5 === 0) ac.push(arr.slice(i, i + 5).join(" ")); return ac; }, []); const text = g .selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data(textlines) .join("tspan") .attr("alignment-baseline", "hanging") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .text(d => d) ); const textbox = text.node().getBBox(); g.selectAll("rect") .data([null]) .join('rect') .attr("fill", "white") .attr("stroke", "lightgray") .attr("x", -padding.x / 2) .attr("y", -padding.y / 2) .attr("width", textbox.width + padding.x) .attr("height", textbox.height + padding.y); const xshift = mouseX + textbox.width + padding.x / 2 > width ? -(textbox.width + padding.x) : padding.x; const yshift = mouseY + textbox.height + padding.y / 2 > height ? -(textbox.height + padding.y) : padding.y; g.attr("transform", `translate(${mouseX + xshift},${mouseY + yshift})`); text.raise(); }33:[{"id":"a5f8c8eb438a668ee52d9cfc4a4b6a2364fb84864a585fd4264486da1cc5b22f81cb1477c137ab5eb03a374f831ac4d13c7fabc352a4795372f5a9af72562312","href":"https://static.observableusercontent.com/files/a5f8c8eb438a668ee52d9cfc4a4b6a2364fb84864a585fd4264486da1cc5b22f81cb1477c137ab5eb03a374f831ac4d13c7fabc352a4795372f5a9af72562312","name":"index.json","type":"application/json","lastModified":1682361079791.867,"size":94985}] 2f:{"title":"Killed by Google: A Timeline of Google Products","cells":[{"id":0,"value":"md`# Killed by Google: A Timeline of Google Products\n\nData: [killedbygoogle](https://killedbygoogle.com/)\n\nOriginal Viz: [A Timeline of Apple Products](https://observablehq.com/@mbostock/a-timeline-of-apple-products) by Mike bostock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"legend = {\n const arrowId = DOM.uid(\"arrow\");\n const gradientId = DOM.uid(\"gradient\");\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"liveData = fetch(\"https://killedbygoogle.com/api/graveyard\")\n .then((d) => d.json())\n .then((items) => {\n const data = items.map((e) =>\n Object.assign(e, {\n start: parseDate(e.dateOpen),\n end: parseDate(e.dateClose)\n })\n );\n return data\n .sort((a, b) => (a.start > b.start ? 1 : -1))\n .map((e, index) => Object.assign(e, { index }));\n })\n .catch(() => null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"backupData = FileAttachment(\"index.json\")\n .json()\n .then((d) => {\n const items = d.pageProps.items;\n const data = items.map((e) =>\n Object.assign(e, {\n start: parseDate(e.dateOpen),\n end: parseDate(e.dateClose)\n })\n );\n return data\n .sort((a, b) => (a.start > b.start ? 1 : -1))\n .map((e, index) => Object.assign(e, { index }));\n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"data = liveData || backupData","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"x = d3\n .scaleUtc()\n .domain([d3.min(data, (d) => d.start), d3.max(data, (d) => d.end)])\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scalePoint()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 50))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .append(\"g\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 2)\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", (d) => 0.5 + x(d))\n .attr(\"x2\", (d) => 0.5 + x(d))\n .attr(\"y2\", height - margin.bottom - margin.top)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"margin = ({ top: 30, right: 10, bottom: 10, left: 95 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = (data.length + 2) * 20 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"import { makeSticky } from \"@mootari/sticky-positioning\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}