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; }