29:null 2a:["$","title",null,{"children":"geometric.lineAngle | Harry Stevens | Observable"}] 2f:Tcc5,chart = { const svg = d3.select(DOM.svg(width, height)); const baseline = svg.append("line") .attr("class", "baseline") .attr("y1", height / 2) .attr("x2", width) .attr("y2", height / 2); const center = [width / 2, height / 2]; let angle = 315, distance = 160, lineCoords = [center, geometric.pointTranslate(center, angle, distance).map(d => Math.round(d))], outerRadius = Math.min(geometric.lineLength(lineCoords), width / 2); const arc = svg.append("path") .datum({ innerRadius: 0, outerRadius: outerRadius, startAngle: 0, endAngle: geometric.angleToRadians(angle), translate: center }) .style("fill", "steelblue") .style("fill-opacity", .3) .attr("d", d3.arc()) .attr("transform", d => `translate(${d.translate}) rotate(90)`); const labelBg = svg.append("text") .attr("class", "bg") .attr("dy", 6) .attr("transform", `translate(${geometric.pointTranslate(center, angle / 2, outerRadius / 2)})`) .text(`${angle}°`); const label = svg.append("text") .attr("dy", 6) .attr("transform", `translate(${geometric.pointTranslate(center, angle / 2, outerRadius / 2)})`) .text(`${angle}°`); const line = svg.append("line") .attr("class", "line") .attr("x1", lineCoords[0][0]) .attr("y1", lineCoords[0][1]) .attr("x2", lineCoords[1][0]) .attr("y2", lineCoords[1][1]); const handle = svg.append("circle") .attr("r", radius) .attr("transform", `translate(${lineCoords[1]})`) .call(drag); function drag(sel){ const dragGenerator = d3.drag() .on("start", start) .on("drag", dragging) .on("end", end); function start(){ handle.classed("active", 1); } function dragging(event){ let { x, y } = event; x = x < radius ? radius : x > width - radius ? width - radius : x; y = y < radius ? radius : y > height - radius ? height - radius : y; lineCoords = [center, [x, y]]; angle = geometric.lineAngle(lineCoords); angle = angle < 0 ? angle + 360 : angle; outerRadius = Math.min(geometric.lineLength(lineCoords), width / 2); arc .datum({ innerRadius: 0, outerRadius: outerRadius, startAngle: 0, endAngle: geometric.angleToRadians(angle), translate: center }) .attr("d", d3.arc()); labelBg .text(`${Math.round(angle)}°`) .attr("transform", `translate(${geometric.pointTranslate(center, angle / 2, outerRadius / 2)})`); label .text(`${Math.round(angle)}°`) .attr("transform", `translate(${geometric.pointTranslate(center, angle / 2, outerRadius / 2)})`); line .attr("x1", lineCoords[0][0]) .attr("y1", lineCoords[0][1]) .attr("x2", lineCoords[1][0]) .attr("y2", lineCoords[1][1]); handle .attr("transform", `translate(${lineCoords[1]})`); } function end(){ handle.classed("active", 0); } sel.call(dragGenerator); } return svg.node(); }30:[] 2d:{"id":"85d9217624073977","slug":"geometric-lineangle","title":"geometric.lineAngle","thumbnail":"1fcf85edc9483b1318cb4961068cc09206d26380f03b350c88e726dd19af5fd6","access_level":"public","create_time":"$D2019-07-01T19:12:50.492Z","update_time":"$D2022-02-15T16:15:34.684Z","view_time":null,"first_public_time":"$D2019-09-15T20:16:51.365Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":170,"publish_version":170,"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":8,"collection":{"id":"cb194ebcc81c247f","slug":"geometric","title":"Geometric.js","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"geometric.lineAngle","cells":[{"id":0,"value":"md`# geometric.lineAngle\n\n[geometric.lineAngle](https://github.com/HarryStevens/geometric#lineAngle)(line) returns the angle of a line, in degrees, with respect to the horizontal axis.\n\nDrag the black circle to see how the angle 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":104,"value":"{\n while (chart){\n const x1 = +d3.select(\".line\").attr(\"x1\"),\n y1 = +d3.select(\".line\").attr(\"y1\"),\n x2 = +d3.select(\".line\").attr(\"x2\"),\n y2 = +d3.select(\".line\").attr(\"y2\");\n\n const line = [[x1, y1], [x2, y2]];\n\n let angle = geometric.lineAngle(line);\n angle = angle < 0 ? angle + 360 : angle;\n\n const markdown = html`\n Line: ${JSON.stringify(line).replace(new RegExp(\",\", \"g\"), \", \")}
\n Angle: ${angle}\n `\n yield markdown; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"width = 280;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 280;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"radius = 6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"