25:["$","title",null,{"children":"Arrow Mark / Observable Plot | 2007040109 | Observable"}] 49: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.4a:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1681644034097.149,"size":15389},{"id":"8f9fbd8dd22cc0c282c77b006680a8aec971954a05057416f0ba5287ade31119793ecf34438e2296a363de9b8b2ab5d00001eaf902704645afbc65869fbb1963","href":"https://static.observableusercontent.com/files/8f9fbd8dd22cc0c282c77b006680a8aec971954a05057416f0ba5287ade31119793ecf34438e2296a363de9b8b2ab5d00001eaf902704645afbc65869fbb1963","name":"arrow.csv","type":"application/x-msi","lastModified":1681644036502.432,"size":20480},{"id":"33eccb8304506037fce0c3fa99686d96841bcceaa147ab33918c2169a86211ac450f9497fb62f07fd60f9708dd2884244f22f268c62a2fc32368e24ee8fc8b8c","href":"https://static.observableusercontent.com/files/33eccb8304506037fce0c3fa99686d96841bcceaa147ab33918c2169a86211ac450f9497fb62f07fd60f9708dd2884244f22f268c62a2fc32368e24ee8fc8b8c","name":"metros@5.csv","type":"text/csv","lastModified":1681644037410.68,"size":1209},{"id":"8f9fbd8dd22cc0c282c77b006680a8aec971954a05057416f0ba5287ade31119793ecf34438e2296a363de9b8b2ab5d00001eaf902704645afbc65869fbb1963","href":"https://static.observableusercontent.com/files/8f9fbd8dd22cc0c282c77b006680a8aec971954a05057416f0ba5287ade31119793ecf34438e2296a363de9b8b2ab5d00001eaf902704645afbc65869fbb1963","name":"arrow@1.csv","type":"application/x-msi","lastModified":1681644052617.979,"size":20480},{"id":"30a004b084999a2c1511a2a86be20b9067c6b92cab834e830006d130015c9e81e2900f7b1c30b913b157a7685adcd99727ef1ee0345676f0907021759fe00f74","href":"https://static.observableusercontent.com/files/30a004b084999a2c1511a2a86be20b9067c6b92cab834e830006d130015c9e81e2900f7b1c30b913b157a7685adcd99727ef1ee0345676f0907021759fe00f74","name":"yellow.png","type":"image/webp","lastModified":1681645242733.124,"size":414},{"id":"b880b70b0f967cfaa3b0348c814b814e150fa8580aa97262916d8aa2514b5c49a58ffd0252409a85e55ec583f634785a26a8619dd9a81ba3a14865c7a41d6a30","href":"https://static.observableusercontent.com/files/b880b70b0f967cfaa3b0348c814b814e150fa8580aa97262916d8aa2514b5c49a58ffd0252409a85e55ec583f634785a26a8619dd9a81ba3a14865c7a41d6a30","name":"metros@1.csv","type":"text/csv","lastModified":1681648954248.039,"size":1949},{"id":"b880b70b0f967cfaa3b0348c814b814e150fa8580aa97262916d8aa2514b5c49a58ffd0252409a85e55ec583f634785a26a8619dd9a81ba3a14865c7a41d6a30","href":"https://static.observableusercontent.com/files/b880b70b0f967cfaa3b0348c814b814e150fa8580aa97262916d8aa2514b5c49a58ffd0252409a85e55ec583f634785a26a8619dd9a81ba3a14865c7a41d6a30","name":"metros@2.csv","type":"text/csv","lastModified":1681648987458.885,"size":1949},{"id":"d25a497dacc8ba8365705de2b06ca1e02f14cda47d199f6905cbf08ac6c9c72b9e8cc240ab18cafbb7c1d8db79c0831b2d0d9dd200bf889b221e3ca95b416260","href":"https://static.observableusercontent.com/files/d25a497dacc8ba8365705de2b06ca1e02f14cda47d199f6905cbf08ac6c9c72b9e8cc240ab18cafbb7c1d8db79c0831b2d0d9dd200bf889b221e3ca95b416260","name":"metros@3.csv","type":"text/csv","lastModified":1681651933295.591,"size":1976},{"id":"b1ff0a1374f4ac57e941323e27083a03b4ee11173800e4a5a23b12a0109d519ae80e38f86685ce195a5810d3ddf94b86a4948679d073e075c4eef86778d4043e","href":"https://static.observableusercontent.com/files/b1ff0a1374f4ac57e941323e27083a03b4ee11173800e4a5a23b12a0109d519ae80e38f86685ce195a5810d3ddf94b86a4948679d073e075c4eef86778d4043e","name":"metros@4.csv","type":"text/csv","lastModified":1681652408535.487,"size":1298},{"id":"eac1b729e6cecd30b2876f80d09b9675163ed869a24bcf1cfdeed1bd243afbd2839dfe33a691fda2669691277e801527e92d278247fef60f12ec6780f71d773a","href":"https://static.observableusercontent.com/files/eac1b729e6cecd30b2876f80d09b9675163ed869a24bcf1cfdeed1bd243afbd2839dfe33a691fda2669691277e801527e92d278247fef60f12ec6780f71d773a","name":"metros@6.csv","type":"text/csv","lastModified":1681652729177.119,"size":1253},{"id":"7c1a2c5df18486308d673845f77da770b1753dcdae1760397e09e0c4069b4408cd0f371f1bed9a2e72e8d36ed53741eb2378db7273f73ac5df6a3f35e8b1ce81","href":"https://static.observableusercontent.com/files/7c1a2c5df18486308d673845f77da770b1753dcdae1760397e09e0c4069b4408cd0f371f1bed9a2e72e8d36ed53741eb2378db7273f73ac5df6a3f35e8b1ce81","name":"metros - 副本.csv","type":"text/csv","lastModified":1681653248248.007,"size":760},{"id":"d96862ddc5591af993dee0d114caf79f7cb860bba2837688555eb5b6ec30da4e13eff3e3162620a7b9fccc299bc20726aa3ce2cd2e1e268437dc77ed50f1adb2","href":"https://static.observableusercontent.com/files/d96862ddc5591af993dee0d114caf79f7cb860bba2837688555eb5b6ec30da4e13eff3e3162620a7b9fccc299bc20726aa3ce2cd2e1e268437dc77ed50f1adb2","name":"blue.png","type":"image/webp","lastModified":1681654976978.631,"size":776}] 29:{"id":"1911cff23ddb85ec","slug":null,"title":"Arrow Mark / Observable Plot","thumbnail":"6b5a95242cc089e006dae3d480608d9c596a539f9c94cfa9dba2b6444bf9f331","access_level":"public","create_time":"$D2023-04-16T11:20:34.097Z","update_time":"$D2023-04-16T14:38:35.257Z","view_time":null,"first_public_time":"$D2023-04-16T11:20:34.097Z","has_unpublished_edits":null,"fork":{"id":"b97dd8b1c0831d01","slug":"plot-arrow","title":"Arrow Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab1d68b6b99d1243","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Arrow Mark / Observable Plot","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Plot.plot({\n width:700,\n height: 500,\n inset: 10,\n fillcolor: 'black',\n grid: true,\n x: {\n nice: 6,\n ticks: 4\n },\n color: {\n type: \"diverging\",\n scheme: \"burd\",\n label: \"Change in inequality from 1980 to 2015\",\n ticks: 16,\n tickFormat: \"+f\"\n },\n marks: [\n Plot.image([{ url: de_dust2Url }], {\n frameAnchor: \"middle\",\n height: width,\n width: width,\n src: \"url\"\n }),\n Plot.ruleY([0]),\n Plot.ruleX([0]),\n Plot.arrow(metros, {\n x1: d => (d.source_x+wwj),\n y1: \"source_y\",\n x2: d => d.target_x+wwj,\n y2: \"target_y\",\n bend: false,\n stroke:\"#f8e6d0\"\n }),\n Plot.arrow(metros2, {\n x1: d => d.source_x+wwj>70 && d.source_x+wwj<85?75:(d.source_x+wwj),\n y1: d => d.source_x+wwj>115 && d.source_x+wwj<120?d.target_y:d.source_y,\n x2: d => d.target_x+wwj>70 && d.target_x+wwj<80?70:d.target_x+wwj,\n y2: d => (d.target_y),\n bend: true,\n stroke:\"#f8e6d0\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"wwj={\n // asdf\n let w=1\n while(true) {\n \n w=randomPoly2(w)\n if (w>600){\n w=1\n }\n yield w\n await Promises.delay(1000)\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"metros = FileAttachment(\"metros@6.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"metros2 = FileAttachment(\"metros - 副本.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"de_dust2Url = FileAttachment(\"blue.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"data = {\n // asdf\n while(true) {\n yield [randomPoly2(wwj)]\n await Promises.delay(1000)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"randomPoly2 = (wwj) => {\n wwj+=1\n return wwj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null