30:[{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1620088420565.988,"size":15106},{"id":"ecd6082b06d6934c2798de41b59c626edafb73fa713d54149ca9bdda93df9a20365e7b64fa0be9333c9c2a5ee652452925e6ffac78210f2d872756d63c13e6a8","href":"https://static.observableusercontent.com/files/ecd6082b06d6934c2798de41b59c626edafb73fa713d54149ca9bdda93df9a20365e7b64fa0be9333c9c2a5ee652452925e6ffac78210f2d872756d63c13e6a8","name":"stocks.csv","type":"text/csv","lastModified":1620088231056.832,"size":382936},{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1620088330463.206,"size":3516}] 2e:{"title":"Map Transform / Observable Plot","cells":[{"id":47,"value":"

Map Transform / Observable Plot

Observable Plot › Transforms › Map · API

\n\n# Plot: Map\n\nThe map transform groups data into series and then transforms each series’ values, say to normalize them relative to some basis or to apply a moving average.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"Like the [group](/@observablehq/plot-group?collection=@observablehq/plot) and [bin](/@observablehq/plot-bin?collection=@observablehq/plot) transforms, the Plot.map transform takes two arguments: an *outputs* object that describes the output channels to compute, and an *options* object that describes the input channels and any additional options. For example, the *cumsum* map method computes the cumulative sum.","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"values = Array.from({length: 500}, d3.randomNormal())","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"Plot.lineY(values, Plot.map({y: \"cumsum\"}, {y: values})).plot({height: 200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"The Plot.mapX and Plot.mapY transforms are shorthand for applying a given map method to all *x* or *y* channels.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"Plot.lineY(values, Plot.mapY(\"cumsum\", {y: values})).plot({height: 200})","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"The window and normalize transforms are variants of the map transform.\n\nThe Plot.windowX and Plot.windowY transforms compute a moving window around each data point and then derive a summary statistic from values in the current window, say to compute rolling averages, rolling minimums, or rolling maximums.","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"temp = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Daily temperature range (°F)\"\n },\n marks: [\n Plot.areaY(temp, {x: \"date\", y1: \"low\", y2: \"high\", curve: \"step\", fill: \"#ccc\"}),\n Plot.line(temp, Plot.windowY({x: \"date\", y: \"low\", k: 7, curve: \"step\", stroke: \"blue\"})),\n Plot.line(temp, Plot.windowY({x: \"date\", y: \"high\", k: 7, curve: \"step\", stroke: \"red\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"The Plot.normalizeX and Plot.normalizeY transforms normalize series values relative to some basis, say to convert absolute values into relative values. For example, here is a line chart showing the return of several stocks.","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"stocks = FileAttachment(\"stocks.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Plot.plot({\n marginRight: 40,\n y: {\n type: \"log\",\n grid: true,\n label: \"↑ Change in price (%)\",\n tickFormat: (f => x => f((x - 1) * 100))(d3.format(\"+d\"))\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":84,"value":"As another example, the normalize transform can be used to compute proportional demographics from absolute populations.","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"stateage = {\n const states = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});\n const ages = states.columns.slice(1);\n const stateage = ages.flatMap(age => states.map(d => ({state: d.name, age, population: d[age]})));\n stateage.ages = ages;\n return stateage;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"{\n const xy = Plot.normalizeX({basis: \"sum\", z: \"state\", x: \"population\", y: \"state\"});\n return Plot.plot({\n height: 660,\n grid: true,\n x: {\n axis: \"top\",\n label: \"Percent (%) →\",\n transform: d => d * 100\n },\n y: {\n domain: d3.groupSort(stateage, g => -g.find(d => d.age === \"≥80\").population / d3.sum(g, d => d.population), d => d.state),\n axis: null\n },\n color: {\n scheme: \"spectral\",\n domain: stateage.ages\n },\n marks: [\n Plot.ruleX([0]),\n Plot.ruleY(stateage, Plot.groupY({x1: \"min\", x2: \"max\"}, xy)),\n Plot.dot(stateage, {...xy, fill: \"age\"}),\n Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: \"end\", dx: -6, text: \"state\"}))\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}