45:["$","title",null,{"children":"Cell Mark / Observable Plot | 邹佳敏 | Observable"}] 4d:[{"id":"f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","href":"https://static.observableusercontent.com/files/f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","name":"simpsons.csv","type":"text/csv","lastModified":1636533076373.793,"size":119729},{"id":"56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","href":"https://static.observableusercontent.com/files/56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","name":"hadcrut-annual.txt","type":"text/plain","lastModified":1636533076373.793,"size":17784},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1636533076373.793,"size":48219},{"id":"754e2916be7548300012f5d0d6406308809baff7a2419cca200561b60eb4e788a826f8a588c66afdecbe119eea3b03725a5182fca591c03bc8cdfb1071436085","href":"https://static.observableusercontent.com/files/754e2916be7548300012f5d0d6406308809baff7a2419cca200561b60eb4e788a826f8a588c66afdecbe119eea3b03725a5182fca591c03bc8cdfb1071436085","name":"^DJI.csv","type":"text/csv","lastModified":1636533076373.793,"size":432177},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1636533076373.793,"size":275}] 49:{"id":"5b3a5831e77a6262","slug":"cell-mark-observable-plot","title":"Cell Mark / Observable Plot","thumbnail":"a1ee285c1f6b684aa657abc4b3c596fa0491eff29fc3e36c26fdf384ea443fd9","access_level":"public","create_time":"$D2021-11-10T08:31:16.373Z","update_time":"$D2021-11-11T01:59:02.633Z","view_time":null,"first_public_time":"$D2021-11-13T11:55:55.972Z","has_unpublished_edits":null,"fork":{"id":"d47bf339d9c06f8c","slug":"plot-cell","title":"Cell Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7d0acc4d42f8afd3","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":487,"publish_version":487,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee2e263bf5b52c62","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ee2e263bf5b52c62","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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**cell** 标记位于 *x*、*y* 或两者中，其中 *x* 和 *y* 是有序的（或分类的）而不是数量的。因此，绘图的 *x* 和 *y* 尺度是 [波段尺度](/@observablehq/plot-scales)。单元格通常也有一个 *fill* 颜色编码。 \n例如，下面的热图显示了《辛普森一家》在第 9 季的收视率：高收视率是深绿色，而低收视率是深粉红色。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`使用 [faceting](/@observablehq/plot-facets)，我们可以生成一个多年的日历，其中 *x* 代表周，*y* 代表天。 \n下面显示了Dow Jones 工业平均指数近 20 年来的每日变化。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`单元格标记可以与 [群变换](/@observablehq/plot-group) 结合使用，后者按序数值对数据进行分组。（另一方面，[箱变换](/@observablehq/plot-bin) 旨在与 [矩形标记](/@observablehq/plot-rect) 一起使用。）\n下面的热图显示了最高观测温度按 2012 年到 2015 年西雅图的月份 (*y*) 和日期 (*x*)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`通过仅指定 *x* 或仅 *y* 来生成一维单元格。 \n下图将《辛普森一家》的历史折叠成一行。请注意，必须明确指定 *x*-ticks 以避免遮挡：默认情况下，每个单元格都有自己的刻度。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`一维单元格可以是条形图的紧凑替代品，其中单元格的填充颜色替换了条形图的长度。然而，位置是一种更显着的编码，如果有空间，应该优先于颜色。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md`当单元格的位置代表一个时间段时，例如一年，请考虑使用 [bar](/@observablehq/plot-bar) 而不是单元格。\n下面使用了一个单元格，明确指定 *x* 域；条形图还具有准确表示不同长度的时间段（例如月份）的优势。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`Next \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null