{"id":13481957,"url":"https://github.com/bizweekgraphics/swoopyarrows","last_synced_at":"2026-01-10T07:22:39.242Z","repository":{"id":77158602,"uuid":"20785422","full_name":"bizweekgraphics/swoopyarrows","owner":"bizweekgraphics","description":"swoopyarrows makes swoopy arrows between things","archived":false,"fork":false,"pushed_at":"2017-05-02T20:09:22.000Z","size":1135,"stargazers_count":108,"open_issues_count":5,"forks_count":7,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-10-30T15:58:40.618Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bizweekgraphics.com/swoopyarrows","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bizweekgraphics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-06-12T22:52:35.000Z","updated_at":"2024-10-25T12:20:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"73b0999a-670c-42da-be81-9ad17c6c5ac3","html_url":"https://github.com/bizweekgraphics/swoopyarrows","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizweekgraphics%2Fswoopyarrows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizweekgraphics%2Fswoopyarrows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizweekgraphics%2Fswoopyarrows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizweekgraphics%2Fswoopyarrows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bizweekgraphics","download_url":"https://codeload.github.com/bizweekgraphics/swoopyarrows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245845074,"owners_count":20681829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:57.763Z","updated_at":"2026-01-10T07:22:39.171Z","avatar_url":"https://github.com/bizweekgraphics.png","language":"JavaScript","funding_links":[],"categories":["Utils"],"sub_categories":[],"readme":"swoopyarrows.js\n===============\n\n\u003e Out of the crooked timber of JavaScript, no straight arrow was ever made.  \n*— Immanuel Kant*\n\nFinally an open source project to match the scope of our ambition! A family of three path generators for making nice fun arrows. Use it more or less like [`d3.svg.line`](https://github.com/mbostock/d3/wiki/SVG-Shapes#line); the easiest thing is to just pass an array of two points, like `[[0,0],[10,30]]`. Each has `x` and `y` accessors and a couple other options.\n\n[Download](https://github.com/bizweekgraphics/swoopyarrows/raw/master/swoopyArrows.js), [demo](http://www.bizweekgraphics.com/swoopyarrows/), [demo source](https://github.com/bizweekgraphics/swoopyarrows/blob/master/index.html). \n\nThe only dependency is [d3 v3](http://d3js.org). But it goes great with [d3-jetpack](https://github.com/gka/d3-jetpack)! If you’re trying to annotate a bunch of things, you may also have more luck with Adam Pearce’s [swoopyDrag](http://1wheel.github.io/swoopy-drag/). \n\nBring your own SVG markers. We typically use this simple arrowhead:\n\n```\n\u003cmarker id=\"arrowhead\" viewBox=\"-10 -10 20 20\" refX=\"0\" refY=\"0\" markerWidth=\"20\" markerHeight=\"20\" stroke-width=\"1\" orient=\"auto\"\u003e\u003cpolyline stroke-linejoin=\"bevel\" points=\"-6.75,-6.75 0,0 -6.75,6.75\"\u003e\u003c/polyline\u003e\u003c/marker\u003e\n```\n\n## swoopyArrow\n\n[Download](https://github.com/bizweekgraphics/swoopyarrows/raw/master/swoopyArrow.js). Connect points with circular arcs. The classic. Set `angle` to the angle the arrow should subtend, in radians, between `0` (basically straight) and `Math.PI` (a semicircle, 180º). It's not currently possible to subtend more than that.\n\n```javascript\nvar swoopy = swoopyArrow()\n  .angle(Math.PI/4)\n  .x(function(d) { return d[0]; })\n  .y(function(d) { return d[1]; });\n\nsvg.append(\"path\")\n  .attr('marker-end', 'url(#arrowhead)')\n  .datum([[100,200],[300,400]])\n  .attr(\"d\", swoopy);\n```\n\n## loopyArrow\n\n[Download](https://github.com/bizweekgraphics/swoopyarrows/raw/master/loopyArrow.js). Like a coiled telephone cord. Set the radius of the loop with `radius`; increase `steps` to add more coils — although it's only _proportionate_ to the number of loops, not equal to, because I am bad at math and lazy.\n\n```javascript\nvar loopy = loopyArrow()\n  .steps(30)\n  .radius(20)\n  .x(function(d) { return d[0]; })\n  .y(function(d) { return d[1]; });\n\nsvg.append(\"path\")\n  .attr('marker-end', 'url(#arrowhead)')\n  .datum([[400,600],[800,100]])\n  .attr(\"d\", loopy);\n```\n\n## kookyArrow\n\n[Download](https://github.com/bizweekgraphics/swoopyarrows/raw/master/kookyArrow.js). Follows a random path between two points. Increase `steps` to add more kinks; increase `deviation` to make the kinks deviate more from the path.\n\n```javascript\nvar kooky = kookyArrow()\n  .steps(5)\n  .deviation(100)\n  .x(function(d) { return d[0]; })\n  .y(function(d) { return d[1]; });\n\nsvg.append(\"path\")\n  .attr('marker-end', 'url(#arrowhead)')\n  .datum([[1000,200],[700,600]])\n  .attr(\"d\", kooky);\n```\n\n----\n\nFor an idea of how you might use the `x` and `y` accessors — you could set them to get the `offsetLeft` and `offsetTop` of DOM elements, so you can just pass an array of two DOM elements and generate an arrow between them:\n\n```javascript\nvar swoopBetweenElements = swoopyArrow()\n  .angle(Math.PI/4)\n  .x(function(d) { return d.offsetLeft; })\n  .y(function(d) { return d.offsetTop; });\n\nsvg.append(\"path\")\n  .attr('marker-end', 'url(#arrowhead)')\n  .datum([document.querySelector('h1'), document.querySelector('h2')])\n  .attr(\"d\", swoopBetweenElements);\n```\n\n----\n\n## To-do\n\n- Handle passing in more than two points (go through all three? choose the closest two?)\n- Put together a bunch of Adobe Illustrator-style SVG markers\n- The whole thing should just be a [d3-shape custom curve](https://github.com/d3/d3-shape#custom-curves) module\n- [Add droopy catenaries](https://github.com/bizweekgraphics/swoopyarrows/issues/25)\n\n----\n\n\u003e Swoopy arrows have been in use since Egyptian hieroglyphics. They belong to [no one](https://github.com/bizweekgraphics/swoopyarrows/blob/master/LICENSE) ↪↺↷⟲⤣⤥⤴⤵⤶⤷⤹⤳⤻⤿⤺  \n— *[Jennifer Daniel](https://twitter.com/jenniferdaniel/status/464517373740204032), patron saint*\n\n![Prior art](https://raw.githubusercontent.com/bizweekgraphics/swoopyarrows/master/priorart.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizweekgraphics%2Fswoopyarrows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbizweekgraphics%2Fswoopyarrows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizweekgraphics%2Fswoopyarrows/lists"}