2b:null 2c:["$","title",null,{"children":"Arrow Mark / Observable Plot | Observable | Observable"}] 31:T425,

Observable Plot › Marks › Arrow · API

# Plot: Arrow The **arrow** mark represents data as directional arrows between two points in *x* and *y* quantitative dimensions. It is similar to the [link mark](/@observablehq/plot-link), except it draws an arrowhead and is suitable for directed edges. With the *bend* option, it can also be made swoopy. For example, below we show the rising inequality (and population) in various U.S. cities from 1980 to 2015. Each arrow represents two observations of a city: the city’s population (*x*) and inequality (*y*) in 1980, and the same in 2015. The arrow’s color redundantly encodes the change in inequality: red indicates rising inequality, while blue (there are only four) indicates declining inequality.32:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1641665345073.199,"size":15389}] 2f:{"id":"b97dd8b1c0831d01","slug":"plot-arrow","title":"Arrow Mark / Observable Plot","thumbnail":"91bc584168279712c59bec43091e2407e50c31362cec3b1420ba1f97115e5a73","access_level":"public","create_time":"$D2022-01-08T18:07:22.428Z","update_time":"$D2023-02-07T04:29:38.007Z","view_time":null,"first_public_time":"$D2022-01-21T03:01:36.169Z","fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"fc52e1582441e932","reply_to_id":null,"content":"Is there any options to have a double arrow headed mark (i.e. arrow head on start and not only on end side)?\nI had a look at the code on github but it doesn't look like an option.\nI wanted to fake it by drawing in 2 opposite directions but it does of course not work well with the bend option (I am using it with Plot.geo)","create_time":"$D2023-02-16T09:14:02.161Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c2f17e4031105178","login":"espinielli","name":"Enrico Spinielli","avatar_url":"https://avatars-next.observableusercontent.com/2bf5259d0c49a57cec6acc725062bdc41374a518de8772a2a051315f6be64567","tier":null}},{"id":"e9ab08045fc0ff92","reply_to_id":"fc52e1582441e932","content":"You can use a negative bend on the opposite direction (bend: true defaults to 22.5°, so use bend: -22.5); see https://observablehq.com/@recifs/double-arrowhead-plot for an example.","create_time":"$D2023-02-16T09:58:20.779Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":16,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Arrow Mark / Observable Plot","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Plot.plot({\n width,\n height: Math.min(600, width),\n grid: true,\n inset: 10,\n x: {\n type: \"log\",\n label: \"Population →\"\n },\n y: {\n label: \"↑ Inequality\",\n ticks: 4\n },\n color: {\n type: \"diverging\",\n scheme: \"burd\",\n label: \"Change in inequality from 1980 to 2015\",\n legend: true,\n ticks: 6,\n tickFormat: \"+f\"\n },\n marks: [\n Plot.arrow(metros, {\n x1: \"POP_1980\",\n y1: \"R90_10_1980\",\n x2: \"POP_2015\",\n y2: \"R90_10_2015\",\n bend: true,\n stroke: d => d.R90_10_2015 - d.R90_10_1980\n }),\n Plot.text(metros, {\n x: \"POP_2015\",\n y: \"R90_10_2015\",\n filter: \"highlight\",\n text: \"nyt_display\",\n fill: \"currentColor\",\n stroke: \"white\",\n dy: -6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"metros = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"