30:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1636427950710.092,"size":92399}] 2e:{"title":"Interval Transform / Observable Plot","cells":[{"id":0,"value":"

Interval Transform / Observable Plot

Observable Plot › Transforms › Interval · API

\n\n# Plot: Interval\n\nThe interval transform turns a discrete *value* into an interval [*start*, *stop*]. For example, if *value* is an instant in time, the interval transform could return a *start* of UTC midnight and a *stop* of the UTC midnight the following day. The interval transform is most commonly used for “bar” charts of temporal data, where you in fact want [rects](/@observablehq/plot-rect?collection=@observablehq/plot) rather than [bars](/@observablehq/plot-bar?collection=@observablehq/plot) because time is continuous, not discrete.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"Consider for example the bar chart below of the trade volume of Apple stock. Because bars are used, *x* is ordinal. And because the regularity of ordinal values is not specified (*i.e.*, because Plot has no way of knowing that this is daily data), every distinct value must have its own label, leading to crowding. If a day were missing data, it would be difficult to spot.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"aapl = (await FileAttachment(\"aapl.csv\").csv({typed: true})).slice(-40)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"Plot.plot({\n marginBottom: 80,\n x: {\n tickRotate: -90,\n label: null\n },\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.barY(aapl, {x: \"Date\", y: \"Volume\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"In contrast, a rect with the interval transform and the [d3.utcDay time interval](https://github.com/d3/d3-time) produces a temporal *x*. This allows Plot to compute ticks at meaningful intervals (here weekly boundaries, UTC midnight on Sundays). Furthermore, we can see that this isn’t truly daily data—it’s missing weekends and holidays when the stock market was closed.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"Plot.plot({\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.rectY(aapl, {x: \"Date\", interval: d3.utcDay, y: \"Volume\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"While the interval transform is used most commonly with a D3 time interval, any object that implements a floor and offset method will work. For example, below is a custom interval that extends Friday through the weekend. An interval can also be specified as a number *n*, in which case *x1* and *x2* are taken as the two consecutive multiples of *n* that bracket *x*.","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"customInterval = d3.utcDay.filter(d => d.getUTCDay() !== 0 && d.getUTCDay() !== 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"value = new Date","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"interval = [\n customInterval.floor(value), // start\n customInterval.offset(customInterval.floor(value)) // stop\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"Plot.plot({\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.rectY(aapl, {x: \"Date\", interval: customInterval, y: \"Volume\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"While rare, the interval transform can also be used with barY to convert a discrete *y* value into an interval [*y1*, *y2*], and similarly with barX to convert *x* to [*x1*, *x2*].","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"Plot.plot({\n marginBottom: 80,\n x: {\n tickRotate: -90,\n label: null\n },\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.barY(aapl, {x: \"Date\", y: \"Volume\", interval: 1e7}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"The interval transform is not a standalone transform, but a builtin option with the [rect](/@observablehq/plot-rect?collection=@observablehq/plot), [bar](/@observablehq/plot-bar?collection=@observablehq/plot), and [rule](/@observablehq/plot-rule?collection=@observablehq/plot) marks.","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}