` with `d3.select(e.target).select('title')` and then using `.text()` on that to get the body of `<title> event desc

29:null 2a:["$","title",null,{"children":"1785 days from September 19, 2023 | Joe | Observable"}] 2f:Tc0c,dd = { // Define the start and end dates // const startDate = new Date("January 1, 2023"); // const endDate = new Date("August 9, 2028"); const today = new Date(); // Create an array of dates between the start and end dates // const dateArray = d3.timeDays(startDate, endDate); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // Define the color scale for the weeks of the year const colorScale = d3.scaleOrdinal(d3.interpolateRainbow).domain([0, 52]); // Assuming 52 weeks in a year const colorMonthScale = d3 .scaleSequential(d3.interpolateRainbow) .domain([0, 12]); // Assuming 52 weeks in a year const colorYearScale = d3 .scaleSequential(d3.interpolateRainbow) .domain([2023, 2028]); // Assuming assuming 5 years. const nonEventRadius = 5; const eventRadius = 9; const nonEventStrokeWidth = 2; const eventStrokeWidth = 5; // Define the radius of the circles const radius = 5; // Append a new text element and set its attributes and text content // place it a (0,15) remember 15 down from top const textt = svg.append("text").attr("x", 0).attr("y", 15); var oldRadius = nonEventRadius; var oldStrokeWidth = nonEventStrokeWidth; // Create a group element for each date and append a circle to it const days = svg .selectAll("circle") .data(allDates) .enter() // .append("g")| .append("circle") .on("mouseover", function (n) { // console.log("this here", n.target); // this works! const titleText = d3.select(n.target).select("title").text(); // <<<<< the magic // console.log("this here", titleText); // this works! textt.text(titleText); oldRadius = d3.select(this).attr("r"); oldStrokeWidth = d3.select(this).attr("strokeWidth"); d3.select(this).attr("r", 10); }) .on("mouseout", function () { // console.log("bye"); // this works! textt.text(""); d3.select(this).attr("r", oldRadius); d3.select(this).attr("strokeWidth", oldStrokeWidth); }) .attr("cx", (_, d) => x(d % 100)) .attr("cy", (_, d) => y(Math.floor(d / 100))) .attr("r", (d) => (d.event.length == 0 ? nonEventRadius : eventRadius)) .attr("fill", (d) => d.date < today ? "black" : colorMonthScale((d3.timeFormat("%m")(d.date) * 5) % 12) ) // .attr("stroke-width", (d) => d.event.length == 0 ? nonEventStrokeWidth : eventStrokeWidth ) // .attr("stroke", (d) => colorYearScale(d3.timeFormat("%Y")(d.date) % 2)); .attr("stroke", (d) => d3.timeFormat("%Y")(d.date) % 2 ? "gray" : "black" ); // we attach date specific info to the days svg circles here and put it in the "title" sub-element // if there's no special "event" info we just put in the date // I want to add the number of days from today to today days .append("title") .text((d, i) => d.event.length == 0 ? d3.timeFormat("%b %d")(d.date) + " : " + daysFromToday(d.date, today) : d.event + " : " + daysFromToday(d.date, today) ); return svg.node(); }30:[] 2d:{"id":"a5e181437e6f95d0","slug":null,"title":"1785 days from September 19, 2023","thumbnail":"8eb92e79c6eb12394858082d765187dce7aa8512adcbaef45e8aceb71a1f5c3b","access_level":"public","create_time":"$D2023-02-24T23:39:41.742Z","update_time":"$D2023-11-30T14:32:44.415Z","view_time":null,"first_public_time":"$D2023-02-24T23:39:41.742Z","fork":{"id":"d098265a1f7e0a4a","slug":null,"title":"D3 Scatterplot","owner":{"id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d4bde6b3ee650269","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":"starter_2024"},"version":395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null}],"members":[{"type":"individual","id":"fc88ff3942f7785e","login":"josephsmann","name":"Joe","avatar_url":"https://avatars-next.observableusercontent.com/8089eca3d0d1bfc18ba5f7492ea1574d05db45eebbc8e0f3af1c72105b236d4c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"1785 days from September 19, 2023","cells":[{"id":0,"value":"# ${daysFromToday( new Date('August 9, 2028'), new Date())} days from ${d3.timeFormat(\"%B %d, %Y\")(new Date())}\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"

\n### Code Notes\n\ngot tooltips working by using `.title(d => ...)` on circles.\n\ngot text node updating. grrr. didn't need `d3.select(textt)` because `textt` is already a d3 object!\n\ngot some info out of the circle node by access the child `` with `d3.select(e.target).select('title')` and then using `.text()` on that to get the body of `<title> event desc `\n\nUsing chatGPT to change my life. so good for docs!\n\nneed to move personal info off page\n\nupdated the text field to display the number of days from today to date with the mouse on it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"allDates = dates.map((d) => {\n const event = specialDates\n .map((sd) => (sd.date.getTime() == d.getTime() ? sd.event : \"\"))\n .join(\"\");\n return { event: event, date: d };\n // return { event: event == \"\" ? d3.timeFormat(\"%d\")(d) : event, date: d };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"specialDates = [\n { event: \"65 Wedding Anniversary\", date: new Date(\"May 20, 2023\") },\n { event: \" 60th Birthday\", date: new Date(\"April 19, 2023\") },\n { event: \" 28th Birthday\", date: new Date(\"May 9, 2023\") },\n { event: \" 25th Birthday\", date: new Date(\"April 4, 2023\") },\n { event: \" S7\", date: new Date(\"July 8, 2023\") },\n { event: \" m.o.\", date: new Date(\"June 1, 2023\") },\n { event: \"le retour?\", date: new Date(\"July 15, 2023\") },\n { event: \"the 2nd au revoir\", date: new Date(\"March 2, 2023\") },\n { event: \"la celebration!\", date: new Date(\"August 9, 2028\") },\n { event: \"Victoria party\", date: new Date(\"September 22, 2023\") },\n { event: \"Mom Dad arrive\", date: new Date(\"December 18, 2023\") },\n { event: \"Christmas\", date: new Date(\"December 25, 2023\") }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"dates = {\n const startDate = new Date(\"January 25, 2023\");\n const stopDate = new Date(\"August 10, 2028\");\n return d3.timeDays(startDate, stopDate);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"daysFromToday = function (d, today) {\n // Create a new date object for today's date\n // const today = new Date();\n\n // Create a new date object for the target date\n const targetDate = d; // Change to the desired date\n\n // Calculate the difference between the two dates in milliseconds\n const differenceInMs = targetDate.getTime() - today.getTime();\n\n // Convert the difference to days and round down using Math.floor()\n const daysFromToday = Math.floor(differenceInMs / (1000 * 60 * 60 * 24)) + 1;\n\n // console.log(daysFromToday); // Output: 10 (as of March 5, 2023)\n return daysFromToday;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// data = FileAttachment(\"penguins.csv\").csv({typed: true})\n[height - margin.bottom, margin.top]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x = d3\n .scaleLinear()\n .domain([0, 100])\n .nice()\n // .domain(d3.extent(data, d => d.flipper_length_mm)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"y = d3\n .scaleLinear()\n .domain([0, 30])\n .nice()\n // .domain(d3.extent(data, d => d.body_mass_g)).nice()\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"