44:["$","title",null,{"children":"Vega-Lite Chart Types | 1907040108 | Observable"}] 4c:[{"id":"6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","href":"https://static.observableusercontent.com/files/6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","name":"pwm-weather@1.csv","type":"text/csv","lastModified":1636621165816.077,"size":31922},{"id":"02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","href":"https://static.observableusercontent.com/files/02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","name":"market-cap.csv","type":"text/csv","lastModified":1636621165816.077,"size":60262},{"id":"0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","href":"https://static.observableusercontent.com/files/0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","name":"github.csv","type":"text/csv","lastModified":1636621165816.077,"size":21059},{"id":"23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","href":"https://static.observableusercontent.com/files/23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","name":"airports.csv","type":"text/csv","lastModified":1636621165816.077,"size":210365},{"id":"15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","href":"https://static.observableusercontent.com/files/15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","name":"alphabet.csv","type":"text/csv","lastModified":1636621165816.077,"size":275}] 48:{"id":"ff512191bb502d13","slug":"vega-lite-chart-types","title":"Vega-Lite Chart Types","thumbnail":"c9d11984b266e6d1a6c9ef43e33aa31b9816d1dd7932cd96c44a840ce9f233a4","access_level":"public","create_time":"$D2021-11-11T08:59:25.816Z","update_time":"$D2021-11-11T13:59:45.849Z","view_time":null,"first_public_time":"$D2021-11-16T13:48:50.429Z","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":1,"starred":false,"owner":{"type":"team","id":"78113d61fa0b7dac","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":"starter_2024","bio":"hello everybody","followed_by_you":false,"follows_you":false},"version":2581,"publish_version":2581,"role":null,"authored":false,"authors":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":null,"bio":"hello everybody","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vega-Lite Chart Types","cells":[{"id":1050,"value":"md`# Vega-Lite Chart Types\n\n接下来我们将扩展使用几种不同类型的图表。\n`","pinned":false,"hidden":false,"mode":"ojs","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## Bar charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### Simple bar chart\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() // about file attachments 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] // what a row of data in `alphabet` looks like","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// about viewof https://observablehq.com/@observablehq/a-brief-introduction-to-viewof\nviewof simpleBar = vl.markBar() // Make a bar chart\n .data(alphabet) // Using the alphabet data\n .encode(\n vl.x().fieldO(\"letter\"), // .sort(vl.fieldQ(\"frequency\").order(\"descending\")), // Letters are ordinal on the x-axis\n vl.y().fieldQ(\"frequency\").axis({ format: \"%\" }) // Frequency on the y-axis, formatted as percent\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选择条形图以使用 [\\`markBar()\\`](https://vega.github.io/vega-lite/docs/bar.html#properties) 可视化我们的数据。\n\n${tryIt(`\nChange \\`markBar()\\` to \\`markPoint()\\` for a scatter chart. \nSort the letters by frequency descending. \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(`\nChange the format specifier to \".2%\" for needlessly precise labels. \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### Horizontal bar chart\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要了解 [_aggregating data_](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\")\n\\`sum()\\` 是几个 [聚合函数](https://vega.github.io/vega-lite/docs/aggregate.html#ops) 之一。它将自动按_所有其他_编码通道分组。在这种情况下，它仅按 _vowel_ 的 _y_ 通道分组。 \n\n${tryIt(`\nRemove the \\`y()\\` channel to see the sum of all frequencies (100%). \nChange \\`sum()\\` to \\`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元音是 _true_ 或 _false_，因此我们将其视为名义上的并将其编码在 _y_ 轴上。\n\n${tryIt(`\nChange \\`y()\\` to \\`color()\\` for a stacked bar chart (more about stacked bars next). \nChange the field back to \\`\"letter\"\\` to see the original chart (each “sum” is of one letter).\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`波特兰天气数据来自三年的每日观测的最低和最高温度和整体状况（雾、雨、雪或太阳）以及降水量，数据来自 [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] // A sample of the weather data","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)）而不是作为时间（对于[时间尺度]（https://github.com/d3/d3-scale/blob/master/README.md#time-scales））。 \n\n${tryIt(`\nChange the time unit to \\`\"utcyear\"\\` or \\`\"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(`\nNormalize the heights by converting to percentages with \\`.stack(\"normalize\")\\`. \nFormat the newly normalized y-axis as percentages. \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(`\nChange \\`fieldN\\` to \\`fieldO\\` to default to a sequential color scheme. \nSpecify more natural colors to use by adding \\`.scale({ range: weatherColors })\\`. \nRemove the \\`color()\\` channel to see a non-stacked bar chart by month. \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(`\nReplace utcmonth with utcyear to see a comparison of conditions per year. \nSpecify \\`row()\\` instead of \\`column()\\`. \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()\\` 的 \\`title\\` 键将其完全删除。\n\n${tryIt(`\nSet the axis title to a string of your choice. \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## Line charts\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(`\nPass \\`{ interpolate: \"step\" }\\` to \\`markLine()\\` for a step chart. \nChange the chart type to \\`markPoint()\\` to see individual points. \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${tryIt(`\nFilter the date range to post-2018 for more granular axis labels. \nSmooth out the data by aggregating the average market cap by \\`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这里的线条共享相同的 y 轴并且重叠而不是堆叠。这是隐含的行为，因为重叠的线仍然可以解释（并且通常是首选）。\n\n由于数据包含多个股票代码，如果不确保按代码分组，最终会在不同的股票代码之间绘制一条纵横交错的线条。 \n\n${tryIt(`\nChange \\`color()\\` to \\`detail()\\` to preserve grouping by symbol, without coloring. \nSort the colors and legend by maximum market cap, making it a bit easier to identify symbols by color. \nRemove the \\`color()\\` / \\`detail()\\` channel to ungroup the lines. \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### Area chart\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)。如果需要，\\`markPoint\\` 可以利用额外的 \\`shape()\\` 编码通道。 \n\n${tryIt(`\nAdd a \\`shape()\\` channel to additionally encode condition as different shapes. \nSet the timeUnit to utcmonthdate for a better view of year-over-year trends. \nRemove the \\`y()\\` channel for a one-dimensional view of conditions over time (leading to strip plots below). \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`#### 标记（）\n[Ticks](https://vega.github.io/vega-lite/docs/tick.html) 是一像素的短线。使用 \\`size()\\` 编码通道更改它们的长度。 \n\n${tryIt(`\nUse the _y_-axis for condition and preserve grouping by year by encoding utcyear as \\`row()\\`. \nEncode tmax as the tick’s \\`size()\\` to get a sense of temperature. \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(`\nSwitch to \\`markSquare\\` and encode preciptation as size. \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(`\nChange \\`average\\` to \\`max\\` to see a “noisier” variation in temperature. \nRemove the aggregation function and use \\`fieldQ\\` to see the last year’s data point. \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-chrom 的](https://github.com/d3/d3-scale-chromatic) 配色方案都是 [按名称可用](https://vega.github.io/vega/docs/schemes /＃参考）。 redyellowblue 的冷到热方向相反，我们选择反转它。 \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 打孔卡）\n\n与上面的热图非常相似，我们可以使用带有编码大小的圆圈代替矩形来实现 GitHub 旧的“打孔卡”可视化。 `","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${tryIt(`\nChange the range of sizes used. \nAdd a tooltip for the precise number of commits. \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### 表格\n表格也是一种可视化形式，可以使用 \\`markText\\` 使用 Vega-Lite 轻松创建。查看所有天气数据中的条件变量。 `","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(`\nDisplay other values like tmin, tmax, or 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(`\nSpecify other widths or heights. \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_) 和标题(_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## Maps\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) 的任何 [投影](https://github.com/d3/d3-geo#azimuthal-projections) 中。 com/d3/d3-geo）。尚无地标可供参考，这用途有限，但通常会很快产生可识别的地理趋势。 `","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(`\nCreate an artful rendering of the states using \\`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(`\nSwitch to \"mercator\" or \"equalEarth\" for a global perspective. \nSee what orthographic with rotation looks like. \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映射到特定的 _longitudes_ 和 _latitudes_，而不是 _x_ 和 _y_。这是“用标记思考”而不是“用图表类型思考”的一个很好的例子。我们只是画圆圈，但它们的位置由数据中的“经度”和“纬度”字段决定，通过地理投影映射到屏幕（您可以将其视为[比例]（https://github .com/d3/d3-scale))。创建散点图时会发生类似的过程，其中时间和温度指示 _x_ 和 _y_ 位置。 \n`","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可以使用 [layering](https://vega.github.io/vega-lite/docs/layer.html) 包括可识别的土地或水景\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(`\nSwap in _states_ or _counties_ for _nation_ for state or county boundaries. \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(`\nPick another boundary color. \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) 将多个视图相互叠加，最后一个在顶部。默认情况下，所有尺度和轴在所有层之间共享。\n\n\n${tryIt(`\nRemove one of the layers to see them one at a time. \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根据数据为每个形状着色为 [choropleth map](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 .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":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":773,"value":"md`---`","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