36:null 37:["$","title",null,{"children":"Area Mark / Observable Plot | Jerome Ku | Observable"}] 3d:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1656200778010.002,"size":92399},{"id":"76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","href":"https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","name":"bls-industry-unemployment.csv","type":"text/csv","lastModified":1656200778010.002,"size":53919},{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1656200778010.002,"size":15106}] 3b:{"id":"cded05f49c46fbac","slug":"area-mark-observable-plot/2","title":"Area Mark / Observable Plot","thumbnail":"fa2046f3844dd1a6fb642eaee998dbe57d24b4f7d31e39d0299370ff594abc82","access_level":"public","create_time":"$D2022-06-25T23:46:18.010Z","update_time":"$D2022-06-26T01:05:01.992Z","view_time":null,"first_public_time":"$D2022-06-25T23:46:40.352Z","has_unpublished_edits":null,"fork":{"id":"0cd3c783b0b6c48f","slug":"plot-area","title":"Area Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ed6a480d15253f67","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":"starter_2024","bio":"","following":false},"version":620,"publish_version":620,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aca967524406f04","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5aca967524406f04","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Area Mark / Observable Plot","cells":[{"id":0,"value":"md`

Area Mark / Observable Plot

Observable Plot › Marks › Area · API

\n\n# Plot: Area\n\nThe **areaY** mark draws the region between a baseline (*y1*) and a topline (*y2*) as in an area chart. When the baseline is *y* = 0, the *y* channel can be specified instead of *y1* and *y2*. For example, here is an area chart of Apple’s stock price.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"aapl = FileAttachment(\"aapl.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":16,"value":"Plot.plot({\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`Areas are often used in conjunction with [line](/@observablehq/plot-line?collection=@observablehq/plot) and [rule](/@observablehq/plot-rule?collection=@observablehq/plot) marks to accentuate the topline and baseline:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\"}),\n // Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`With the default channel definitions of *x* = index and *y* = identity, you can pass an array of numbers as data. Below, a random walk is constructed with [d3.cumsum](/@d3/d3-cumsum?collection=@d3/d3-array) and [d3.randomNormal](/@d3/d3-random?collection=@d3/d3-random).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"numbers = d3.cumsum({length: 600}, d3.randomNormal())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"Plot.plot({\n marks: [\n Plot.areaY(numbers, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`As with lines, points in areas 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 area data should be sorted chronologically. If unsorted data gives you gibberish, try a *sort* transform to fix the problem.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`When the baseline is not *y* = 0 but instead represents another dimension of data as in a band chart, specify *y1* and *y2* channels instead of *y*. Note that below since the *y1* and *y2* channels refer to different fields, a *y*-label is specified to improve readability.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sftemp = FileAttachment(\"sf-temperatures.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":19,"value":"Plot.plot({\n y: {\n label: \"↑ Temperature (°F)\",\n grid: true\n },\n marks: [\n Plot.areaY(sftemp, {x: \"date\", y1: \"low\", y2: \"high\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`The band above is spikey; we can smooth it by applying a 14-day moving average to the *y1* and *y2* channels with the [window transform](/@observablehq/plot-window?collection=@observablehq/plot), and do the same for a midline. We can also add a *y*-rule to indicate the freezing point, 32°F.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"viewof range = Inputs.range([10, 50], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"areaPlot = Plot.plot({\n y: {\n label: \"↑ Temperature (°F)\",\n grid: true,\n domain: [0, 100]\n },\n marks: [\n Plot.ruleY([32]),\n Plot.areaY(sftemp, Plot.windowY({\n x: \"date\", \n y1: \"low\", \n y2: \"high\",\n fill: \"#ccc\",\n k: range\n })),\n Plot.line(sftemp, Plot.windowY({\n x: \"date\", \n y: d => (d.low + d.high) / 2,\n k: range\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`While charts typically put *y* = 0 on the bottom edge, such that the area grows up, this is not required; reversing the *y*-scale will produce a “hanging” area that grows down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n reverse: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`The **areaY** mark is a special case of the more general **area** mark which allows the *x* definition of the baseline (*x1*) and topline (*x2*) to differ. For a vertically-oriented baseline and topline, such as when time goes up instead of right, use **areaX** and swap the *x* and *y* channels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"Plot.plot({\n x: {\n grid: true\n },\n marks: [\n Plot.areaX(aapl, {y: \"Date\", x: \"Close\", fill: \"#ccc\"}),\n Plot.lineX(aapl, {y: \"Date\", x: \"Close\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`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":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: someCloses, fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: someCloses}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`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":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(someAapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(someAapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`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?collection=@d3/d3-shape) for more about curves. In the plot of unemployed construction workers below, try chosing a different curve.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"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 \"natural\",\n], {label: \"Curve\", value: \"step\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Plot.plot({\n marks: [\n Plot.areaY(construction, {x: \"date\", y: \"unemployed\", curve, fillOpacity: 0.1}),\n Plot.lineY(construction, {x: \"date\", y: \"unemployed\", curve, strokeWidth: 1}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"bls = FileAttachment(\"bls-industry-unemployment.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":223,"value":"construction = bls.filter(d => d.industry === \"Construction\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`An area mark’s *z* channel groups data along an ordinal (discrete) dimension, producing multiple areas. This is typically used with the [stack transform](/@observablehq/plot-stack?collection=@observablehq/plot) for a stacked area chart or streamgraph, but it can also be used for overlapping areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Plot.plot({\n marks: [\n Plot.areaY(bls, {x: \"date\", y2: \"unemployed\", z: \"industry\", fillOpacity: 0.1}),\n Plot.lineY(bls, {x: \"date\", y: \"unemployed\", z: \"industry\", strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`If the *z* channel is not specified, but a varying *fill* channel is, the *fill* channel is used for *z*. The *z* channel will further fallback to a varying *stroke* channel if needed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Plot.plot({\n y: {\n transform: d => d / 1000,\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(bls, {x: \"date\", y: \"unemployed\", fill: \"industry\"}), // implicit stacking\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`As an alternative to overlapping or stacking, faceting can be used to produce small multiples, here arranged vertically with a shared *x*-axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Plot.plot({\n height: 600,\n y: {\n axis: null\n },\n fy: {\n axis: \"right\",\n label: null\n },\n facet: {\n data: bls,\n y: \"industry\",\n marginRight: 140\n },\n marks: [\n Plot.areaY(bls, {x: \"date\", y: \"unemployed\", fillOpacity: 0.2}),\n Plot.lineY(bls, {x: \"date\", y: \"unemployed\", strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`Above, smaller industries such as agriculture and mining & extraction are dwarfed by larger industries such as wholesale & retail trade. To emphasize each industry’s trend, instead of comparing absolute numbers across industries, we can normalize unemployment relative to the median for each industry. Now the job loss in mining & extraction is more readily apparent.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Plot.plot({\n height: 600,\n y: {\n axis: null\n },\n fy: {\n axis: \"right\",\n label: null\n },\n facet: {\n data: bls,\n y: \"industry\",\n marginRight: 140\n },\n marks: [\n Plot.areaY(bls, Plot.normalizeY({basis: \"median\", x: \"date\", y: \"unemployed\", fillOpacity: 0.2})),\n Plot.lineY(bls, Plot.normalizeY({basis: \"median\", x: \"date\", y: \"unemployed\", strokeWidth: 1}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3c:"$3b:body"