30:[{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1608099640980.198,"size":15106},{"id":"48e833deefb41ad0ee75baa0f970b963596c5f63a9347bcd4926c4b484fd79f34513af58c1ef8f287677cb8c00ad0b65af16d20dc4a18c56e47b9ced0612c2cb","href":"https://static.observableusercontent.com/files/48e833deefb41ad0ee75baa0f970b963596c5f63a9347bcd4926c4b484fd79f34513af58c1ef8f287677cb8c00ad0b65af16d20dc4a18c56e47b9ced0612c2cb","name":"tdf-stage-8-2017.csv","type":"text/csv","lastModified":1608175766439.26,"size":17497},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1608174992753.908,"size":1546},{"id":"c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","href":"https://static.observableusercontent.com/files/c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","name":"IBM.csv","type":"text/csv","lastModified":1608159470631.307,"size":93315},{"id":"51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","href":"https://static.observableusercontent.com/files/51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","name":"AMZN.csv","type":"text/csv","lastModified":1608159470629.221,"size":94124},{"id":"3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","href":"https://static.observableusercontent.com/files/3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","name":"GOOG.csv","type":"text/csv","lastModified":1608159470175.192,"size":93857},{"id":"a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","href":"https://static.observableusercontent.com/files/a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","name":"bls-metro-unemployment.csv","type":"text/csv","lastModified":1608152308639.779,"size":406211},{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1608099598622.653,"size":92399}] 2e:{"title":"Line Mark / Observable Plot","cells":[{"id":0,"value":"

Line Mark / Observable Plot

Observable Plot › Marks › Line · API

\n\n# Plot: Line\n\nThe **line** mark draws two-dimensional lines as in a line chart. It is closely related to the [area mark](/@observablehq/plot-area?collection=@observablehq/plot). For example, below is a line chart of the closing price of Apple stock.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.line(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"If the *x* and *y* channels are not defined, the line mark assumes that the data is an iterable of points [[*x₁*, *y₁*], [*x₂*, *y₂*], …], allowing for shorthand.","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"points = aapl.map(d => [d.Date, d.Close])","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"Plot.plot({\n marks: [\n Plot.line(points)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"The **lineY** mark provides default channel definitions of *x* = index and *y* = identity, letting you pass an array of numbers as data. (The **lineX** mark similarly provides *x* = identity and *y* = index defaults for lines that go up↑ instead of to the right→.) Below, a random walk is made using [d3.cumsum](/@d3/d3-cumsum?collection=@d3/d3-array) and [d3.randomNormal](/@d3/d3-random?collection=@d3/d3-random).","pinned":false,"hidden":false,"mode":"md"},{"id":692,"value":"Plot.plot({\n x: {\n axis: null\n },\n marks: [\n Plot.lineY(d3.cumsum({length: 600}, d3.randomNormal()))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"Points in lines are connected in input order: the first point is connected to the second point, the second is connected to the third, and so on. This typically means that line data should be sorted chronologically. If unsorted data gives you gibberish, try a *sort* transform to fix the problem.","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.line(d3.shuffle(aapl.slice(0, 100)), {\n // sort: \"Date\", // uncomment to fix\n x: \"Date\",\n y: \"Close\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"While the *x*-scale of a line chart often represents time, this is not required. For example, we can plot the elevation profile of a Tour de France stage (and imagine how tiring it must be to start a climb after riding 160km!). ⛰🚴💦","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"tdf = FileAttachment(\"tdf-stage-8-2017.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"Plot.plot({\n x: {\n label: \"Distance from stage start (km) →\"\n },\n y: {\n label: \"↑ Elevation (m)\",\n grid: true\n },\n marks: [\n Plot.line(tdf, {x: \"distance\", y: \"elevation\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"There is also no requirement that *y* be dependent on *x*; lines can also be used in connected scatterplots to show two independent (but often correlated) variables. (See also [phase plots](https://en.wikipedia.org/wiki/Phase_portrait).)","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"driving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"Plot.plot({\n inset: 10,\n grid: true,\n x: {\n label: \"Miles driven (per person-year) →\"\n },\n y: {\n label: \"↑ Cost of gasoline ($ per gallon)\"\n },\n marks: [\n Plot.line(driving, {x: \"miles\", y: \"gas\", curve: \"catmull-rom\", marker: \"circle\"}),\n Plot.text(driving, {filter: d => d.year % 5 === 0, x: \"miles\", y: \"gas\", text: d => `${d.year}`, dy: -8})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"To draw multiple lines, use the *z* channel to group [tidy data](https://r4ds.had.co.nz/tidy-data.html) into series. For example, the chart below shows unemployment rates of various metro areas from the Bureau of Labor Statistics; the *z* value is the metro division name.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"bls = FileAttachment(\"bls-metro-unemployment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {x: \"date\", y: \"unemployment\", z: \"division\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"If your data is not already tidy, try [*array*.flatMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap). Below, we load additional CSV files for other stocks to compare their performance.","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"goog = FileAttachment(\"GOOG.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"amzn = FileAttachment(\"AMZN.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"ibm = FileAttachment(\"IBM.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"stocks = [[\"AAPL\", aapl], [\"AMZN\", amzn], [\"GOOG\", goog], [\"IBM\", ibm]]\n .flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})))","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"If a *stroke* (or *fill*) encoding is specified, the *z* property defaults to the same, automatically grouping series by the same property. For this reason, both *stroke* and *z* are typically ordinal or categorical.","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"Plot.plot({\n style: \"overflow: visible;\",\n y: {\n type: \"log\",\n grid: true,\n label: \"↑ Change in price (%)\",\n tickFormat: formatChange\n },\n marks: [\n Plot.ruleY([1]),\n Plot.line(stocks, Plot.normalizeY({\n x: \"Date\", \n y: \"Close\",\n stroke: \"Symbol\"\n })),\n Plot.text(stocks, Plot.selectLast(Plot.normalizeY({\n x: \"Date\",\n y: \"Close\",\n z: \"Symbol\",\n text: \"Symbol\",\n textAnchor: \"start\",\n dx: 3\n })))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"Above, the Plot.normalizeY transform normalizes each time series (*z*) relative to its initial value, while the Plot.selectLast transform extracts the last point for labeling. A custom tick format converts multiples to percentage change (*e.g.*, 1.6× = +60%).","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"formatChange = {\n const format = d3.format(\"+d\");\n return x => format((x - 1) * 100);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"Varying-color lines are supported. If the *stroke* value varies within series, the line will be segmented by color. (The same behavior applies to other channels, such as *strokeWidth* and *title*.) Specifying the *z* channel is strongly recommended.","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n stroke: \"unemployment\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"Color encodings can also be used to highlight specific series, say to emphasize the high unemployment rates in Michigan. When highlight returns false, the corresponding stroke is gray; when it returns true, the stroke is red.","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"function highlight(d) {\n return /, MI /.test(d.division);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n sort: highlight,\n stroke: highlight\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"When using *z*, lines are drawn in input order. The *sort* transform above places the red lines on top of the gray ones to improve readability.","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"As an alternative to *z*, you can render multiple lines using multiple marks. While more verbose, this allows you to choose different options for each line. For example, below we plot the a 14-day moving average of the daily highs and lows in temperate San Francisco using the [window transform](/@observablehq/plot-window?collection=@observablehq/plot).","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"sftemps = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Temperature (°F)\"\n },\n marks: [\n Plot.line(sftemps, Plot.windowY({k: 14, x: \"date\", y: \"low\", stroke: \"#4e79a7\"})),\n Plot.line(sftemps, Plot.windowY({k: 14, x: \"date\", y: \"high\", stroke: \"#e15759\"})),\n Plot.ruleY([32]) // freezing\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"If some channel values are undefined (or null or NaN), gaps will appear between adjacent points. To demonstrate, below we set the daily close value to NaN for the first three months of each year.","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.lineY(aapl, {x: \"Date\", y: someCloses})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"Supplying undefined values is not the same as filtering the data: the latter will interpolate between the data points. Observe the conspicuous straight lines below!","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.lineY(someAapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"Interpolation is controlled by the *curve* property. The default curve is linear, which draws straight line segments between pairs of adjacent points. Step curves are nice for emphasizing when the value changes, while basis and Catmull–Rom curves are nice for smoothing. See the [D3 documentation](/@d3/curves) for more about curves. In the plot of unemployed construction workers below, try chosing a different curve.","pinned":false,"hidden":false,"mode":"md"},{"id":781,"value":"viewof curve = Inputs.select([\n \"linear\",\n \"step\",\n \"step-after\",\n \"step-before\",\n // \"linear-closed\",\n \"basis\",\n // \"basis-closed\",\n // \"basis-open\",\n // \"bundle\",\n \"cardinal\",\n // \"cardinal-closed\",\n // \"cardinal-open\",\n \"catmull-rom\",\n // \"catmull-rom-closed\",\n // \"catmull-rom-open\",\n \"monotone-x\",\n // \"monotone-y\",\n \"bump-x\",\n // \"bump-y\",\n \"natural\",\n], {label: \"Curve\", value: \"step\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"Plot.plot({\n marks: [\n Plot.lineY(gary, {x: \"date\", y: \"unemployment\", curve, strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"gary = bls.filter(d => d.division === \"Gary, IN Met Div\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}