28:null 29:["$","title",null,{"children":"Cell Mark / Observable Plot | João Ricardo Mendes | Observable"}] 2e:[{"id":"f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","href":"https://static.observableusercontent.com/files/f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","name":"simpsons.csv","type":"text/csv","lastModified":1671483806368.415,"size":119729},{"id":"754e2916be7548300012f5d0d6406308809baff7a2419cca200561b60eb4e788a826f8a588c66afdecbe119eea3b03725a5182fca591c03bc8cdfb1071436085","href":"https://static.observableusercontent.com/files/754e2916be7548300012f5d0d6406308809baff7a2419cca200561b60eb4e788a826f8a588c66afdecbe119eea3b03725a5182fca591c03bc8cdfb1071436085","name":"^DJI.csv","type":"text/csv","lastModified":1671483806368.415,"size":432177},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1671483806368.415,"size":48219},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1671483806368.415,"size":275},{"id":"56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","href":"https://static.observableusercontent.com/files/56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","name":"hadcrut-annual.txt","type":"text/plain","lastModified":1671483806368.415,"size":17784}] 2c:{"id":"0548df6dd9384885","slug":null,"title":"Cell Mark / Observable Plot","thumbnail":"bc0df74f1917f127c5c6b44b8d4f9b22273585399955c755c20deb491e2d8d4b","access_level":"public","create_time":"$D2022-12-19T21:03:26.368Z","update_time":"$D2022-12-19T21:03:26.368Z","view_time":null,"first_public_time":"$D2022-12-19T21:03:26.368Z","has_unpublished_edits":null,"fork":{"id":"095b50ccd99959c7","slug":null,"title":"Cell Mark / Observable Plot","owner":{"id":"f0a83196d34a5998","login":"pauloaug","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7632798b0a0057f3","login":"joaormendes","name":"João Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":"pro_2024"},"version":473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null}],"members":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cell Mark / Observable Plot","cells":[{"id":0,"value":"md`

Cell Mark / Observable Plot

Observable Plot › Marks › Cell · API

\n\n# Plot: Cell\n\nThe **cell** mark is positioned in *x*, *y*, or both, where *x* and *y* are ordinal (or categorical) rather than quantitative. Hence, the plot’s *x* and *y* scales are [band scales](/@observablehq/plot-scales?collection=@observablehq/plot). Cells typically also have a *fill* color encoding. For example, the heatmap below shows the decline of *The Simpsons* after Season 9: high ratings are dark green, while low ratings are dark pink. (The worst episode ever — cue Comic Book Guy — is season 23’s [“Lisa Goes Gaga”](https://en.wikipedia.org/wiki/Lisa_Goes_Gaga) featuring Lady Gaga.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"simpsons = FileAttachment(\"simpsons.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"Plot.plot({\n height: 640,\n padding: 0.05,\n grid: true,\n x: {\n axis: \"top\",\n label: \"Season\"\n },\n y: {\n label: \"Episode\"\n },\n color: {\n scheme: \"PiYG\"\n },\n marks: [\n Plot.cell(simpsons, {\n x: \"season\",\n y: \"number_in_season\",\n fill: \"imdb_rating\",\n // rx: 20 // uncomment for circles\n }),\n Plot.text(simpsons, {\n x: \"season\",\n y: \"number_in_season\",\n text: d => d.imdb_rating?.toFixed(1),\n title: \"title\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`With [faceting](/@observablehq/plot-facets?collection=@observablehq/plot), we can produce a calendar of multiple years, where *x* represents weeks and *y* represents days. Below shows almost twenty years of daily changes of the Dow Jones Industrial Average.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"DJI = FileAttachment(\"^DJI.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"Plot.plot({\n height: 1400,\n x: {\n axis: null,\n padding: 0,\n },\n y: {\n padding: 0,\n tickFormat: Plot.formatWeekday(\"en\", \"narrow\"),\n tickSize: 0\n },\n fy: {\n reverse: true\n },\n facet: {\n data: DJI,\n y: d => d.Date.getUTCFullYear()\n },\n color: {\n type: \"diverging\",\n scheme: \"PiYG\"\n },\n marks: [\n Plot.cell(DJI, {\n x: d => d3.utcWeek.count(d3.utcYear(d.Date), d.Date),\n y: d => d.Date.getUTCDay(),\n fill: (d, i) => i > 0 ? (d.Close - DJI[i - 1].Close) / DJI[i - 1].Close : NaN,\n title: (d, i) => i > 0 ? ((d.Close - DJI[i - 1].Close) / DJI[i - 1].Close * 100).toFixed(1) : NaN,\n inset: 0.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`The cell mark can be combined with the [group transform](/@observablehq/plot-group?collection=@observablehq/plot), which groups data by ordinal value. (The [bin transform](/@observablehq/plot-bin?collection=@observablehq/plot), on the other hand, is intended for use with the [rect mark](/@observablehq/plot-rect?collection=@observablehq/plot).) The heatmap below shows the maximum observed temperature by month (*y*) and date (*x*) in Seattle from 2012 through 2015.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"seattle = FileAttachment(\"seattle-weather.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Plot.plot({\n height: 300,\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth(\"en\", \"short\")\n },\n marks: [\n Plot.cell(seattle, Plot.group({fill: \"max\"}, {\n x: d => d.date.getUTCDate(),\n y: d => d.date.getUTCMonth(),\n fill: \"temp_max\",\n inset: 0.5\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`A one-dimensional cell is produced by specifying only *x* or only *y*. The plot below collapses the history of *The Simpsons* to a single line. Note that the *x*-ticks must be specified explicitly to avoid occlusion: by default, every cell would have its own tick.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Plot.plot({\n x: {\n round: false,\n ticks: simpsons.filter(d => d.number_in_season === 1).map(d => d.id),\n tickFormat: i => simpsons.find(d => d.id === i).season,\n label: \"Season →\",\n labelAnchor: \"right\"\n },\n color: {\n scheme: \"PiYG\"\n },\n marks: [\n Plot.cell(simpsons, {x: \"id\", fill: \"imdb_rating\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`One-dimensional cells can be a compact alternative to a bar chart, where the *fill* color of the cell replaces the length of the bar. However, position is a more salient encoding and should be preferred to color if space is available.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"Plot.plot({\n x: {\n label: null\n },\n color: {\n scheme: \"YlGnBu\"\n },\n marks: [\n Plot.cell(alphabet, {x: \"letter\", fill: \"frequency\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md`When a cell’s position represents a time period, such as a year, consider using a [bar](/@observablehq/plot-bar?collection=@observablehq/plot) instead of a cell. A cell is used below, but we must be careful to specify the *x*-domain explicitly; otherwise we might not notice missing years as ordinal domains are inferred from the set of distinct input values. Bars also have the advantage of accurately representing time periods of varying length, such as months.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"hadcrut = (await FileAttachment(\"hadcrut-annual.txt\").text())\n .trim().split(/\\n/g) // split into lines\n .map(line => line.split(/\\s+/g)) // split each line into fields \n .map(([year, anomaly]) => ({ // extract the year and median anomaly\n year: +year, // convert to number\n anomaly: +anomaly // convert to number\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Plot.plot({\n x: {\n round: false,\n ticks: d3.ticks(...d3.extent(hadcrut, d => d.year), 10),\n domain: d3.range(d3.min(hadcrut, d => d.year), d3.max(hadcrut, d => d.year) + 1),\n label: null\n },\n color: {\n type: \"diverging\",\n scheme: \"BuRd\"\n },\n marks: [\n Plot.cell(hadcrut, {x: \"year\", fill: \"anomaly\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"