2c:null 2d:["$","title",null,{"children":"Happy Groundhog Day | Deepali Kank | Observable"}] 32:Ta6c,chart = { const width = 960; const height = 600; const tooltipWidth = 500; const tooltipHeight = 200; const projection = d3 .geoAlbersUsa() .translate([width / 2, height / 2]) .scale([1200]); const path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)); svg .append("path") .datum(topojson.merge(us, us.objects.lower48.geometries)) .attr("fill", "#f3e9dc") .attr("stroke", "#c08552") .attr("d", d3.geoPath()); svg .append("path") .datum(topojson.mesh(us, us.objects.lower48, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#c08552") .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); const g = svg.append("g").attr("fill", "none").attr("stroke", "black"); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0.9) .style("position", "absolute") .style("width", tooltipWidth + "px") // Set the width of the tooltip .style("height", tooltipHeight + "px") // Set the height of the tooltip .style("display", "flex") // Use flexbox for layout .style("align-items", "center") // Center items vertically .style("background", "white") .style("padding", "10px") .style("border", "1px solid #ccc") .style("border-radius", "5px") .style("pointer-events", "none") .style("font-size", "0.55em") .style("color", "black") .style("box-shadow", "2px 2px 10px rgba(0,0,0,0.5)"); svg .selectAll("circle") .data(df) .enter() .append("circle") .attr("cx", (d) => projection([d.longitude, d.latitude])[0]) .attr("cy", (d) => projection([d.longitude, d.latitude])[1]) .attr("r", 8) .attr("opacity", 0.5) .attr("fill", "#8B4513") .attr("stroke", "black") .on("mouseover", (event, d) => { const xOffset = event.pageX + tooltipWidth + 20 > window.innerWidth ? -tooltipWidth - 20 : 10; tooltip.transition().duration(200).style("opacity", 0.9); tooltip .html( `

${d.name}
${d.description}

` ) .style("left", event.pageX + xOffset + "px") .style("top", event.pageY - tooltipHeight / 2 + "px"); // Center the tooltip vertically }) .on("mouseout", () => { tooltip.transition().duration(500).style("opacity", 0); }); return svg.node(); }33:[{"id":"28adeaa93644dafc5d89e704a8f3e6b082164c72286ffb825ce23cd42ce29f901ff3ce795cf81c9ee1ce015fee968f90b1583828139b92e34b34ba2cc7f83b69","href":"https://static.observableusercontent.com/files/28adeaa93644dafc5d89e704a8f3e6b082164c72286ffb825ce23cd42ce29f901ff3ce795cf81c9ee1ce015fee968f90b1583828139b92e34b34ba2cc7f83b69","name":"groundhogs.csv","type":"text/csv","lastModified":1706791294189.852,"size":56342}] 30:{"id":"6e9644cd3f623d09","slug":null,"title":"Happy Groundhog Day","thumbnail":"da340fada016cf2640452c7941756e84b42c8fc9bce83205121b8edd79e8e908","access_level":"public","create_time":"$D2024-02-01T12:41:03.285Z","update_time":"$D2024-02-02T07:59:39.753Z","view_time":null,"first_public_time":"$D2024-02-01T12:41:03.285Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":130,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Happy Groundhog Day","cells":[{"id":112,"value":"# Happy Groundhog Day\nAccording to the Groundhog Day tradition, if the groundhog sees its shadow and goes back into its burrow, that is a prediction of six more weeks of winter. Otherwise spring will come early. The map shows the locations of the Groundhogs. There are 61 in the US. Find your nearest Groundhog Day prognosticator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"groundhogs = await FileAttachment(\"groundhogs.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"groundhogs","database":"$undefined"},{"id":44,"value":"SELECT * FROM groundhogs\nwhere country = 'USA'","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"df","database":"groundhogs.csv"},{"id":6,"value":"us = {\n const us = await d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json\");\n us.objects.lower48 = {\n type: \"GeometryCollection\",\n geometries: us.objects.states.geometries.filter(d => d.id !== \"02\" && d.id !== \"15\")\n };\n return us;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"