{ const marks = []; if (genderFilter.includes("Men")) { marks.push( Plot.dot( mens, Plot.pointer({ x: "date", y: "time", fill: d3.schemeTableau10[0], r: 8, opacity: 0.5 }) ), Plot.dot(mens, { x: "date", y: "time", fill: d3.schemeTableau10[0] //tip: "xy" }), Plot.text( mens, Plot.pointer({ px: "date", py: "time", dy: -17, frameAnchor: "top-right", fontVariant: "tabular-nums", fontSize: 12, text: (d) => [ `${d.time.toFixed(2)}s`, d.person, d.competition, d.date.toLocaleDateString() ].join(" ") }) ), Plot.linearRegressionY(mens, { x: "date", y: "time", fill: d3.schemeTableau10[0], stroke: d3.schemeTableau10[0] }) ); } if (genderFilter.includes("Women")) { marks.push( Plot.dot(womens, { x: "date", y: "time", fill: d3.schemeTableau10[2] //tip: "xy" }), Plot.text( womens, Plot.pointer({ px: "date", py: "time", dy: -17, frameAnchor: "top-right", fontVariant: "tabular-nums", fontSize: 12, text: (d) => [ `${d.time.toFixed(2)}s`, d.person, d.competition, d.date.toLocaleDateString() ].join(" ") }) ), Plot.dot( womens, Plot.pointer({ x: "date", y: "time", fill: d3.schemeTableau10[2], r: 8, opacity: 0.5 }) ), Plot.linearRegressionY(womens, { x: "date", y: "time", fill: d3.schemeTableau10[2], stroke: d3.schemeTableau10[2] }) ); } return html`

${Plot.plot({ width: Math.min(640, width), inset: 20, grid: true, y: { //domain: [4.6, 5.3], type: "log", label: "time (s)" }, x: { label: "year" }, marks })}

Women's (top, red) and men's (bottom, blue) speed climbing world record progression. Hover to inspect records.
Source: https://en.wikipedia.org/wiki/Speed_climbing

`; }