2c:null 2d:["$","title",null,{"children":"Map Transform / Observable Plot | Observable | Observable"}] 32:[{"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}] 30:{"id":"8a84035f0b400343","slug":"plot-map","title":"Map Transform / Observable Plot","thumbnail":"664128766139683663b4a54e4d6fb7fe023bb14504da53a6ab8d5845b521646e","access_level":"public","create_time":"$D2021-03-31T16:53:30.832Z","update_time":"$D2023-04-05T21:01:54.953Z","view_time":null,"first_public_time":"$D2021-05-04T05:18:51.733Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":144,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock."}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"cdaffa889a762651","reply_to_id":null,"content":"Yes. It's a slightly more \"shorthand\" formulation of the map transform, but it results in the same chart.","create_time":"$D2023-02-22T15:48:03.867Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"values = Array.from({length: 500}, d3.randomNormal())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Plot.lineY(values, Plot.map({y: \"cumsum\"}, {y: values})).plot({height: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"Plot.lineY(values, Plot.mapY(\"cumsum\", {y: values})).plot({height: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"temp = 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":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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"stocks = FileAttachment(\"stocks.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":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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"