2f:T1467,fcelebVis = { let is_even = (x) => x % 2 == 0; let negate_odd = (x) => (is_even(x) ? -1 : 1) * (2 + x); let negate_odd_if = (x, y) => (is_even(x) ? -1 : 1) * y; function roundToMonthEnd(date) { return new Date(date.getFullYear(), date.getMonth() + 1, 0); } const container = html` `; yield container; const div = d3.select(container).append("div").classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(d) { return ` ${d.name}
${d.cve_id.join("; ")}
${d.date.toISOString().split("T")[0]} `; } const svg = d3 .select("svg#celeb") .attr("width", visWidth) .attr("height", height); const bg = svg .append("g") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", visWidth) .attr("height", height) .attr("class", "vuln-background"); const scale_x_date = d3 .scaleLinear() .domain(d3.extent(years)) .range([100, visWidth - 50]); const scale_y_continuous = d3 .scaleLinear() .domain([-250, 250]) .range([height, 0]); const year_markers = svg.append("g"); year_markers .selectAll(".year-marker-base") .data(years) .enter() .append("rect") .attr("x", (d) => scale_x_date(d) - 10) .attr("y", 0) .attr("width", 21) .attr("height", height) .attr("class", "year-marker-base"); const year_lines = svg.append("g"); year_lines .selectAll(".year-marker-line") .data(years) .enter() .append("rect") .attr("x", (d) => scale_x_date(d)) .attr("y", 0) .attr("width", 1) .attr("height", height) .attr("class", "year-marker-line"); const year_labels = svg.append("g"); year_labels .selectAll(".year-labels") .data(mids) .enter() .append("text") .attr("class", "year-label") .attr("x", (d, i) => [1, 2, 3, 4, 5, 6, 7].includes(i) ? scale_x_date(d) : i == 0 ? scale_x_date(d) - 50 : scale_x_date(d) + 50 ) .attr("y", 40) .text((d) => d.getYear() + 1900); year_labels .selectAll(".year-labels") .data(mids) .enter() .append("text") .attr("class", "year-label") .attr("x", (d, i) => [1, 2, 3, 4, 5, 6, 7].includes(i) ? scale_x_date(d) : i == 0 ? scale_x_date(d) - 50 : scale_x_date(d) + 50 ) .attr("y", height - 40) .text((d) => d.getYear() + 1900); const vuln_segments = svg.append("g"); const h = 30; vuln_segments .selectAll(".vuln-segment") .data(glam) .enter() .append("line") .attr("x1", (d) => scale_x_date(d.date)) .attr("y1", (d) => scale_y_continuous(0)) .attr("x2", (d) => scale_x_date(d.date)) .attr("y2", (d) => scale_y_continuous(negate_odd_if(d.sy, h))) .attr("class", "vuln-segment") .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { tooltip.hide(event); }) .on("mousemove", (event, d) => { tooltip.move(event); }); const vuln_text = svg.append("g"); vuln_text .selectAll(".vuln-text") .data(glam) .enter() .append("text") .attr("x", (d) => scale_x_date(d.date)) .attr("y", (d) => scale_y_continuous(negate_odd_if(d.sy, h))) .attr("class", (d) => "vuln-text " + "text-" + d.sy) .attr("dominant-baseline", "middle") .attr( "transform", (d) => "rotate(" + (is_even(d.sy) ? -45 : 45) + " " + scale_x_date(d.date) + " " + scale_y_continuous(negate_odd_if(d.sy, h)) + ")" ) .text((d) => d.name + " ") .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { tooltip.hide(event); }) .on("mousemove", (event, d) => { tooltip.move(event); }) .on("click", (event, d) => { for (const link of d.link) window.open(link, "_blank"); }); const axis = svg.append("g"); axis .append("line") .attr("class", "vuln-axis") .attr("x1", 0) .attr("y1", scale_y_continuous(0)) .attr("x2", visWidth) .attr("y2", scale_y_continuous(0)); const points = svg.append("g"); points .selectAll(".vuln-events") .data(glam) .enter() .append("circle") .attr("id", (d) => "vuln-" + d.sy) .attr("fill", "white") .attr("fill-opacity", 1) .attr("stroke", "black") .style("stroke-width", 1) .attr("cx", (d) => scale_x_date(d.date)) .attr("cy", scale_y_continuous(0)) .attr("r", 5) .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); }) .on("mouseout", (event, d) => { tooltip.hide(event); }) .on("mousemove", (event, d) => { tooltip.move(event); }); yield container; }30:Ta91,function Scrubber( values, { format = (value) => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {} ) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (timer !== null) clearTimeout(timer), (timer = null); if (interval !== null) clearInterval(interval), (interval = null); } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (interval !== null) clearInterval(interval), (interval = null); timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = (event) => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }31:T509,class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }32:T61d,visStyle = html``33:[{"id":"e2d0d8d6f0802858ffd74d734fddb1b57b743efae44d4a6b349b4746a815a0aa603e067b0a74463a6d0e7eb702771f7dec1d1c0663e684932249e38062477b66","href":"https://static.observableusercontent.com/files/e2d0d8d6f0802858ffd74d734fddb1b57b743efae44d4a6b349b4746a815a0aa603e067b0a74463a6d0e7eb702771f7dec1d1c0663e684932249e38062477b66","name":"glam@3.json","type":"application/json","lastModified":1671575015819.525,"size":32177}] 2d:{"title":"Timeline of Celebrity Vulnerabilities","cells":[{"id":90,"value":"# Timeline of Celebrity Vulnerabilities","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"Calendar(glam, {\n x: (d) => d.date,\n y: (d) => 1,\n weekday: \"monday\",\n width: 1000,\n colors: d3.interpolateGreys\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"visWidth = years.length * 1600","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"height = width / 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"mids = Array.from(\n { length: stops.length },\n (_, i) => new Date((stops[i].getTime() + starts[i].getTime()) / 2)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"stops = {\n const ret = d3\n .range(\n d3.min(glam.map((d) => d.year)),\n d3.max(glam.map((d) => d.year)) + 2,\n 1\n )\n .map((_, i) => new Date(`${1999 + i}-01-01`));\n ret.shift();\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"starts = {\n var ret = d3\n .range(\n d3.min(glam.map((d) => d.year)),\n d3.max(glam.map((d) => d.year)) + 2,\n 1\n )\n .map((_, i) => new Date(`${1999 + i}-01-01`));\n ret.pop(1);\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"years = d3\n .range(\n d3.min(glam.map((d) => d.year)),\n d3.max(glam.map((d) => d.year)) + 2,\n 1\n )\n .map((_, i) => new Date(`${1999 + i}-01-01`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"glam = glamPre.map((d) => {\n d.date = new Date(d.date);\n d.sy = d.s;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"glamPre = await FileAttachment(\"glam@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"import {Calendar} from \"@d3/calendar\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}