29:null 2a:["$","title",null,{"children":"geometric.lineLength | Harry Stevens | Observable"}] 2f:T993,chart = { const svg = d3.select(DOM.svg(width, height)); let points = {a: [Math.round(width * .1), Math.round(height / 2)], b: [Math.round(width * .9), Math.round(height / 2)]}; let length = geometric.lineLength([points.a, points.b]); const line = svg.append("line") .attr("x1", points.a[0]) .attr("y1", points.a[1]) .attr("x2", points.b[0]) .attr("y2", points.b[1]); const pointACircle = svg.append("circle") .attr("class", "point-a") .attr("data-point", "a") .attr("r", radius) .attr("transform", `translate(${points.a})`) .call(drag); const pointBCircle = svg.append("circle") .attr("class", "point-b") .attr("data-point", "b") .attr("r", radius) .attr("transform", `translate(${points.b})`) .call(drag); const lengthLabel = svg.append("text") .attr("dy", -10) .attr("transform", `translate(${geometric.lineMidpoint([points.a, points.b])})`) .text(`${length}px`); function drag(sel){ const selPoint = sel.attr("data-point"); const otherPoint = selPoint === "a" ? "b" : "a"; const dragGenerator = d3.drag() .on("start", start) .on("drag", dragging) .on("end", end); function start(){ sel.classed("active", 1); } function dragging(){ event.preventDefault(); let x = Math.round(d3.event.x); x = x < radius ? radius : x > width - radius ? width - radius : x; let y = Math.round(d3.event.y); y = y < radius ? radius : y > height - radius ? height - radius : y; points[selPoint] = [x, y]; const coords = [points.a, points.b]; length = geometric.lineLength(coords); let angle = geometric.lineAngle(coords); angle = angle > 90 || angle < -90 ? angle - 180 : angle; line .attr("x1", points.a[0]) .attr("y1", points.a[1]) .attr("x2", points.b[0]) .attr("y2", points.b[1]); pointACircle .attr("transform", `translate(${points.a})`); pointBCircle .attr("transform", `translate(${points.b})`); lengthLabel .attr("transform", `translate(${geometric.lineMidpoint(coords)}) rotate(${angle})`) .text(`${Math.round(length)}px`); } function end(){ sel.classed("active", 0); } sel.call(dragGenerator); } return svg.node(); }30:[] 2d:{"id":"7aaf87f7bc62816d","slug":"geometric-linelength","title":"geometric.lineLength","thumbnail":"18f6f1389918e0700054b71f57e5e349e633e9817ce7ae4b69b30ce222c1d29a","access_level":"public","create_time":"$D2019-06-28T01:45:41.545Z","update_time":"$D2019-09-16T00:43:09.005Z","view_time":null,"first_public_time":"$D2019-09-15T20:16:45.279Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":225,"publish_version":225,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"cb194ebcc81c247f","slug":"geometric","title":"Geometric.js","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"geometric.lineLength","cells":[{"id":0,"value":"md`# geometric.lineLength\n\n[geometric.lineLength](https://github.com/HarryStevens/geometric#lineLength)(line) returns the length of a line in pixels.\n\nDrag either point to see how the length changes with the line.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{\n while(chart){\n const a = cleanCoords(\"a\"),\n b = cleanCoords(\"b\"),\n length = geometric.lineLength(makeLine(a, b));\n \n yield md`Point A: [${a}]
\n Point B: [${b}]
\n Length:

${length}`;\n  }\n  \n  function clean(x){\n    return x.replace(\"translate(\", \"\").replace(\",\", \", \").replace(\")\", \"\");\n  }\n  function coords(point){\n    return d3.select(`.point-${point}`).attr(\"transform\");\n  }\n  function cleanCoords(cls){\n    return clean(coords(cls));\n  }\n  function makeArray(coords){\n    return coords.split(\", \").map(d => +d);\n  }\n  function makeLine(a, b){\n    return [makeArray(a), makeArray(b)];\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 200;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"radius = 6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}}
2e:"$2d:body"