25:["$","title",null,{"children":"使用Vega-Lite绘制图表 | 1907040108 | Observable"}] 4c:[{"id":"1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","href":"https://static.observableusercontent.com/files/1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","name":"cars.json","type":"application/json","lastModified":1636513775008.213,"size":100492}] 48:{"id":"ada73880a04d3713","slug":"vega-lite","title":"使用Vega-Lite绘制图表","thumbnail":"820c1ce779bde2347e128aab81a550e16f95126993729412583ac517dd0c2c1f","access_level":"public","create_time":"$D2021-11-10T03:09:35.008Z","update_time":"$D2021-11-10T03:47:20.439Z","view_time":null,"first_public_time":"$D2021-11-16T13:49:00.754Z","has_unpublished_edits":null,"fork":{"id":"3c458cfcac4dbda8","slug":"vega-lite","title":"Charting with Vega-Lite","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"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":583,"publish_version":583,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"使用Vega-Lite绘制图表","cells":[{"id":0,"value":"md`# 使用Vega-Lite绘制图表\n\n先决条件: [A Taste of Observable](/d/4e36c4335cde0fd3), [数据介绍](/@observablehq/introduction-to-data)\n\n\n为了在 Observable 中快速绘制图表和快速 [数据探索](https://en.wikipedia.org/wiki/Exploratory_data_analysis),我们推荐 [Vega-Lite’s JavaScript API](/@vega/vega-lite-api): 你只需几行代码即可获得所有经典的标准图表hf，然后使用高级 [分面, 分层](layers-facets-concat), 和 [互动性](/@vega/vega-lite-cross-filter-example?collection=@vega/vega-lite-api). Vega-Lite 比在 Excel 中制作现成的图表更强大，比在 D3 中制作完全自定义的可视化更快。凭借[大量可供学习的示例](https://vega.github.io/vega-lite/examples/), 它得到了广泛社区的支持，甚至通过 [Altair](https://altair-viz.github.io/) 扩展到 Python 等其他语言中。\n\n本教程本身就是一个 Observable notebook，因此所有代码都是实时的。\n\n首先，将 Vega-Lite 导入notebook：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":7,"value":"md`制作第一个图表:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"vl.markCircle() // Make a scatter chart\n .data(cars) // Using the cars data (below)\n .encode(\n vl.x().fieldQ(\"Horsepower\"), // For x, use the Horsepower field\n vl.y().fieldQ(\"Miles_per_Gallon\"), // For y, use the Miles_per_Gallon field\n vl.tooltip().fieldN(\"Name\") // For tooltips, show the Name field\n )\n .render() // Draw the chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"cars = FileAttachment(\"cars.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## How it works\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":22,"value":"md`### markCircle()\n这是我们正在尝试制作的图表类型。对于此示例，我们选择了在每个点使用圆圈的散点图。 Vega-Lite 还有其他几种[标记类型](https://vega.github.io/vega-lite/docs/mark.html#types) 来表示折线图和条形图、地图、表格等\n\n${tryIt(`\nPass an option of \\`{ size: 200 }\\` to \\`markCircle()\\`. \nTry \\`markSquare\\` instead of \\`markCircle\\`. \nTry \\`markPoint({ shape: 'diamond' })\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`### data()\n我们使用 \\`data()\\` 方法将数据作为数组传递给 Vega-Lite。您还可以将 URL 作为字符串传递，Vega-Lite 将为您获取并解析它。\n\n在这种情况下，我们的数据是一个对象数组。每个对象都有一组相同的键/值字段:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"cars[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`### encode()\n有很多方法可以使我们的数据可视化。我们可以使用屏幕上的位置（x 和 y）、颜色、形状、大小。我们传递给 \\`encode()\\` 的参数定义了我们的数据和图表之间的编码或映射。有 [许多编码](https://vega.github.io/vega-lite/docs/encoding.html) 可用.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`### vl.x().fieldQ(\"Horsepower\"), vl.y().fieldQ(\"Miles_per_Gallon\")\n我们希望看到 _x_ 轴上显示的马力和 _y_ 轴上显示的每加仑英里数。传递给 \\`fieldQ()\\` 的字符串匹配对象行的字段。 Q 代表 _quantitative_（稍后会详细介绍）.\n\n${tryIt(`\nChange Horsepower to Acceleration. \nSwap what fields are displayed on the _x_- and _y_-axis. \nRemove the _y_ definition altogether. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`### vl.tooltip().fieldN(\"Name\")\n\n与 x 和 y 编码类似，我们可以通过指定另一个字段作为工具提示内容来为每个点添加工具提示。在这里，我们要查看每个点的汽车型号名称。 N 代表 _nominal_（稍后再详细介绍）.\n\n${tryIt(`\nChange Name to Origin. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### render()\n最后，我们渲染并返回我们的图表！ \\`render()\\` 可以采用一些选项来调整输出格式。除了渲染，我们还可以使用 \\`toObject()\\` 返回 API 创建的底层 [Vega-Lite JSON 规范](https://vega.github.io/vega-lite/docs/)。这种表示在调试 API 时很有帮助。\n\n${tryIt(`\nPass the option \\`{ renderer: \"svg\" }\\` to the render method. \nReplace \\`render()\\` with \\`toObject()\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`---\n## Another example\n\n如何按原产国计算车型数量？`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"vl.markBar() // Make a bar chart\n .data(cars) // With the cars data again\n .encode(\n vl.y().fieldN(\"Origin\"), // y can come before x: different orders won't break anything\n vl.x().count() // For x, count the number of records\n )\n .render() // Draw the chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`这与我们之前的示例非常相似，但有一些主要区别：\n### encode() parameter order\n _y_ 这次比 _x_ 来得早。编码顺序对 Vega-Lite 无关紧要。选择对您最有意义的顺序。在这种情况下，我们选择在因变量计数之前列出自变量“Origin”。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`### fieldN()\n\n \\`N\\` 后缀代表 _nominal_。由于 Origin 的值是像“Japan”和“USA”这样的字符串，我们希望将该字段解释为名义或分类名称，而不是数量或数值。这有助于 Vega-Lite 确定相应的刻度和轴类型.\n\n全套 [字段类型](https://vega.github.io/vega-lite/docs/encoding.html#field-def) 是:\n\nMethod | Type | Description | Examples\n--- | --- | ---\n\\`fieldQ()\\` | quantitative | numerical magnitudes | 1, 1.2, 3, 4, $1,230.60\n\\`fieldT()\\` | temporal | corresponding to Date values | 2019-01-02T00:01:23Z, 1996\n\\`fieldN()\\` | nominal | unordered, categorical data | Audi, Ford, Hyundai, Tesla\n\\`fieldO()\\` | ordinal | like nominal, but with an inherent order | small, medium, large\n\n${tryIt(`\nChange \\`fieldN()\\` back to \\`fieldQ()\\` for an undesirable result. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`### count()\n\n\\`count()\\` 是一个[聚合函数](https://vega.github.io/vega-lite/docs/aggregate.html#ops)。我们正在计算行数，按其他字段（原点）分组。我们将在 [第 2 部分：Vega-Lite 图表类型](vega-lite-chart-types) 中详细讨论 Vega-Lite 中的聚合！\n\n${tryIt(`\nRemove the \\`vl.y().fieldN(\"Origin\")\\` line to see an ungrouped count. \nReplace \\`count()\\` with \\`average(\"Miles_per_Gallon\")\\` to see average gas mileage by country. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`---\n## The shape of your data matters数据的形状很重要\n\n创建图表时，数据的 _shape_ 很重要。 Vega-Lite 和所有 JavaScript 图表库都是如此。\n\nVega-Lite 的最佳形状被称为 [整洁数据](https://cran.r-project.org/web/packages/tidyr/vignettes/tidy-data.html)。拥有这种形状的数据也将使您在其他数据工具（如 R 或 Tableau）中受益。我们一直在使用的汽车数据集已经采用这种格式，其中每一行代表一个“观察”或某事物的实例，每列代表一个“变量”。\n\n需要明确的是，不需要这种精确结构中的数据来从 Vega-Lite 中获得有意义的图表，但是这样做会使事情更容易思考和编写代码。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Table(cars, { width: 660 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"import { Table } from \"@observablehq/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"function tryIt(text) {\n const list = text.split(\"\\n\").filter(s => s).map(s => `

– ${s}`);\n return md`\n

\n**Try it yourself:**\n
\n${list.join(\"\")}\n
\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null