45:["$","title",null,{"children":"Bar Mark / Observable Plot | 邹佳敏 | Observable"}] 4d:[{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1636533052435.089,"size":275},{"id":"56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","href":"https://static.observableusercontent.com/files/56252fee45d48e3b1834acc30dc71d7387e85cb50ca4de2e0eff9afd4f8f7e90e89218a5ec966f223eb4aabfda79df16c57654ca044c1a511497676dc5f4da93","name":"hadcrut-annual.txt","type":"text/plain","lastModified":1636533052435.089,"size":17784},{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1636533052435.089,"size":3516},{"id":"fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","href":"https://static.observableusercontent.com/files/fcc0015cbe24eea265833239de543af33607f288cc9959f9ce4d0e2456b25dbaae5ff62a355704d879441905518bdbbeef0d13496346f63bfed61b07decbd0d3","name":"civilizations.csv","type":"text/csv","lastModified":1636533052435.089,"size":3382},{"id":"2e16d0e78fb1674fd1fce73a65459bac1c512ab6865a8a86fc84ed8374bc60adae27e63b94801c635f3d5e26c0e71626b74f123d3da29930a2d5274e9486c9d1","href":"https://static.observableusercontent.com/files/2e16d0e78fb1674fd1fce73a65459bac1c512ab6865a8a86fc84ed8374bc60adae27e63b94801c635f3d5e26c0e71626b74f123d3da29930a2d5274e9486c9d1","name":"us-state-population-2010-2019.csv","type":"text/csv","lastModified":1636533052435.089,"size":1354}] 49:{"id":"27a8cf88672a7ad1","slug":"bar-mark-observable-plot","title":"Bar Mark / Observable Plot","thumbnail":"f0431cf634e7eb8c45d6250bc691afe5d97477602d43aff99d13ee9a6a5e2161","access_level":"public","create_time":"$D2021-11-10T08:30:52.435Z","update_time":"$D2021-11-16T04:11:29.075Z","view_time":null,"first_public_time":"$D2021-11-16T04:09:57.707Z","has_unpublished_edits":null,"fork":{"id":"c79a6352bf756f69","slug":"plot-bar","title":"Bar 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":1172,"publish_version":1172,"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":"Bar Mark / Observable Plot","cells":[{"id":0,"value":"

Bar Mark / Observable Plot

Observable Plot › Marks › Bar · API

\n\n# Plot: Bar\n\n条形图具有顺序维度（例如名称或类别）和数量维度（数字）。条形图有两种方向：**barX** 在条形图中水平延伸→，**barY** 在柱形图中垂直延伸↑。例如，下图显示了英语中字母的频率。 *letter* 维度是有序的，而 *frequency* 维度是定量的，表示给定字母出现的频率。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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":343,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`通过添加 *y* 网格、*y* = 0 处的规则和暖灰色填充来降低对比度来改进此图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", fill: \"#bab0ab\"}),\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":213,"value":"md`要转换值，请指定函数而不是命名字段。例如，要显示百分比而不是比例，请将频率乘以 100。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"Plot.plot({\n y: {\n label: \"↑ Frequency (%)\",\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: d => d.frequency * 100}),\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":837,"value":"md`您也可以使用比例的 *transform* 选项将变换应用于与特定比例关联的所有通道。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"Plot.plot({\n y: {\n label: \"↑ Frequency (%)\",\n grid: true,\n transform: d => d * 100\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\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":1097,"value":"md`条形标记与 [rect mark](/@observablehq/plot-rect) 密切相关。两者都生成一个矩形；不同之处在于如何指定坐标。对于柱线，一侧是定量区间（例如:从 0 到百分比），而另一侧是序数或分类值（例如:英文字母）；而对于 rect，两边都是定量区间。因此，条形图用于条形图，但直方图需要矩形。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"如果独立维度（*e.g.*, *x* for barY）是时间而非序数，则通常不应使用条形标记,应该使用带有 [interval transform](/@observablehq/plot-interval) 的 rect 标记。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`条形的序数维度使用 [band scale](/@d3/d3-scaleband) 和一些填充来分隔条形。为了更好地分离，可以将 *x*-scale 的填充设置为零并使用插图。条形标记支持四种用于插入条形边的选项：*insetTop*、*insetRight*、*insetBottom* 和 *insetLeft*。 *inset* 选项是将所有四个边设置为相同值的简写。下面的图表用单个像素分隔每个条形。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"Plot.plot({\n x: {\n padding: 0\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", insetLeft: 0.5, insetRight: 0.5}),\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":662,"value":"md`默认情况下，Band 缩放为圆形，这可以在轴和条形之间留出额外的空间；将相应比例的对齐设置为零或一或禁用舍入可以去除间隙。默认情况下，域是自然排序的（按字母顺序）；明确设置域以更改顺序。（有关更多信息，请参阅 [Scales](/@observablehq/plot-scales)。）例如，降频。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"Plot.plot({\n x: {\n domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\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":126,"value":"md`如果指定一个单一的定量值，如上所示，条形从零到给定值；可以通过指定两个值来指定 [*min*, *max*] 范围。 \n例如，这里是文明的历史时间线，其中每个文明都有开始和结束。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"civilizations = FileAttachment(\"civilizations.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":149,"value":"Plot.plot({\n height: civilizations.length * 16,\n marginLeft: 120,\n x: {\n axis: \"top\",\n grid: true,\n tickFormat: formatYear\n },\n y: {\n axis: null,\n domain: d3.sort(civilizations, d => d.start).map(d => d.civilization)\n },\n marks: [\n Plot.barX(civilizations, {\n x1: \"start\",\n x2: \"end\",\n y: \"civilization\"\n }),\n Plot.text(civilizations, {\n x: \"start\",\n y: \"civilization\",\n text: \"civilization\",\n textAnchor: \"end\",\n dx: -6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`上面使用文本标记直接标记条形而不是 *y* 轴。它还使用*x* 轴的自定义刻度格式来显示日历时代。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"formatYear = year => year < 0 ? `${-year} BC` : `${year} AD`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`对于（水平）条形图，请考虑根据条形数量设置图表高度，以允许图表自动扩展或收缩以适合数据集。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`对于发散条形图，只需指定负长度。下图显示了 2010 年到 2019 年的人口变化。人口增加的州是蓝色的，而人口减少的州是红色的。 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"popchange = FileAttachment(\"us-state-population-2010-2019.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":1069,"value":"Plot.plot({\n height: 780,\n marginLeft: 100,\n grid: true,\n x: {\n axis: \"top\",\n round: true,\n label: \"← decrease · Change in population, 2010–2019 (%) · increase →\",\n labelAnchor: \"center\",\n tickFormat: \"+\",\n transform: d => d * 100\n },\n y: {\n label: null,\n domain: d3.sort(popchange, d => (d[2010] - d[2019]) / d[2010]).map(d => d.State)\n },\n color: {\n range: [\"#e15759\", \"#4e79a7\"]\n },\n marks: [\n Plot.barX(popchange, {\n y: \"State\",\n x: d => (d[2019] - d[2010]) / d[2010],\n fill: d => Math.sign(d[2019] - d[2010])\n }),\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":138,"value":"md`对于一维数据集，例如数字数组，可以使用数据的索引作为序数维度：通道函数传递第二个参数 *i*，表示从零开始的索引。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"frequencies = alphabet.map(d => d.frequency)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(frequencies, {x: (d, i) => i}),\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":705,"value":"md`条形的顺序尺寸是可选的；如果丢失，则条形图沿此维度跨越图表。这样的条通常也有颜色编码。例如，这里的 [变暖条纹](https://showyourstripes.info/) 显示了过去 172 年全球平均温度的升高。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"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: new Date(Date.UTC(year, 0, 1)), \n anomaly: +anomaly\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"Plot.plot({\n x: {\n round: true\n },\n color: {\n type: \"diverging\",\n scheme: \"BuRd\"\n },\n marks: [\n Plot.barX(hadcrut, {\n x1: d => d.year, // start of current year\n x2: d => d3.utcYear.offset(d.year), // start of next year\n fill: \"anomaly\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`使用[堆栈变换](/@observablehq/plot-stack)，一维条可以显示每个值相对于整体的比例，作为饼图或圆环图的紧凑替代品。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"Plot.plot({\n x: {\n label: \"Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.ruleX([0, 1]),\n Plot.barX(alphabet, Plot.stackX({order: \"letter\", x: \"frequency\", fill: \"#ccc\", insetLeft: 1})),\n Plot.textX(alphabet, Plot.stackX({order: \"letter\", x: \"frequency\", text: \"letter\", insetLeft: 1}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`一维条也可用于突出显示感兴趣的区域。例如，在下面，如果所有英文字母的可能性相同 (${tex`\\frac{1}{26}`})，则预期频率以橙色突出显示。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"Plot.plot({\n x: {\n domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)\n },\n y: {\n grid: true\n },\n marks: [\n Plot.barY([1 / 26], {fill: \"orange\", fillOpacity: 0.4}),\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\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":1007,"value":"md`[Faceting](/@observablehq/plot-facets) 可以生成分组条形图。下图显示了按年龄组划分的六个人口最多的州的人口。最年轻的年龄组（<10）在左边的红色，而最老的年龄组（≥80）在右边的蓝色。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"stateage = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});\n const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(ages.flatMap(age => data.map(d => ({state: d.name, age, population: d[age]}))), {ages});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"Plot.plot({\n x: {\n axis: null,\n domain: stateage.ages\n },\n y: {\n grid: true,\n tickFormat: \"s\"\n },\n color: {\n domain: stateage.ages,\n scheme: \"spectral\"\n },\n fx: {\n domain: d3.groupSort(stateage, v => d3.sum(v, d => -d.population), d => d.state).slice(0, 6),\n label: null,\n tickSize: 6\n },\n facet: {\n data: stateage,\n x: \"state\"\n },\n marks: [\n Plot.barY(stateage, {x: \"age\", y: \"population\", fill: \"age\", title: \"age\"}),\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":316,"value":"md`条形通常与变换结合使用：[*group* 变换](/@observablehq/plot-group) 按离散值对数据进行分组，以便条形长度可以表示每个组的大小（频率）； [*stack* transform](/@observablehq/plot-stack) 可以将条形排列成堆栈，就像堆积条形图一样。 [*bin* 变换](/@observablehq/plot-bin) 可用于构建定量数据的直方图，通常与 [*rect* 标记](/@observablehq/plot-rect) 配对，而不是bar。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"md`条形图支持 *z* 通道来控制 *z* 顺序。这通常只需要在条形重叠时控制遮挡。 Bars 还支持用于舍入的 SVG *rx* 和 *ry* 属性，以及标准的 SVG 样式属性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"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