25:["$","title",null,{"children":"d3.js Annotations | Nick's Data Viz | Observable"}] 49:T904,annotate = { const annotations = [ { // note: { // title: "text holder", // lineType: "none", // align: "middle", // wrap: 150 //custom text wrapping // }, subject: { height: 900- margin, width: 165 }, type: d3_annotation.annotationCalloutRect, y: 0, disable: ["connector"], // doesn't draw the connector //can pass "subject" "note" and "connector" as valid options x: 530, y: 0, dy: 1, dx: 1, className: "show-bg", data: {} }, { note: { label: "Basic settings with subject position(x,y) and a note offset(dx, dy)", title: "d3.annotationLabel" }, x: 50, y: 150, dy: 137, dx: 162 }, { note: { label: "Added connector end 'arrow', note wrap '180', and note align 'left'", title: "d3.annotationLabel", wrap: 150, align: "left" }, connector: { end: "arrow" // 'dot' also available }, x: 170, y: 150, dy: 137, dx: 162 }, { note: { label: "Changed connector type to 'curve'", title: "d3.annotationLabel", wrap: 150 }, connector: { end: "dot", type: "curve", //can also add a curve type, e.g. curve: d3.curveStep points: [[100, 14], [190, 52]] }, x: 350, y: 150, dy: 137, dx: 262 }, { //below in makeAnnotations has type set to d3.annotationLabel //you can add this type value below to override that default type: d3_annotation.annotationCalloutCircle, note: { label: "A different annotation type", title: "d3.annotationCalloutCircle", wrap: 190 }, //settings for the subject, in this case the circle radius subject: { radius: 50 }, x: 620, y: 150, dy: 137, dx: 102 } ].map(function(d) { d.color = "#E8336D"; return d; }); const makeAnnotations = d3_annotation .annotation() .type(d3_annotation.annotationLabel) .annotations(annotations); d3.select("svg") .append("g") .attr("class", "annotation-group") .call(makeAnnotations); }4a:[] 29:{"id":"09f32cc001302f19","slug":null,"title":"d3.js Annotations","thumbnail":"a00392ffebcda560e30572ccbd4d5534412086aaca90c9a1a9d852241410188d","access_level":"public","create_time":"$D2023-10-24T16:18:21.315Z","update_time":"$D2023-10-24T16:19:10.795Z","view_time":null,"first_public_time":"$D2023-10-24T16:18:21.315Z","has_unpublished_edits":null,"fork":{"id":"5aa37172904cd0a8","slug":"d3-js-annotations","title":"d3.js Annotations","owner":{"id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0d5153d2999d0cde","login":"nickdataviz","name":"Nick's Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/946c7631d57ed3c4d55c409adb9fdfe6a186bf8122e4b26a860954995ef0586b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":153,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"955a9adbd457cc93","login":"nickgraffis","name":"Nick Graffis","avatar_url":"https://avatars-next.observableusercontent.com/4f17309bff6c0bfd772287f39a04a3fd85e5a0d3375ad2191a62982b406df0fa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"0d5153d2999d0cde","login":"nickdataviz","name":"Nick's Data Viz","avatar_url":"https://avatars-next.observableusercontent.com/946c7631d57ed3c4d55c409adb9fdfe6a186bf8122e4b26a860954995ef0586b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"955a9adbd457cc93","login":"nickgraffis","name":"Nick Graffis","avatar_url":"https://avatars-next.observableusercontent.com/4f17309bff6c0bfd772287f39a04a3fd85e5a0d3375ad2191a62982b406df0fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.js Annotations","cells":[{"id":50,"value":"md`\n# d3.js Annotations\n\nd3-annotation with built-in annotation types, or extend it to make custom annotations. It is made for d3-v4 in SVG.\n\nCredit to Suzie Lu. \n\nsource: https://d3-annotation.susielu.com/#examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.3.0/d3-annotation.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`\n \n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"html`\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null