plotHSgradsUS = { const wiche2024DataFiltered = wiche2024Data.filter( (d) => d.Stabbr === "_U" && d.SchoolSector === "Grand Total (public+private)" && d.Grade === "High school graduates" ); return addTooltips( Plot.plot({ title: html`

High School Graduates in the United States from 2009 to 2041

`, //of Degrees Awarded (2023) and Job Openings (2023) in Texas:
Selected Engineering Occupations caption: caption( "Data Source: [WICHE Knocking at the College Door (2024)](https://www.wiche.edu/knocking/key-findings/graduates/)" ), x: { legend: false, //tickFormat: "",\ tickFormat: (d) => String(d), tickSize: 0, label: null, line: true, domain: [2008.5, 2042.5], grid: true, ticks: d3.range(2009, 2043, 3) }, width, marginLeft: 50, marginRight: 50, color: { legend: false, //nice: true, range: Okabe_Ito }, y: { tickSize: 0, grid: true, label: null, nice: true, domain: [0, 4.1e6], //Math.max(...wiche2024DataFiltered.map((d) => d.Students))], // 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: "10px", fontWeight: "bold", overflow: "hidden" }, marks: [ Plot.dot(wiche2024DataFiltered, { x: "Year", y: "Students", fill: null, stroke: null, r: 2, tip: false, title: (d) => `High School Graduates\n${d3.format("")([d.Year])}\n${d3.format( "," )(d.Students)}` }), Plot.line( wiche2024DataFiltered.filter( (d) => d.ActualProjected === "Reported/Actual" || d.ActualProjected === "Includes Reported/Actual and Projected Values" ), { x: "Year", y: "Students", // z: "Variable", stroke: "#1B7939", strokeDasharray: null, strokeWidth: 2.2, tip: false } ), Plot.line( wiche2024DataFiltered.filter( (d) => d.ActualProjected === "Projection" ), { x: "Year", y: "Students", stroke: "#E69F00", strokeDasharray: [6, 6], strokeWidth: 2, tip: false } ), Plot.ruleX([2023.5], { stroke: "black", // or any color you prefer strokeWidth: 3 // adjust thickness as needed }), Plot.text(["Reported"], { x: 2023.5, y: 4.2e6, // * 0.88, // Position at 90% of y-axis height dx: -20, // Shift text left fontSize: 12, textAnchor: "end", fill: "#1B7939" }), Plot.arrow(["Arrow1"], { x1: 2023.5, x2: 2023.5 - 4, y: 4.1e6, //4.5e6 * 0.85, y1: 4.1e6, // 4.5e6 * 0.85, stroke: "#1B7939", // stroke: "black", strokeWidth: 1.5, headLength: 10, dx: -20 // Shift text left }), // // Right side annotation Plot.text(["Projected"], { x: 2023.5, y: 4.2e6, //y: 5.5e6 * 0.88, dx: 20, // Shift text right fontSize: 12, fill: "#E69F00", textAnchor: "start" }), Plot.arrow(["Arrow2"], { x1: 2023.5, x2: 2023.5 + 4, y: 4.1e6, //4.5e6 * 0.85, y1: 4.1e6, // 4.5e6 * 0.85, // y: 5.5e6 * 0.85, // y1: 5.5e6 * 0.85, stroke: "#E69F00", 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: "middle", // 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: "middle", // fontSize: "12px", // fontWeight: "bold", // dx: 0, // dy: -15, // text: (d) => `2017 Projections` // This will show the count below each dot // } // ) ] }) ); }