25:["$","title",null,{"children":"Vega-Lite 图表类型 | 1907040204 | Observable"}] 4c:[{"id":"15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","href":"https://static.observableusercontent.com/files/15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","name":"alphabet.csv","type":"text/csv","lastModified":1636534654069.867,"size":275},{"id":"0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","href":"https://static.observableusercontent.com/files/0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","name":"github.csv","type":"text/csv","lastModified":1636534654069.867,"size":21059},{"id":"23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","href":"https://static.observableusercontent.com/files/23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","name":"airports.csv","type":"text/csv","lastModified":1636534654069.867,"size":210365},{"id":"02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","href":"https://static.observableusercontent.com/files/02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","name":"market-cap.csv","type":"text/csv","lastModified":1636534654069.867,"size":60262},{"id":"6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","href":"https://static.observableusercontent.com/files/6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","name":"pwm-weather@1.csv","type":"text/csv","lastModified":1636534654069.867,"size":31922}] 48:{"id":"c84e2bcd5d7c5c2b","slug":"vega-lite","title":"Vega-Lite 图表类型","thumbnail":"c9d11984b266e6d1a6c9ef43e33aa31b9816d1dd7932cd96c44a840ce9f233a4","access_level":"public","create_time":"$D2021-11-10T08:57:34.069Z","update_time":"$D2021-11-15T10:34:09.930Z","view_time":null,"first_public_time":"$D2021-11-10T09:56:57.000Z","has_unpublished_edits":null,"fork":{"id":"a9a4b43c00769b31","slug":"vega-lite-chart-types","title":"Vega-Lite Chart Types","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab95e94d333ab49b","login":"1907040204","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2839,"publish_version":2839,"role":null,"authored":false,"authors":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vega-Lite 图表类型","cells":[{"id":1050,"value":"# Vega-Lite 图表类型\n\n在这之前，已经研究了如何使用 Vega-Lite 快速制作一些简单的图表。这里将使用几种不同类型的图表对此进行扩展，并且学习一些技巧。\n\n使用 Vega-Lite重要的是要思考想要制作什么标记，而不是要制作什么图表。其中[标记](https://vega.github.io/vega-lite/docs/mark.html)是正在绘制的形状，事实证明，这些形状非常重要。例如，圆形可用于散点图中，大小不同的圆形可以用来创建[气泡图](https://en.wikipedia.org/wiki/Bubble_chart),或放置在地图中的地理坐标处。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`Type | Examples | Mark / Method\n---|--- | ---\n[Bar](#bars):
Vertical, horizontal, stacked, and grouped bar charts | [${thumbnail(simpleBar)}](#simpleBar) [${thumbnail(horizontalBar)}](#horizontalBar) [${thumbnail(stackedBar)}](#stackedBar) [${thumbnail(groupedBar)}](#groupedBar) | \\`markBar\\`\n[Line](#lines):
Line, area, stacked area charts | [${thumbnail(line)}](#line) [${thumbnail(area)}](#area) | \\`markLine\\`, \\`markArea\\`\n[Scatter](#scatters):
Scatter, bubble, and strip plots | [${thumbnail(scatter)}](#scatter) [${thumbnail(strip)}](#strip) | \\`markPoint\\`, \\`markTick\\`\n[Table](#tables):
Tabular layouts | [${thumbnail(heatmap)}](#heatmap) [${thumbnail(punchCard)}](#punchCard) [${thumbnail(tableText)}](#tableText) | \\`markRect\\`, \\`markText\\`\n[Maps](#maps):
Geographical projections, shapes, choropleths | [${thumbnail(geoScatter)}](#geoScatter) [${thumbnail(geoScatterFeatures)}](#geoScatterFeatures) [${thumbnail(choropleth)}](#choropleth) | \\`markGeoshape\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"bars = md`---\n## 条形图`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### 简单的条形图\n“简单”是指数据与图表中显示的内容之间的直接 1:1 映射。下面的条形图是英文字母表中字母的使用频率的视图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv() // 附件 https://observablehq.com/@observablehq/file-attachments","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"alphabet[0] // alphabet的第一行数据","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// 关于viewof https://observablehq.com/@observablehq/a-brief-introduction-to-viewof\nviewof simpleBar = vl.markBar() // 制作条形图\n .data(alphabet) // 使用alphabet作为数据\n .encode(\n vl.x().fieldO(\"letter\"), // .sort(vl.fieldQ(\"frequency\").order(\"descending\")), // 字母在 x 轴上是有序的\n vl.y().fieldQ(\"frequency\").axis({ format: \"%\" }) //y轴表示频率，格式为百分比\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"md`#### markBar()\n选择条形图来可视化\n数据 [\\`markBar()\\`](https://vega.github.io/vega-lite/docs/bar.html#properties).\n\n${tryIt(`\n对于散点图将 \\`markBar()\\` 更改为 \\`markPoint()\\`。 \n按频率降序对字母进行排序。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md`#### .axis({ format: \"%\" })\n这里频率值是用小数表示的百分比，为了更加明了的表达，可以通过[d3-format specifier](https://github.com/d3/d3-format)来对坐标轴进行格式化。\n\n${tryIt(`\n将格式说明符更改为“.2%”以获得不必要的精确标签。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md`---\n### 水平条形图\n要想实现水平条形图，可以交换上一个示例中的 x 和 y 定义。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof horizontalBar = vl.markBar()\n .data(alphabet)\n .encode(\n vl.y().fieldO(\"letter\"),\n vl.x().fieldQ(\"frequency\").axis({ format: \"%\" })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`---\n### 聚合条形图\n以上数据非常适合直接绘制图表，但更常见的情况是需要记录和描述数据的总数、平均值，甚至标准偏差。\n\n为了解[聚合数据](https://vega.github.io/vega-lite/docs/aggregate.html#ops)的工作原理，这里向字母表数据中添加另一列以指示该字母是否为元音，然后绘制元音和非元音的频率总和。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"vowels = alphabet.map(d => ({...d, vowel: \"AEIOU\".includes(d.letter)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"viewof aggregatedBar = vl.markBar()\n .data(vowels)\n .encode(\n vl.x().sum(\"frequency\").axis({ format: \"%\" }),\n vl.y().fieldN(\"vowel\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`\n#### .sum(\"frequency\")\nsum()是[聚合函数](https://vega.github.io/vega-lite/docs/aggregate.html#ops)之一。它自动按所有其他编码通道分组。在这种情况下，它仅按元音的 y 通道分组。\n${tryIt(`\n删除 y() 通道以查看所有频率的总和 (100%)。\n将 sum() 更改为 average()。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"md`#### .fieldN(\"vowel\")\n字母是否为元音是非真即假的，因此可以将其视为类别数据并将其编码在 y 轴上。\n\n${tryIt(`\n将 y() 更改为 color() 以获得堆积条形图（接下来将详细介绍堆积条形图）。 \n将字段改回“letter”以查看原始图表（每个“sum”由一个字母组成）。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`---\n### 堆积条形图\n让我们看一个具有更复杂数据更复杂的聚合示例，它需要更复杂的数据。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"weather = FileAttachment(\"pwm-weather@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`\n这个波特兰天气数据来自 [NOAA 全球历史气候学网络](https://www.ncdc.noaa.gov/data-access/land-based-station-data/land-based-datasets/global-historical-climatology-network-ghcn)对最低和最高温度、整体状况（雾、雨、雪或太阳）和降水量的三年每日观测。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"weather[0] // 天气数据样本","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`这里将尝试按月分组的堆积条形图，分别计算一个月内不同条件的天数。对于三年的数据，每个月总共应该有大约 90 天。\n\n波特兰全年大约有一半时间是晴天并且11月至4月会下雪。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof stackedBar = vl.markBar()\n .data(weather)\n .encode(\n vl.x().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.y().count(), // .stack(\"normalize\").axis({ format: \"%\" }),\n vl.color().fieldN(\"condition\") // .scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`\n#### vl.x().fieldO(\"date\").timeUnit(\"utcmonth\")\n[\\`timeUnit()\\`]() 是一种动态转换日期值的方法。可以看做已经完成源数据到包含每个日期的月份的转变。 _utcmonth_ 以 UTC 格式解析数据中的字符串值，然后提取月份。它是[被支持的时间单位](https://vega.github.io/vega-lite/docs/timeunit.html)之一。需要注意何时使用[UTC和本地时间](https://vega.github.io/vega-lite/docs/timeunit.html#utc)。\n\n 请注意这里使用的是 \\`fieldO\\`而不是 \\`fieldT\\`。这是因为我们想将月份解释为序数标签 (使用[band scale](https://github.com/d3/d3-scale/blob/master/README.md#band-scales)) 而不是时间(使用[time scale](https://github.com/d3/d3-scale/blob/master/README.md#time-scales))。\n\n${tryIt(`\n将时间单位更改为 \\`\"utcyear\"\\` 或 \\`\"day\"\\`。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"md`#### vl.y().count()\n\\`count()\\` 是用来计算行数的一个聚合函数，按照日期（月份）和状况等其它的通道分组。\n\n${tryIt(`\n通过使用\\`.stack(\"normalize\")\\`转换为百分比来标准化高度。\n将标准化后 y 轴的格式改为百分比。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"md`#### vl.color().fieldN(\"condition\")\n接下来要将当天的整体状况编码为一种颜色。由于将当天状况视为类别数据，因此 Vega-Lite 默认是分类配色格式。\n\n${tryIt(`\n将\\`fieldN\\`改变为\\`fieldO\\`，将默认配色格式改为顺序。 \n通过添加 .scale({ range: weatherColors }) 指定要使用的更自然的颜色。\n删除\\`color()\\` 通道以按月查看非堆叠条形图。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"weatherColors = [\"darkgray\", \"steelblue\", \"paleturquoise\", \"gold\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`---\n### 分组条形图\n为了减少一个月内状况之间的堆叠比较的困难，可以在一个月内对条形进行分组。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof groupedBar = vl.markBar()\n .data(weather)\n .encode(\n vl.column().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.x().fieldN(\"condition\").axis({ title: null }),\n vl.y().count(),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`#### .column()\n这是一个新通道，将在[第 3 部分](layers-facets-concat)中进行更详细的介绍。现在，可以将其看做水平定位（随着x一起）的另一种方式。也可以将其看做每个字段值一次地重复相同的图表的一种方式。 \n\n${tryIt(`\n将 utcmonth 替换为 utcyear 以查看每年的状况比较。\n指定 row() 。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"md`#### .axis({ title: null })\n由于图表的重复，x 轴变得有点多余且状况标签一目了然。您可以设置轴的标题或使用传递给axis() 的标题键将其完全删除。\n\n${tryIt(`\n将轴标题设置为所选择的字符串。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"lines = md`---\n## 折线图\n\n通过尝试绘制美国公司的市值图表，可以可视化数据的趋势，这里的数据包括股票种类、日期和市值。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"marketCap = FileAttachment(\"market-cap.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"marketCap[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof line = vl.markLine()\n //.data(marketCap)\n .data(marketCap.filter(d => new Date(d.date) > new Date(2018, 0, 1)))\n .encode(\n vl.x().fieldT(\"date\"), // date parsing!\n vl.y().fieldQ(\"market cap\").axis({ format: \"$s\" }),\n vl.color().fieldN(\"symbol\") // .sort(vl.max(\"market cap\").order(\"descending\"))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"md`\n#### markLine()\n可以使用[\\`markLine()\\`](https://vega.github.io/vega-lite/docs/line.html#properties)来绘制折线图。线在数据点之间绘制，默认情况下按 x 轴排序。\n\n${tryIt(`\n将 \\`{ interpolate: \"step\" }\\`传递给\\`markLine()\\`以获得阶梯图表。 \n将图表类型更改为 \\`markPoint()\\`来查看各个点。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"md`#### fieldT()\n这是第一次看到\\`fieldT()\\`充分发挥作用。它正进行日期解析，并且没有明确的 \\`timeUnit()\\` 来选择基于时间的合理标签。\n\n${tryIt(`\n将日期范围过滤为 2018 年后的更细粒度的轴标签。 \n通过\\`timeUnit(\"yearmonth\")\\`来汇总平均市值来平滑数据。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"md`#### color().fieldN(\"symbol\")\n前面已经在堆积条形图示例中出现了\\`color().fieldN(\"symbol\")\\`，但这里的线条共享相同的 y 轴并且重叠而不是堆叠。这是默认的行为，因为重叠的线仍然可以解释（并且通常是首选）。\n\n由于数据包含多个股票标签，这里希望确保按标签分组。如果不这样分组，最终会在不同的股票标签之间绘制一条纵横交错的线条。\n\n${tryIt(`\n将 \\`color()\\` 更改为 \\`detail()\\` 以保持不用颜色地按标签进行分组。\n按最大市值对颜色和图例进行排序，从而更容易按颜色识别标签。\n删除\\`color()\\` / \\`detail()\\` 通道以取消组合线条。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"md`---\n### 面积图\n\n面积图与折线图密切相关，但共享条形图的堆叠语义。将市值绘制为面积图可以通过切换到 \\`markArea()\\` 来完成。\n\n由于基础数据包含不统一的日期值，这使得加入日期变得困难，因此需要每月汇总数据。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof area = vl.markArea()\n .data(marketCap)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"yearmonth\"),\n vl.y().mean(\"market cap\").axis({ format: \"$s\" }),\n vl.color().fieldN(\"symbol\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"scatters = md`---\n## 散点图\n\n再次审视波特兰天气数据，在汇总之前，一次查看所有数据通常有较大帮助。为每天的最高温度画一个点，按天气状况进行着色。\n\n可能正如预期的那样，波特兰经常下雨，直到在冬季的月份当天最高温度下降到 5°C 左右时，波特兰的天气状况变为下雪。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof scatter = vl.markPoint()\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\"), // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"tmax\"),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors }),\n // vl.shape().fieldN(\"condition\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"md`#### markPoint()\n\n[\\`markPoint\\`](https://vega.github.io/vega-lite/docs/point.html) 和 [\\`markCircle\\`](https://vega.github.io/vega-lite/docs/circle.html) 对于绘制散点图是好的选择。在此之外还有[\\`markSquare\\`](https://vega.github.io/vega-lite/docs/square.html)。\n如果需要，\\`markPoint\\` 可以利用额外的 \\`shape()\\` 编码通道。\n\n${tryIt(`\n添加 \\`shape()\\` 通道以将状况额外编码为不同的形式。\n将 timeUnit 设置为 utcmonthdate 以更好地查看同比趋势。 \n删除 \\`y()\\` 通道以获得随时间变化的一维条件视图（获得下面的带状图）。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`---\n### 点/带状图\n点图或带状图通常可用于可视化沿一个轴或少数类别的值分布。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof strip = vl.markTick()\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\").timeUnit('utcmonthdate'),\n vl.y().fieldO(\"date\").timeUnit(\"utcyear\"),\n // vl.y().fieldN(\"condition\"),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors }),\n // vl.size().fieldQ(\"tmax\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"md`#### markTick()\n[刻度线](https://vega.github.io/vega-lite/docs/tick.html)是一个像素的短线。可以使用 size() 编码通道更改它们的长度。\n\n${tryIt(`\n使用 y 轴表示状况并通过将 utcyear 编码为 \\`row()\\` 来保留按年份分组。\n将 tmax 编码为刻度的 \\`size()\\` 以获得温度的意义。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"tables = md`---\n## 基于表格的图表`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"md`### 热图\n\n将天气数据可视化一个热图，将平均最高温度编码为颜色，按月和日类似于日历进行排列。\n\n可以看出温度的季节变化性很好。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof heatmap = vl.markRect({tooltip: {\"content\": \"data\"}, clip: true})\n .data(weather)\n .encode(\n vl.y().fieldO(\"date\").timeUnit(\"month\"),\n vl.x().fieldO(\"date\").timeUnit(\"date\"),\n vl.color().average(\"tmax\").scale({ scheme: \"redyellowblue\", reverse: true }),\n // vl.size().average(\"precip\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"md`#### markRect()\n[\\`markRect()\\`](https://vega.github.io/vega-lite/docs/rect.html)绘制矩形.可以使用它来创建热图，也可以使用 x2 和 y2 编码通道来指定更多的[任意矩形](https://vega.github.io/vega-lite/docs/rect.html#ranged)。\n\n${tryIt(`\n切换到\\`markSquare\\` 并将降水编码为尺寸。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"md`#### .average(\"tmax\")\n由于使用的是三年的数据，因此将它们按月份和日期分组。\n\n${tryIt(`\n将\\`average\\`更改为\\`max\\`以查看温度的“噪声”变化。\n删除聚合函数并使用 \\`fieldQ\\` 查看去年的数据点。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"md`#### .scale({ scheme: \"redyellowblue\", reverse: true })\n所有 [d3-scale-chromatic’s](https://github.com/d3/d3-scale-chromatic) 的配色方案都可以[通过名称获得](https://vega.github.io/vega/docs/schemes/#reference)。redyellowblue 是从热到冷的方向，所以这里选择反转它。\n\n${tryIt(`\nPlay with the color scheme, “plasma” maybe? \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`---\n### 表格气泡图 (GitHub Punch Card)\n\n与上面的热图非常相似，可以使用带有编码大小的圆圈代替矩形来实现 GitHub 旧的“punch card”进行可视化。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"commits = FileAttachment(\"github.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof punchCard = vl.markCircle()\n .data(commits)\n .encode(\n vl.y().fieldO(\"time\").timeUnit(\"day\"), // .sort([\"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\", \"sun\"]),\n vl.x().fieldO(\"time\").timeUnit(\"hours\"),\n vl.size().sum(\"count\") //.scale({ range: [0, 200] })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"md`#### .size().sum(\"count\")\n将计数字段的总和编码为每个圆的大小。[\\`size()\\`](https://vega.github.io/vega-lite/docs/encoding.html#mark-prop) 编码通道可以与许多其他标记类型一起使用。\n\n${tryIt(`\n更改使用的尺寸范围。 \n添加用于精确提交次数的工具提示。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`---\n### Table\nTables are also a form of visualization that can be readily created with Vega-Lite using \\`markText\\`. Let’s view the condition variable across all of our weather data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1935,"value":"viewof tableText = vl.markText()\n .data(weather)\n .encode(\n vl.row().fieldO(\"date\").timeUnit(\"utcyear\"),\n vl.y().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.x().fieldO(\"date\").timeUnit(\"utcdate\"),\n vl.text().fieldN(\"condition\")\n )\n .width(860)\n .config({axisLeft: {title: null}, header: {title: null}})\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"md`#### .text()\n为了指定文本值，这里使用 [\\`text()\\`](https://vega.github.io/vega-lite/docs/encoding.html#text-field-def) 编码通道。\n\n${tryIt(`\n显示其他值，如 tmin、tmax 或 precip。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"value":"md`#### .width(860)\n设置图表的宽度和高度。\n\n${tryIt(`\n指定其他宽度或高度。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1996,"value":"md`#### .config({axis: {title: null}, header: {title: null}})\n由于年和月值是不言而喻的，这里决定删除显式的axisLeft (y) 和header (row) 标题以恢复一些水平空间。[\\`config()\\`](https://vega.github.io/vega-lite/docs/config.html) 还有许多其他可配置的调整。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"maps = md`---\n## 地图\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"md`### 投影标记\n\n如果数据具有纬度和经度值，可以在 [d3-geo](https://github.com/d3/d3-geo) 的任何[投影](https://github.com/d3/d3-geo#azimuthal-projections)中绘制它们。尚无地标可供参考，这是对于用处的局限性，但通常会很快产生可识别的地理趋势。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"airports = FileAttachment(\"airports.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2024,"value":"airports[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"viewof geoScatter = vl.markSquare({ size: 3 })\n .data(airports)\n .project(vl.projection(\"albersUsa\")) // \"Albers USA\" includes an inset for Alaska and Hawaiʻi\n // .project(vl.projection(\"orthographic\").rotate([70, -10]))\n .encode(\n vl.longitude().fieldQ(\"longitude\"),\n vl.latitude().fieldQ(\"latitude\"),\n vl.color().fieldN(\"state\").legend(false), // Color by state, but don’t need a legend\n vl.tooltip(\"name\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"md`### markCircle({ size: 3 })\n圆圈也适用于地图，就像正方形或点一样。\n\n${tryIt(`\n使用 \\`markLine\\` 创建状态的巧妙渲染。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"md`#### .project(vl.projection(\"albersUsa\"))\n来自[d3-geo](https://github.com/d3/d3-geo)的所有[投影](https://github.com/d3/d3-geo#azimuthal-projections)都可用。这里选择 albersUsa，因为尽管左上角的点对应于美国边远地区，但是这里的数据主要还是美国大陆的机场。\n\n\\`vl.projection()\\` 采用[其它选项](https://vega.github.io/vega-lite/docs/projection.html#projection-properties)例如中心、缩放或旋转。\n\n${tryIt(`\n切换到“mercator”或“equalEarth”以获得全球视角。\n看看带旋转的正投影的样子。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"md`#### vl.longitude(), vl.latitude()\n\n将数据映射到特定的经度和纬度，而不是 x 和 y。这是“用标记思考”而不是“用图表类型思考”的一个很好的例子。这里只是画圆圈，但它们的位置是由数据中的“经度”和“纬度”字段决定的，通过地理投影（可以将其视为[比例尺](https://github.com/d3/d3-scale)）映射到屏幕上。创建散点图时会发生类似的过程，其中时间和温度指示 x 和 y 位置。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`---\n### 有陆地的标记\n\n可识别的土地或水景可以通过[分层](https://vega.github.io/vega-lite/docs/layer.html)来完成，将在[第 3 部分](layers-facets-concat)中更深入地介绍。\n\n下面是有陆地的相同机场数据的可视化。可以使用[\\`markGeoshape()\\`](https://vega.github.io/vega-lite/docs/geoshape.html) 来绘制 [TopoJSON](https://github.com/topojson/topojson)特征，然后在顶部分层可视化。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"viewof geoScatterFeatures = {\n // Landmass for the U.S.\n const landmass = vl.markGeoshape()\n // Get the shape for the U.S. from the us-atlas npm module.\n .data(vl.topojson(\"https://unpkg.com/us-atlas@3/nation-10m.json\").feature(\"nation\"))\n .encode(\n vl.stroke().value(\"lightgray\"),\n vl.color().value(null)\n );\n\n // The previous visualization\n const points = vl.markCircle({ size: 3 })\n .data(airports)\n .encode(\n vl.longitude().fieldQ(\"longitude\"),\n vl.latitude().fieldQ(\"latitude\"),\n vl.color().fieldN(\"state\").legend(false)\n );\n \n // Return a combined view\n return vl\n .layer(landmass, points) // Layer the views together.\n .project(vl.projection(\"albersUSA\"))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2126,"value":"md`#### markGeoshape()\n[\\`markGeoshape\\`](https://vega.github.io/vega-lite/docs/geoshape.html) 获取 [TopoJSON](https://github.com/topojson/topojson) 文件并将它们绘制在与数据相同的投影中。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"html`

vl.topojson(\"https://unpkg.com/us-atlas@3/nation-10m.json\").feature(\"nation\")

\n这里为 Vega-Lite 提供了想要绘制为TopoJSON的形状。具体来说，使用方便地分布在us-atlas npm 模块中的“国家”功能，它还包含县和州。\n

\n${tryIt(`\n将州或县换成国家以换取州或县边界。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"md`#### .stroke().value(\"lightgray\")\n将多边形的轮廓设置为浅灰色。\n\n\\`stroke()\\` 类似于 \\`color()\\` 和[其它与颜色相关的编码通道](https://vega.github.io/vega-lite/docs/mark.html#color)。所有编码通道都支持将属性设置为[常量值](https://vega.github.io/vega-lite/docs/value.html)。\n\n${tryIt(`\n选择另一种边界颜色。\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2153,"value":"md`#### layer()\n[\\`layer()\\`](https://vega.github.io/vega-lite/docs/layer.html) 将多个视图叠加在一起，最后一个在顶部。默认情况下，所有scale和轴在所有层之间共享。相关内容将在[第 3 部分](layers-facets-concat)中介绍层。\n\n${tryIt(`\n删除其中一层来一次一个地查看它们。 \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`---\n### 等值线\n\n根据数据为每个形状着色为[等值线图](https://en.wikipedia.org/wiki/Choropleth_map)可能有点困难。通常，传递给 markGeoshape 的 TopoJSON 数据本身不包含要编码的数据，需要通过 ID 或密钥加入数据。\n\n下面的示例使用来自 [@d3/world-choropleth](/@d3/world-choropleth) 的预期寿命数据，该数据已由 [world-atlas](https://www.npmjs.com/package/world-atlas) 中的相同国家/地区名称键入。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2186,"value":"import { data as lifeExpectancy } from \"@d3/world-choropleth\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"lifeExpectancy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"viewof choropleth = vl.markGeoshape()\n\n .data(vl.topojson(\"https://unpkg.com/world-atlas@2/countries-110m.json\").feature(\"countries\"))\n .transform( // Transform is advanced\n vl.lookup(\"properties.name\").from( // Lookup is even more advanced\n vl.lookupData(Array.from(lifeExpectancy.entries())).key(\"0\").fields(\"1\")\n ).as(\"life expectancy\")\n )\n .project(vl.projection(\"equalEarth\"))\n .encode(\n vl.color().fieldQ(\"life expectancy\").legend({ orient: \"top\" }),\n vl.tooltip([\"properties.name\", \"life expectancy\"])\n )\n .width(width)\n .height(width / 2.5)\n .autosize({ type: \"fit-x\", contains: \"padding\" })\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2060,"value":"md`---\n## Next\n以上内容已经通过许多示例展示了可以使用 Vega-Lite 创建的图表类型的广度，但它不是详尽的，只涉及了许多可用的[标记](https://vega.github.io/vega-lite/docs/mark.html)和[编码](https://vega.github.io/vega-lite/docs/encoding.html)。\n\n几乎所有人都一次只使用一个标记，而许多富有成效的可视化往往混合使用多个标记。\n因此，在下一个notebook中，将[介绍层、构面和连接](layers-facets-concat)，这些是可以将视图组合在一起以创建更清晰的可视化的方式。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2321,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"function thumbnail(vegaView) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require(\"d3-fetch@1\", \"d3-array\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"import { tryIt } from \"3c458cfcac4dbda8\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null