2d:null 2e:["$","title",null,{"children":"d3.js Annotations | Chris L Buie | Observable"}] 33: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); }34:[] 31:{"id":"5aa37172904cd0a8","slug":"d3-js-annotations","title":"d3.js Annotations","thumbnail":"71f5fa669d38c7d9591e60fb46dcde619169ac57fd66b0d1aa174c8b3b91822b","access_level":"public","create_time":"$D2020-04-01T19:35:55.693Z","update_time":"$D2020-04-03T00:50:50.189Z","view_time":null,"first_public_time":"$D2020-04-02T01:13:31.625Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":"starter_2024"},"version":149,"publish_version":149,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null}],"members":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"cdeeaa28cf4eb3ed","slug":"mycharts","title":"myCharts","owner":{"id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie"}},"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":26,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`\n \n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"html`\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"