30:[{"id":"6be2a2aee667af7c38ecc54c7570c6ce1eab3f1ed0f3f5c9a0a70d05ada75dba54858f084a608600354c2da7e2b3d877ef92aebe7b0dcc8d4a95df421796792b","href":"https://static.observableusercontent.com/files/6be2a2aee667af7c38ecc54c7570c6ce1eab3f1ed0f3f5c9a0a70d05ada75dba54858f084a608600354c2da7e2b3d877ef92aebe7b0dcc8d4a95df421796792b","name":"income.csv","type":"text/csv","lastModified":1611657772557.297,"size":2571},{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1611657772557.297,"size":15389}] 2e:{"title":"Link Mark / Observable Plot","cells":[{"id":26,"value":"

Link Mark / Observable Plot

Observable Plot › Marks › Link · API

\n\n# Plot: Link\n\nThe **link** mark draws a straight line between two points in *x* and *y*. For example, below we show the rising inequality (and population) in various U.S. cities from 1980 to 2015. Each link represents two observations of a city: the city’s population (*x*) and inequality (*y*) in 1980, and the same in 2015. The link’s color redundantly encodes the change in inequality: red indicates rising inequality, while blue (there are only four) indicates declining inequality.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"metros = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"Plot.plot({\n grid: true,\n inset: 10,\n x: {\n type: \"log\",\n label: \"Population →\",\n tickFormat: \"~s\"\n },\n y: {\n label: \"↑ Inequality\"\n },\n color: {\n type: \"diverging\",\n reverse: true\n },\n marks: [\n Plot.link(metros, {\n x1: \"POP_1980\",\n y1: \"R90_10_1980\",\n x2: \"POP_2015\",\n y2: \"R90_10_2015\",\n stroke: d => d.R90_10_2015 - d.R90_10_1980,\n markerEnd: \"arrow\"\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: -8\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"Like a [rule](/@observablehq/plot-rule?collection=@observablehq/plot), a link can also serve as annotation to support interpretation. Whereas a rule is strictly horizontal or vertical, however, a link can generate [diagonal lines](http://kelsocartography.com/blog/?p=2074). The following chart depicts the gender gap in wages, segmented by education and age, in the U.S..","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"income = FileAttachment(\"income.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"incdomain = d3.extent(income.flatMap(d => [d.m, d.f]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"Plot.plot({\n height: 600,\n marginRight: 40,\n x: {\n label: \"Median annual income (men, thousands) →\",\n tickFormat: d => d / 1000\n },\n y: {\n label: \"↑ Median annual income (women, thousands)\",\n tickFormat: d => d / 1000\n },\n marks: [\n Plot.link([1], {\n x1: () => incdomain[0],\n y1: () => incdomain[0], \n x2: () => incdomain[1], \n y2: () => incdomain[1]\n }),\n Plot.link([0.6, 0.7, 0.8, 0.9], {\n x1: () => incdomain[0],\n y1: k => incdomain[0] * k,\n x2: () => incdomain[1],\n y2: k => incdomain[1] * k,\n strokeOpacity: 0.2\n }),\n Plot.text([0.6, 0.7, 0.8, 0.9, 1.0], {\n x: () => incdomain[1],\n y: k => incdomain[1] * k,\n text: d => d === 1 ? \"Equal\" : d3.format(\"+.0%\")(d - 1),\n textAnchor: \"start\",\n dx: 6 \n }),\n Plot.dot(income, {x: \"m\", y: \"f\", title: d => `${d.type}, ${d.age}`})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"By contrast, a regular grid would make the gender disparity much less clear, even with the domains explicitly set to be equal.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"Plot.plot({\n height: 600,\n marginRight: 40,\n grid: true,\n x: {\n label: \"Median annual income (men, thousands) →\",\n tickFormat: d => d / 1000,\n domain: incdomain\n },\n y: {\n label: \"↑ Median annual income (women, thousands)\",\n tickFormat: d => d / 1000,\n domain: incdomain\n },\n marks: [\n Plot.dot(income, {x: \"m\", y: \"f\", title: d => `${d.type}, ${d.age}`})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}