plot18yos = { const estProj18yosFiltered = estProj18yos.filter((d) => d.YEAR < 2061); // "#E69F00", lt orange // "#56B4E9", lt blue // "#009E73", green // "#F0E442", yellow // "#0072B2", dk blue // "#D55E00", dk orange // "#CC79A7", lt purple // "#000000" black return addTooltips( Plot.plot({ //title: html`

The 2023 Projections dramatically reduce the number of 18-year-olds in the US beginning in 2035 when compared to the 2017 Projections.

`, title: html`
By 2060, the 2023 Projections represent a decrease of almost 700,000 18-year-olds in America when compared to the 2017 Projections.
`, //of Degrees Awarded (2023) and Job Openings (2023) in Texas:
Selected Engineering Occupations caption: caption( "Data Source: [U.S. Census Bureau](https://www2.census.gov/programs-surveys/popest/datasets/2020-2023/national/asrh/nc-est2023-agesex-res.csv)" ), x: { legend: false, //tickFormat: "",\ tickFormat: (d) => String(d), tickSize: 0, label: null, line: true, domain: [1999.5, 2060.5], grid: true // ticks: d3.range(2014, 2024, 1) }, width, marginLeft: 50, marginRight: 10, color: { legend: false, //nice: true, range: Okabe_Ito }, y: { tickSize: 0, grid: true, label: null, nice: true, domain: [0, Math.max(...estProj18yosFiltered.map((d) => d.POP_18))], // axis: null, ticks: d3.range(0, 5000000 + 50000, 500000), tickFormat: (d) => { if (d < 1000000) { return d3.format(".0f")(d / 1000) + "k"; // Less than 1M, show as k } // For millions, check if it's a whole number const inMillions = d / 1e6; return inMillions % 1 === 0 ? Math.round(inMillions) + "M" // Whole numbers: 1M, 2M, etc. : d3.format(".1f")(inMillions) + "M"; // Decimals: 1.5M, 2.5M, etc. } // tickFormat: d3.format(".1~M") // tickFormat: (d) => { // if (d < 1000000) { // return d3.format(".0f")(d / 1000) + "k"; // Less than 1M, show as k // } // return d3.format(".1f")(d / 1e6) + "M"; // 1M and above, show as M // } }, style: { //backgroundColor: "#6d8399", // //color: "#c9daf4", // fontFamily: "system-ui", fontSize: "11px", fontWeight: "bold", overflow: "hidden" }, marks: [ Plot.dot(estProj18yosFiltered, { x: "YEAR", y: "POP_18", fill: null, stroke: null, r: 2, tip: false, title: (d) => `Estimated number of 18-year-olds\n${d3.format("")([ d.YEAR ])}\n${d3.format(",")(d.POP_18)}` }), Plot.line( estProj18yosFiltered.filter((d) => d.Variable === "Estimate"), { x: "YEAR", y: "POP_18", z: "Variable", stroke: "#1B7939", strokeDasharray: null, strokeWidth: 2.2, tip: false } ), Plot.line( estProj18yosFiltered.filter((d) => d.Variable === "Projection2017"), { x: "YEAR", y: "POP_18", stroke: "Variable", strokeDasharray: [6, 6], strokeWidth: 2, tip: false } ), Plot.line( estProj18yosFiltered.filter((d) => d.Variable === "Projection2023"), { x: "YEAR", y: "POP_18", stroke: "Variable", strokeDasharray: [2, 6], strokeWidth: 2, tip: false } ), Plot.ruleX([2023.5], { stroke: "black", // or any color you prefer strokeWidth: 3 // adjust thickness as needed }), Plot.text(["Estimated"], { x: 2023.5, y: 5.5e6 * 0.88, // Position at 90% of y-axis height dx: -20, // Shift text left fontSize: 12, textAnchor: "end" }), Plot.arrow(["Arrow1"], { x1: 2023.5, x2: 2023.5 - 7, y: 5.5e6 * 0.85, y1: 5.5e6 * 0.85, stroke: "black", strokeWidth: 1.5, headLength: 10, dx: -20 // Shift text left }), // Right side annotation Plot.text(["Projected"], { x: 2023.5, y: 5.5e6 * 0.88, dx: 20, // Shift text right fontSize: 12, textAnchor: "start" }), Plot.arrow(["Arrow2"], { x1: 2023.5, x2: 2023.5 + 7, y: 5.5e6 * 0.85, y1: 5.5e6 * 0.85, stroke: "black", strokeWidth: 1.5, headLength: 10, dx: 20 // Shift text left }), Plot.text( estProj18yosFiltered.filter( (d) => d.YEAR === 2060 && d.Variable === "Projection2023" ), { x: "YEAR", y: "POP_18", fill: "Variable", textAnchor: "end", fontSize: "12px", fontWeight: "bold", dx: 0, dy: 15, text: (d) => `2023 Projections` // This will show the count below each dot } ), Plot.text( estProj18yosFiltered.filter( (d) => d.YEAR === 2060 && d.Variable === "Projection2017" ), { x: "YEAR", y: "POP_18", fill: "Variable", textAnchor: "end", fontSize: "12px", fontWeight: "bold", dx: 0, dy: -15, text: (d) => `2017 Projections` // This will show the count below each dot } ) ] }) ); }