plotBirthsStates = { const cdcNatalityDataFiltered = cdcNatalityData.filter( (d) => d.State !== "USA" && d.Births > 200000 ); return addTooltips( Plot.plot({ title: html`

The gap between Texas and California decreased from 164K in 2003 to 12K in 2023.

`, //, Florida, and New York //title: html`

Population of 18-Year-Olds in Texas from 2000 to 2060

`, //of Degrees Awarded (2023) and Job Openings (2023) in Texas:
Selected Engineering Occupations caption: caption( "Data Source: [CDC Natality Data](https://wonder.cdc.gov/natality.html)" ), x: { legend: false, //tickFormat: "",\ tickFormat: (d) => String(d), tickSize: 0, label: null, line: true, domain: [2002, 2024.5], grid: true, ticks: d3.range(2003, 2024, 2) }, width, marginLeft: 50, marginRight: 50, color: { legend: false, //nice: true, // range: Okabe_Ito, domain: ["TX", "CA", "FL", "NY"], range: [ "#BF0D3E", //Texas "#56B4E9", //CA "#C68F01", //FL, "#009E73" //NY ] }, y: { tickSize: 0, grid: true, label: null, nice: true, domain: [0, Math.max(...cdcNatalityDataFiltered.map((d) => d.Births))], // axis: null, // ticks: d3.range(0, 510000, 50000), 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: "12px", fontWeight: "bold", overflow: "hidden" }, marks: [ Plot.dot(cdcNatalityDataFiltered, { x: "Year", y: "Births", fill: "State_Abb", stroke: "State_Abb", r: 2, tip: false, title: (d) => `Births\n${d.State}\n${d3.format("")([d.Year])}\n${d3.format(",")( d.Births )}` }), Plot.line(cdcNatalityDataFiltered, { x: "Year", y: "Births", stroke: "State_Abb", // strokeDasharray: null, strokeWidth: 2.2, tip: false }), Plot.text( cdcNatalityDataFiltered, Plot.selectFirst({ // x: d => d.hea_indicator + 0.1, x: "Year", y: "Births", fill: "State_Abb", text: "State_Abb", textAnchor: "middle", dy: 0, dx: -15 // text: d => `(${d.race_group}`, // dy: -10, // Optional: Adjusts the vertical position of the label }) ), Plot.text( cdcNatalityDataFiltered, Plot.selectLast({ // x: d => d.hea_indicator + 0.1, x: "Year", y: "Births", fill: "State_Abb", text: "State_Abb", textAnchor: "middle", dy: 0, dx: 15, fontSize: 13 // text: d => `(${d.race_group}`, // dy: -10, // Optional: Adjusts the vertical position of the label }) ), Plot.text(cdcNatalityDataFiltered, { filter: (d) => (d.State_Abb === "TX" || d.State_Abb === "CA") && d.Year === 2007, x: "Year", y: "Births", fill: "State_Abb", text: (d) => `${d3.format(",")(d.Births)}`, // textAnchor: "middle", dy: -10, fontSize: 14 }), Plot.text(cdcNatalityDataFiltered, { filter: (d) => d.State_Abb === "TX" && d.Year === 2023, x: "Year", y: "Births", fill: "State_Abb", text: (d) => `${d3.format(",")(d.Births)}`, // textAnchor: "middle", dy: 15, //dx: 10, fontSize: 14 }), Plot.text(cdcNatalityDataFiltered, { filter: (d) => d.State_Abb === "CA" && d.Year === 2023, x: "Year", y: "Births", fill: "State_Abb", text: (d) => `${d3.format(",")(d.Births)}`, // textAnchor: "middle", dy: -15, fontSize: 14 }) ] }) ); }