29:null 2a:["$","title",null,{"children":"Interacting with Marker Ends | Steve Kasica | Observable"}] 2f:T335e,html` `30:[] 2d:{"id":"401d00247b93fece","slug":"interacting-with-marker-ends","title":"Interacting with Marker Ends","thumbnail":"7e1914903bb900a0120c1a6099b10cef7ec286ee5540a1de19d704ac411412b6","access_level":"public","create_time":"$D2021-02-28T15:44:28.866Z","update_time":"$D2023-02-28T16:12:33.449Z","view_time":null,"first_public_time":"$D2021-03-01T15:58:00.335Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":"starter_2024"},"version":367,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null}],"members":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interacting with Marker Ends","cells":[{"id":0,"value":"md`# Interacting with Marker Ends \n\n*This post was a small explainer on creating arrows for students in an undergraudate data visualization course at the University of British Columbia in 2021*\n\nWe can turn SVG lines into arrows by referencing a shape defined in [\\`\\`\\`\\` elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker) and specified in the [\\`\\`\\`\\` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) at end of a line by referencing the ID of the \\`\\`\\`\\` using the [\\`\\`url()\\`\\` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/url() in the [\\`\\`marker-end\\`\\` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-end) of the line.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"md`This method effectively append an SVG element defined in the \\`\\`\\`\\` to the \\`\\`\\`\\`. But coordinating interactions, such as hover events, between the two elements can be tricky because the \\`\\`\\`\\` element doesn't appear in the DOM.\n\nInstead of trying to style the \\`\\`\\`\\`, you can create the same effect by changing the element referenced in the \\`\\`marker-end\\`\\` attribute through a [CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) to match the styles applied to the \\`\\`\\`\\`, or \\`\\`\\`\\`, element.\n\nIn the SVG element below, the head is specified as a \\`\\`marker-end\\`\\`, and hovering over the body triggers the change.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html`\n\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`Credits: [Sean Maldjian](https://thenounproject.com/search/?q=snake&i=3576086), [Mary B](https://thenounproject.com/search/?q=goose&i=1175331) / [Noun Project](https://thenounproject)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"snakeBodyD = \"M35.83,39.32l8.63,0c0,4-.32,9.47-2.33,13-3.64,6.3-4,12.93-1.75,19.77a12.93,12.93,0,0,0,1,2.32A4.34,4.34,0,0,0,47,76.69a14.1,14.1,0,0,0,5.89-3.55,14.6,14.6,0,0,0,4.21-6.85c1-3.87,1.79-7.81,2.73-11.7.87-3.62,1.6-7.29,2.79-10.81,2.34-6.91,7.68-10.42,14.63-11.09,5.22-.5,8.18,1.49,10.37,5.75,1.12,2.18.89,4.5.58,6.81a31.68,31.68,0,0,1-2.66,8.89A44.53,44.53,0,0,0,82.28,65a24.32,24.32,0,0,0,.94,11.72,11,11,0,0,0,3.39,4.58c.48.44.91.94,1.37,1.41l-.13.36c-.32,0-.71.12-.95,0a20.14,20.14,0,0,1-9.55-11.8,15.65,15.65,0,0,1-.09-7.39c.54-3,1.36-5.93,2.07-8.89.42-1.75,1-3.48,1.27-5.26a11.61,11.61,0,0,0-.19-3.85c-.36-1.81-1.7-2.58-3.53-2.31a9,9,0,0,0-5.21,2.94A12.83,12.83,0,0,0,68.3,53c-.7,3.77-1.17,7.58-1.75,11.37s-1,7.5-1.73,11.2c-1.53,7.94-9.71,14.85-15.36,16.3a13,13,0,0,1-8.92-.65,18.25,18.25,0,0,1-7.28-5.92,29.15,29.15,0,0,1-5.63-18.27c.07-6.25,2.06-12,4.48-17.6,1-2.23,2-4.43,2.86-6.7\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"snakeHeadD = \"M17.36,35.24a5.15,5.15,0,0,0,.46-2.05c.22-1.71-.69-2.65-2.39-2.68l-1.67-.06A5.25,5.25,0,0,1,9,27.05a11.37,11.37,0,0,1-1-5.32c.13-2.42.44-4.83.77-7.23a4.81,4.81,0,0,1,2.34-3.39c-.7-1.1-1.35-2.17-2.06-3.19C8.18,6.63,7.22,5.39,6.32,4.11,6,3.69,5.54,3.28,6,2.41,6.7,3.25,7.31,4,8.06,4.87,8,3.1,7.2,1.61,7.57-.24c1,.92.76,2,1.07,2.81s.61,1.93.95,2.87S10.3,7.23,10.7,8.1s.87,1.69,1.32,2.56c.6-.12,1.08-.21,1.57-.32a5.66,5.66,0,0,1,4.86,1.1,23.34,23.34,0,0,1,6.41,6.8,7.73,7.73,0,0,1,.24,7c-.16.42-.41.82-.6,1.21A27.59,27.59,0,0,1,26,35.2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"gooseHeadD = \"M26.06,30.65c-.31-.52-.43-2.8-1.51-6.8a52.25,52.25,0,0,0-5-12.89A3.69,3.69,0,0,0,15.7,8.27a7.43,7.43,0,0,0-2.8.5c-1.78.53-2.62.68-3.47,1.56A5.83,5.83,0,0,0,8.4,13c-.45.3-1,.68-1.4,1-2,1.52-4.09,2.18-3.66,3l2-.21A25.12,25.12,0,0,1,8.8,16.5c.95.05,1.75.12,2.33.09a10.2,10.2,0,0,0,4,0h.07c.66.46,1.44,2.41,2,4.47a18,18,0,0,1,.79,5.2,12,12,0,0,1-.63,4.51M12.06,15c.43-.87,1.27-2.18,1.23-3.25-.09-1.28,0-1.23.32-1.43a1.12,1.12,0,0,1,.68-.19c.52.05.65.39.91,1.42a7,7,0,0,1-.14,3.27c-.34,1.29-.32,1.43-1.45,1.56a4.69,4.69,0,0,1-1.29,0C11.29,16.27,11.66,15.92,12.06,15Z\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"