@maddy-brown2, i haven't figured this fully yet, but see the added text mark based on this https://observablehq.com/plot/transforms/centroid maybe something that can help geolocate the datapoints

updated now, see code and comments below

Hi Angie, Thanks for your help today with our project in class! We have another question about getting the Outcome Gap by State map below to work. We got the tooltip to show up, but no matter what we try the state always says "undefined." We've tried to connect the state data to the tooltip multiple times, but we haven't had any luck yet. Our ultimate goal is to get that working and then maybe add some photos of various schools to certain tooltips in certain states. Thank you so much for your help!

it should be "d.properties.name" — examine "states" in a separate cell, see what it's made of and know what is "d" inside your loop photos of schools are a nice idea! do you have some examples? how do you link a photo to the dataset? please add a couple and explain the logic how they should connect to datapoints

To add a photo into the tooltip for certain states, we would need to create a new column in the education_data dataset and add an image web URL to the cell in the new column that corresponds to the row of the state we want to show a photo for. Then, we could edit the tip to have a d pointer that connects to a div block of HTML. Something like: <img src="${d.img}" alt="${d.label}" style="width: 100px; height: auto; margin-top: 5px;"> The issue I see with this technique though is that we wouldn't have images for the majority of the states in the dataset, since we only want to have image features in the tooltips for the states we grew up in. But since the d pointer naturally applies to all rows in the dataset, would there be an error/null value in the tooltip for the states that we don't have images for in the new column we make in the dataset? I'm not really sure how we would go about implementing this in our code exactly. Any thoughts Angie? I put an example below of how we could display an image of a school (my high school in Washington) as a JPG in HTML code.

not without struggle, but proompted my way to the tooltip with pictures now see the changes: ${tooltipImage} in HTML cell, which refers to the content of "tooltipImage" cell nothing weird there hardcoded dataset: imagesDataset notice the changed URLs. images are not allowed to be downloaded programmatically by most sites, read about CORS for more info, it's a common security annoyance. a ghetto solution to this is to add https://corsproxy.io/? before the link. if the resources don't update often (which in our case they aren't), it is sufficient. see https://corsproxy.io/ mutable element: mutable tooltipContent this is observable reactive programming magic, not javascript canon — allows one cell to update another cell (called mutable), then a third cell to react to that update, thus passing the updated data from the first cell to the third added marks and interactivity code in "funding" cell marks are nothing new except maybe className: "imageDots" — this is what allows me to reference them later. but attaching event listeners to the marks in the end of "funding" cell inside a timer is another ghetto solution. 0ms timer is needed to push the binding of listeners to a bit later so that plot marks have time to be ready. if marks would allow to set listeners directly like in proper d3, this wouldn't be needed 👹👹👹👹 all in all, not as elegant as i would expect it to be, but done

you can also ask others in the class to send you lat-lon-name and image of their schools, then we could have more of these dots

hey team, i messed around because i got curious about how to import the school district shapes in here. feel free to replicate what i did! it's a good exercise. solution outline: google "school district boundaries", download a 200 MB zip, give it to mapshaper.org, simplify shapes a lot so that the output has a manageable size (i simplified almost all the way, preventing shape removal), export as topojson, upload here, the rest you see in the notebook. this would definitely count as hacker points even when the solution is now known! there are 13k+ school districts compared to 3k+ counties hope Audras laptop doesn't explode seeing this