29:null 2a:["$","title",null,{"children":"SVG overflow visible | Tom Shanley | Observable"}] 2f:T663,chart = { console.clear(); const svg = d3.select("svg"); svg.selectAll("g, line").remove(); let areaLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let linesLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let markersLayer = svg .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); let path = areaLayer .append("path") .datum(data) .attr("fill", "pink") .attr("d", area); let circles = markersLayer .selectAll("circle") .data(data) .join("g"); circles .append("circle") .attr("id", d => "circle-" + d.x) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", r) .style("stroke", "white"); let highlightedPoints = [3, 30]; highlightedPoints.forEach(function(point) { console.log(point); let circle = d3.select("#circle-" + point); let text = d3.select("#ref-point-" + point); let textNode = text.node(); let svgNode = svg.node(); let bbText = textNode.getBoundingClientRect(); let bbSVG = svgNode.getBoundingClientRect(); let padding = 17; let lessXSVG = -(margin + padding); let plusXText = bbText.x; let x2 = lessXSVG + plusXText + bbText.width / 2; let y2 = -(bbSVG.top - bbText.top); let arrow = linesLayer .append("line") .attr("x1", circle.attr("cx")) .attr("y1", circle.attr("cy")) .attr("x2", x2) .attr("y2", y2) .style("fill", "none") .style("stroke", "blue") .style("stroke-dasharray", "2,2"); }); }30:[] 2d:{"id":"186e312f27a158d1","slug":"svg-overflow-visible","title":"SVG overflow visible","thumbnail":"0e24a92a6d125bc0659d4ce801992805b0dcc7cab61e006974c2cd04a8ffb2fd","access_level":"public","create_time":"$D2020-03-20T01:20:11.059Z","update_time":"$D2020-03-25T21:27:14.044Z","view_time":null,"first_public_time":"$D2020-03-25T21:28:10.849Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"99730af1f05a2243","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":"starter_2024"},"version":185,"publish_version":185,"role":null,"authored":false,"authors":[{"type":"individual","id":"c74b60e30e894e8f","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":null}],"members":[{"type":"individual","id":"c74b60e30e894e8f","login":"tomshanley","name":"Tom Shanley","avatar_url":"https://avatars-next.observableusercontent.com/256c880a8039584ddb6984241ce1adbf90428d5048fc0da3cf9619fe36e09a2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG overflow visible","cells":[{"id":0,"value":"md`# SVG overflow visible`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"html`

This is a test on how to use SVG overflow visible to have nice links between words, sentences and paragraphs with data in charts.

\n\n

Highlight point 3.

\n\n

Highlight point 30.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"svgNode = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.attr(\"overflow\", \"visible\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"r = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"n = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"chartHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = chartHeight + 2 * margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"chartWidth = width - 2 * margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"area = d3\n .area()\n .x(d => x(d.x))\n .y0(y(0))\n .y1(d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"x = d3\n .scaleLinear()\n .domain([0, n])\n .range([0, chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"y = d3\n .scaleLinear()\n .domain([0, max])\n .range([chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"min = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"max = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"data = {\n let arr = [];\n\n for (var i = 0; i < n; i++) {\n let obj = {};\n obj.x = i;\n obj.y = d3.randomInt(min, max)();\n arr.push(obj);\n }\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"