2a:null 2b:["$","title",null,{"children":"Annotating images with D3 and d3-annotation | Christopher L. Keller | Observable"}] 30:T401,annotateKitchen = { const beforeKitchen = [{ note: { label: "We're left to hold memories close...", bgPadding: 20, }, subject: { radius: 175, radiusPadding: 0 }, type: d3_annotation.annotationCalloutCircle, x: 195, y: 165, dy: 200, dx: 55, },].map(function(d) { d.color = "#000000"; return d; }); const afterKitchen = [{ note: { label: "...and purge the darkness that lies in wait", bgPadding: 20, }, subject: { radius: 175, radiusPadding: 0 }, type: d3_annotation.annotationCalloutCircle, x: 195, y: 165, dy: 200, dx: -80, },].map(function(d) { d.color = "#000000"; return d; }); d3.select("svg.after-kitchen") .append("g") .attr("class", "annotation-group") .call(makeAnnotations(afterKitchen)); d3.select("svg.before-kitchen") .append("g") .attr("class", "annotation-group") .call(makeAnnotations(beforeKitchen)); return "Completed"; }31:[{"id":"66f1c9bcd85cb456cae9958b68500d246e7d74489e5eba11af11d0785f4426eccb1be2b4f1f7efbdc6bfc4614f1873dc5cb217cabfd078b1d29d86dd43978bf5","href":"https://static.observableusercontent.com/files/66f1c9bcd85cb456cae9958b68500d246e7d74489e5eba11af11d0785f4426eccb1be2b4f1f7efbdc6bfc4614f1873dc5cb217cabfd078b1d29d86dd43978bf5","name":"after-kitchen@1.png","type":"image/png","lastModified":1615956838609.806,"size":2229373},{"id":"6c5a8fb65655e5426c558b6d97415551c211fd7db052a6fece6c314a9c7e53fbcbafaf78c122a5e8b874f0395a6c968ad7554777f04eabe43e2a1f9017323bfc","href":"https://static.observableusercontent.com/files/6c5a8fb65655e5426c558b6d97415551c211fd7db052a6fece6c314a9c7e53fbcbafaf78c122a5e8b874f0395a6c968ad7554777f04eabe43e2a1f9017323bfc","name":"after-porch@1.png","type":"image/png","lastModified":1615955831267.956,"size":393671},{"id":"7e6ed5be1cc146258dde3053838d8a4f70224ca6ed93ea0010454f7b02f586ca5b037d018074072297cde284f9132b56ec3b9c0f205d083deae8ac867286ed25","href":"https://static.observableusercontent.com/files/7e6ed5be1cc146258dde3053838d8a4f70224ca6ed93ea0010454f7b02f586ca5b037d018074072297cde284f9132b56ec3b9c0f205d083deae8ac867286ed25","name":"before-kitchen.jpg","type":"image/jpeg","lastModified":1615955708215.563,"size":344491},{"id":"e10ebbcf351ef2a9b5b746d9a468d5b5411edbd12a5309f490265c967f9133148db74df893d0eddd91ad61c406175b273ef86c13b0ea7295d61108a30b44b4c2","href":"https://static.observableusercontent.com/files/e10ebbcf351ef2a9b5b746d9a468d5b5411edbd12a5309f490265c967f9133148db74df893d0eddd91ad61c406175b273ef86c13b0ea7295d61108a30b44b4c2","name":"before-porch.jpeg","type":"image/jpeg","lastModified":1615955707718.357,"size":258811},{"id":"8ca2d75ce84ded92c6d9d20caa113c845856900e0e122edb34d976df901b2ff580ed4d5e4eb4a00402afe46ba79691a368e2187e82421adc5cbaecd294e2a2fd","href":"https://static.observableusercontent.com/files/8ca2d75ce84ded92c6d9d20caa113c845856900e0e122edb34d976df901b2ff580ed4d5e4eb4a00402afe46ba79691a368e2187e82421adc5cbaecd294e2a2fd","name":"porch-light.png","type":"image/png","lastModified":1615950152373.078,"size":2074870},{"id":"f2827c2fe3f642d195c0e8e7cb45ce0d108d98d1395de03f8bf57571e9b11f46c30d5d47e742e60aa649cc8bb4782959f0975c38bc48d55ba1033ac59db6757b","href":"https://static.observableusercontent.com/files/f2827c2fe3f642d195c0e8e7cb45ce0d108d98d1395de03f8bf57571e9b11f46c30d5d47e742e60aa649cc8bb4782959f0975c38bc48d55ba1033ac59db6757b","name":"Screen Shot 2021-03-16 at 8.54.45 PM.png","type":"image/png","lastModified":1615949724539.507,"size":1599776},{"id":"c12f0ccd7e50658e1c0a8e6fa65a79ef994fb4ed37a6131383f4b8877e048d0ea5aae770022a65f7b8987b753dcdb3d54ec4157cd919e0f3a35ca2eda628b02c","href":"https://static.observableusercontent.com/files/c12f0ccd7e50658e1c0a8e6fa65a79ef994fb4ed37a6131383f4b8877e048d0ea5aae770022a65f7b8987b753dcdb3d54ec4157cd919e0f3a35ca2eda628b02c","name":"yard-after.png","type":"image/png","lastModified":1615987487445.981,"size":2766189},{"id":"77f156fe6cd48786e2f3c63db4d2bc90b016f4c036769bf42572b9612b82bd9396f584d6311e0bd43a6ef6d4edf5f9abb3950d1c1290369e56b811ed037cf395","href":"https://static.observableusercontent.com/files/77f156fe6cd48786e2f3c63db4d2bc90b016f4c036769bf42572b9612b82bd9396f584d6311e0bd43a6ef6d4edf5f9abb3950d1c1290369e56b811ed037cf395","name":"yard-before.png","type":"image/png","lastModified":1615987485392.569,"size":1301865}] 2e:{"id":"8361945d638f3066","slug":"annotating-images-with-d3-and-d3-annotation","title":"Annotating images with D3 and d3-annotation","thumbnail":"4573781c37f2136d5648c18e085351912a557c09c29ddee7c2a72cd588f9a93c","access_level":"public","create_time":"$D2021-03-15T18:53:20.106Z","update_time":"$D2021-03-17T13:48:00.798Z","view_time":null,"first_public_time":"$D2021-03-17T05:02:58.154Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"b1060e5bd7932c0c","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":"starter_2024"},"version":551,"publish_version":551,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e214d36195dad3a","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":null}],"members":[{"type":"individual","id":"7e214d36195dad3a","login":"chrislkeller","name":"Christopher L. Keller","avatar_url":"https://avatars-next.observableusercontent.com/480c1b063ca680d305e90abbeef687017de8de8a546032d2b65d715341bd861a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Annotating images with D3 and d3-annotation","cells":[{"id":0,"value":"md`# Annotating images with D3 and d3-annotation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"toc({\n title: \"What is here?\",\n headers: \"h2,h3,h4\",\n hideStartingFrom: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`\n## Examples of Image Annotation\n\nUsing Suzie Lu's [d3-annotation library](https://d3-annotation.susielu.com/#examples) to process [some trauma and grief](https://www.facebook.com/channel3000/posts/fatal-house-fire-in-mount-horeb-the-victim-has-not-been-identified-at-this-time-/10157327601392060/) and learn how to annotate images.\n\nMy father [died in a fire on March 18, 2020](https://www.channel3000.com/mount-horeb-man-found-dead-following-house-fire/). The fire destroyed my childhood home, the home he built himself for our family. The home where we made so many memories.\n\nAs the anniversary looms, I realize — despite everything I previously thought — I am only now prepared to process the loss and grief and trauma of that day.\n\nSure is something when you realize you haven't processed anything after a year. Thought about, dwelled on and allowed it to keep you hidden away, sure.\n\nBut process? Nah.\n\nThank you [dad](https://blog.chrislkeller.com/eulogy-remembering-that-sunday-with-my-dad).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"html`\n\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"annotateYard = {\n\n let subject = {\n radius: 115,\n padding: 0\n };\n \n const yardBefore = [{\n note: {\n label: \"Dreams begin as a blank canvas...\",\n bgPadding: 20,\n },\n subject: subject,\n type: d3_annotation.annotationCalloutCircle,\n x: 265,\n y: 140,\n dy: 200,\n dx: 55,\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n\n const yardAfter = [{\n note: {\n label: \"...ultimately erased, ready for another's dream\",\n bgPadding: 20,\n },\n subject: subject,\n type: d3_annotation.annotationCalloutCircle,\n x: 265,\n y: 140,\n dy: 200,\n dx: -80,\n\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n \n d3.select(\"svg.yard-after\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(yardBefore));\n \n d3.select(\"svg.yard-before\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(yardAfter));\n\n return \"Completed\";\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"html`\n\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"annotate = {\n const afterAnnotations = [{\n note: {\n label: \"What becomes of the yellow porch light...\",\n bgPadding: 20,\n },\n subject: {\n radius: 135,\n radiusPadding: 0\n },\n type: d3_annotation.annotationCalloutCircle,\n x: 145,\n y: 25,\n dy: 385,\n dx: 55,\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n\n const beforeAnnotations = [{\n note: {\n label: \"...that used to beckon a little child home\",\n bgPadding: 20,\n },\n subject: {\n radius: 10,\n radiusPadding: 0\n },\n type: d3_annotation.annotationCalloutCircle,\n x: 193,\n y: 25,\n dy: 385,\n dx: -80,\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n\n d3.select(\"svg.after\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(afterAnnotations));\n \n d3.select(\"svg.before\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(beforeAnnotations));\n\n return \"Completed\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"html`\n\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"annotatePorch = {\n const beforePorch = [{\n note: {\n label: \"That first time you felt what it meant to 'win'...\",\n bgPadding: 20,\n },\n subject: {\n radius: 75,\n radiusPadding: 0\n },\n type: d3_annotation.annotationCalloutCircle,\n x: 195,\n y: 165,\n dy: 245,\n dx: 55,\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n\n const afterPorch = [{\n note: {\n label: \"...is the same place where it all felt lost\",\n bgPadding: 20,\n },\n subject: {\n radius: 75,\n radiusPadding: 0\n },\n type: d3_annotation.annotationCalloutCircle,\n x: 245,\n y: 125,\n dy: 285,\n dx: -80,\n },].map(function(d) {\n d.color = \"#000000\";\n return d;\n });\n \n d3.select(\"svg.after-porch\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(afterPorch));\n \n d3.select(\"svg.before-porch\")\n .append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(makeAnnotations(beforePorch));\n\n return \"Completed\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"html`\n\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"function makeAnnotations(annotationGroup) {\n return d3_annotation\n .annotation()\n .type(d3_annotation.annotationLabel)\n .annotations(annotationGroup);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"width = 475","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"height = 475","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"importsHeader = md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"packagesHeader = md`\n### Package Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"d3_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"userImports = md`\n### User Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {\n toc,\n} from '@chrislkeller/boilerplate-imports-for-graphics'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"