30: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.31:[{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1641665345073.199,"size":15389}] 2e:{"title":"Arrow Mark / Observable Plot","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":9,"value":"metros = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}