34:["$","title",null,{"children":"Visualize a data frame with Observable, in Jupyter | 黄天宇 | Observable"}] 3c:T4b0,{ return html`

${md`**导出到 JSON** 为 Observable 捆绑数据帧的另一种方法是导出到 JSON： ~~~py with open('data.json', 'w') as f: json.dump(df.to_dict(orient='records'), f) ~~~ JSON格式的优点是不需要解析器，因为JSON解析是Web平台内置的一项功能。JSON还可用于获取跨越 Observable 间隙的非表格数据。 ~~~py nested_data = {'title': 'boss', 'reports': [ {'title': 'data science manager', 'reports': [ {'title': 'senior data scientist', 'reports': []}, {'title': 'data stientist', 'reports': []}, ]}, {'title': 'design lead', 'reports': [ {'title': 'designer', 'reports': []}, {'title': 'designer', 'reports': []}, {'title': 'designer', 'reports': []}, ]}, ]} with open('data.json', 'w') as f: json.dump(nested_data, f) ~~~ 可以将上述分层数据呈现为如下所示：[D3 Hierarchy](https://observablehq.com/@d3/d3-hierarchy) `}

${treeChart}

`; }3d:[{"id":"39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","href":"https://static.observableusercontent.com/files/39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","name":"iris_data.csv","type":"text/csv","lastModified":1637579260964.779,"size":3854},{"id":"8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","href":"https://static.observableusercontent.com/files/8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","name":"image@8.png","type":"image/png","lastModified":1637579260964.779,"size":2807},{"id":"5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","href":"https://static.observableusercontent.com/files/5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","name":"image@9.png","type":"image/png","lastModified":1637579260964.779,"size":33708},{"id":"df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","href":"https://static.observableusercontent.com/files/df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","name":"image@10.png","type":"image/png","lastModified":1637579260964.779,"size":3333},{"id":"32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","href":"https://static.observableusercontent.com/files/32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","name":"image@7.png","type":"image/png","lastModified":1637579260964.779,"size":2773},{"id":"f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","href":"https://static.observableusercontent.com/files/f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","name":"2020-01-24 09.52.04.gif","type":"image/gif","lastModified":1637579260964.779,"size":1430617},{"id":"283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","href":"https://static.observableusercontent.com/files/283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","name":"2020-01-30 18.44.38.gif","type":"image/gif","lastModified":1637579260964.779,"size":3839051},{"id":"7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","href":"https://static.observableusercontent.com/files/7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","name":"image@5.png","type":"image/png","lastModified":1637579260964.779,"size":362859},{"id":"031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","href":"https://static.observableusercontent.com/files/031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","name":"image@4.png","type":"image/png","lastModified":1637579260964.779,"size":28396},{"id":"049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","href":"https://static.observableusercontent.com/files/049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","name":"2020-01-30 17.14.33.gif","type":"image/gif","lastModified":1637579260964.779,"size":2187674},{"id":"9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","href":"https://static.observableusercontent.com/files/9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","name":"job_data.json","type":"application/json","lastModified":1637579260964.779,"size":326}] 38:{"id":"1292fae78ad4f3f0","slug":"visualize-a-data-frame-with-observable-in-jupyter","title":"Visualize a data frame with Observable, in Jupyter","thumbnail":"29030f8cc1c8477dd68b1bc4d1963f943d34fd3924dc3f884e541934b96093ce","access_level":"public","create_time":"$D2021-11-22T11:07:40.964Z","update_time":"$D2021-11-22T13:25:52.737Z","view_time":null,"first_public_time":"$D2021-11-22T13:16:34.114Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c8d301856d7f6ece","login":"1901010219","name":"黄天宇","avatar_url":"https://avatars-next.observableusercontent.com/05f77f95074fe2a4015962edb2f701978496ed6d5bf44fbb9d12793f802f25d2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2507,"publish_version":2507,"role":null,"authored":false,"authors":[{"type":"individual","id":"ad43abadd13291b6","login":"1901010219","name":"黄天宇","avatar_url":"https://avatars-next.observableusercontent.com/05f77f95074fe2a4015962edb2f701978496ed6d5bf44fbb9d12793f802f25d2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ad43abadd13291b6","login":"1901010219","name":"黄天宇","avatar_url":"https://avatars-next.observableusercontent.com/05f77f95074fe2a4015962edb2f701978496ed6d5bf44fbb9d12793f802f25d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualize a data frame with Observable, in Jupyter","cells":[{"id":0,"value":"md`# Visualize a data frame with Observable, in Jupyter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2319,"value":"md`Jupyter用户使用Observable最常见的原因是可视化的创建和分布。让我们把一些数据放入Observable，把它形象化，甚至把它放回Jupyter。\n\n如果你不熟悉Jupyter，下面的图片看起来也不熟悉也请看看这个:\nThe Observable[Introduction to Data](https://observablehq.com/@observablehq/introduction-to-data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`## 把你的数据放入Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"md`假设我们想要查看Iris数据集,在Jupyter中使用pip install vega_datasets.\n\n如果你有Jupyter notebook，复制这段代码来查看数据。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"md`\n~~~py\n!pip install vega_datasets\nfrom vega_datasets import data\ndf = data.iris()\ndf.head()\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"md`\\`df\\` 是[Pandas](https://pandas.pydata.org/) 的dataframe,\n\n当我们在Jupyter中有这样的dataframe时，我们可以通过导出到csv来将其打包到Observable中:\n\n~~~py\ndf.to_csv('data.csv')\n~~~\n\nCSV 是您最有可能从其他来源获得的文件格式。iris数据集很常见：在[这儿](https://forge.scilab.org/index.php/p/rdataset/source/tree/master/csv/datasets/iris.csv)可以下载数据集。\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`获得包含数据的 CSV 文件后，将数据放入notebook的最直接方法是使用：[文件附件](https://observablehq.com/@observablehq/file-attachments). \n\n在编辑Cell时按${keys(\"Cmd-Shift-U\")} 以显示文件上传对话框，或通过 ... 菜单打开文件窗格并将文件拖到窗格中。\n\n

Uploading a different CSV file about brand popularity

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"md`单元格中的代码可以通过多种方法读取文件附件的内容。这些方法中的大多数都返回[Promises](https://observablehq.com/@observablehq/introduction-to-promises), 这些对象可以像Python中的Tasks一样等待。如果在Cell的顶层使用其中之一，便可以省略等待：一旦任务完成，Cell输出将更新以显示结果。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"fullText = FileAttachment(\"iris_data.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`要在其他代码中使用这些方法，您需要使用关键字：await。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"lines = (await FileAttachment(\"iris_data.csv\").text()).split('\\n')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`有关这些方法的完整列表以及有关文件附件如何工作的更多信息，请查看[file attachments documentation](https://observablehq.com/@observablehq/file-attachments).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`> 如果您有想要可视化的实时数据，您可能需要使用[\\`fetch()\\`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)调用 API（如有必要，使用[secret credentials](https://observablehq.com/@observablehq/secrets)），或查询[database](https://observablehq.com/@observablehq/connecting-to-databases)来制作实时仪表板。在本教程的下一个notebook中，我们将更多地了解这样的交互性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md`## 解析文本数据\n\n我们也可以尝试编写自己的CSV解析：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"(await FileAttachment(\"iris_data.csv\").text()).split('\\n').map(line => line.split(','))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`以前经常使用CSV的人知道这样的东西是如何工作，但在最坏情况下我们更改数据源会中断。所以我们需要d3-dsv（用于解析 CSV 的库）。`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"d3 = require(\"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"md`[\\`require()\\` function](https://observablehq.com/@observablehq/introduction-to-require)函数用于从GitHub或[npm](https://www.npmjs.com/)（JavaScript 的 PyPI）等来源中提取 JavaScript 库。\n\n现在我们来使用该函数：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"irisData = d3.csvParse(await FileAttachment(\"iris_data.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"md`我们得到了一个数组（在 Python 中我们称之为“列表”）。点击下方的“▶ Array(150)”查看irisData的值。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"irisData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"md`我们可以在Observable中手动检查像上面的irisData这样的对象，方法是单击展开它，但由于这是一个对象数组，每个对象都具有相同的属性，因此也可以将数据视为表格。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"table(irisData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md`我们需要导入这个表函数才能在这个笔记本中使用它，但导入不需要出现在它的任何用途之上。笔记本作者经常将无趣的导入移动到笔记本的底部...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"import {table} from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`## 转换数据`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`许多 JavaScript 库和绘图实用程序都希望数据采用这种[\"Tidy\" form](https://vita.had.co.nz/papers/tidy-data.pdf)：对象的数组具有数据每一行的属性。在这种情况下，数组 irisData 中的每个对象都具有属性 sepalLength、sepalWidth、petalLength、petalWidth和species。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"md`在JavaScript-for-data-wrangling方面有个好消息：浏览器的JavaScript运行时速度很快。与 [PyPy](https://pypy.org/)一样，JavaScript 引擎具有很好的[JITs](https://en.wikipedia.org/wiki/Just-in-time_compilation)，尽管存在动态类型系统，但它使数字处理相对高效。因此，在数据变得非常大之前，我们不一定需要转向更高效的数据表示，例如[Apache Arrow](https://observablehq.com/@theneuralbit/introduction-to-apache-arrow)或[Data-Forge](http://js4ds.org/#s:dataforge)来处理表格数据。如果只是想过滤一些数据或挑选对象数组上的字段，这些代码可以帮助您入门:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`有许多数组方法有助于以Tidy form（类似对象的数组）转换数据。map和filter是最常见的：\n\n* \\`data.map(x => expr)\\` 等价于 Python 列表推导式：\\`[expr for x in data]\\`\n* \\`data.map(x => {...x, newProp: x.prop1 + x.prop2})\\` 类似于 Pandas dataframe分配： \\`df[\"newProp\"] = df[\"prop1\"] + df[\"prop2\"]\\`\n* \\`data.filter(x => expr)\\` 等价于 Python 列表推导式： \\`[x for x in data if expr]\\`\n* \\`data.filter(x => x.prop === 7)\\` 类似于 Pandas dataframe切片 \\`df[df.prop == 7]\\`\n\n使用这些方法查找所有 virginica 的花瓣长度如下所示：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"irisData.filter(d => d.species === 'virginica').map(d => d.petalLength)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`如果你更喜欢数组方法，JavaScript 有 for 循环和 while 循环；这是一个 for 循环：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"{\n const results = [];\n for (const datum of irisData) {\n if (datum.petalLength < 4) {\n results.push(datum)\n }\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`有关在 JavaScript 中处理数据的更多信息，请查看学习[Learn JavaScript Data guide](https://observablehq.com/@dakoop/learn-js-data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`## 可视化制作`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`在 Observable 中，您可以随意使用Web的API和库。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`**Vega-Lite**:如果您熟悉Python绘图库Altair，Vega-Lite JavaScript API 会让你感觉非常熟悉。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"vegaPetals = vl\n .markPoint()\n .data(irisData)\n .encode(\n vl.y().fieldQ(\"petalLength\"),\n vl.x().fieldQ('petalWidth'),\n vl.color().fieldN('species')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`请参阅[Charting in Observable](https://observablehq.com/d/3c458cfcac4dbda8?collection=@observablehq/observable-for-charting)以快速启动和运行Vega-Lite或从[Intro to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)获得更全面的外观。\n\nVega-Lite 是制作图表的第一站：获得一个漂亮的图表非常快，一旦你理解了它，就很容易维护声明性代码。\n\n为了大家帮助从Altair转换，提供如下示例：Python 代码（左）JavaScript代码（右）：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2218,"value":"{\n const topLeft = md`~~~py\nimport altair\nfrom vega_datasets import data\n\nirisData = data.iris()\n\n(altair\n .Chart(irisData)\n .mark_point()\n .encode(\n x='petalLength:Q',\n y='petalWidth:Q',\n color='species:N',\n ))\n~~~`;\n \n const topRight = md`~~~js\n\n\n\n\n\n vl\n .markPoint()\n .data(irisData)\n .encode(\n vl.y().fieldQ(\"petalLength\"),\n vl.x().fieldQ('petalWidth'),\n vl.color().fieldN('species')\n )\n .render()\n ~~~`;\n\nreturn compareCode(topLeft, topRight, '', '');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`**重复使用Cells**: 您可以通过查看[the Visualizations collection](https://observablehq.com/collection/@observablehq/visualization)中的 Observable notebook来查找您喜欢的可视化。找到某些内容后，单击以了解它是如何制作的或查看您想要换出的依赖项。\n\n[\\`import {cell} from \"@user/notebookslug\"\\` syntax](https://observablehq.com/@observablehq/introduction-to-imports)语法用于从其他笔记本导入Cells。可选的 with {cellName as localName} 语法允许您导入任何公共 Observable notebook 并使用您自己的依赖项交换重新渲染它。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"petalLengths = irisData.map(sample => sample.petalLength)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"import { chart } with { petalLengths as data } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`**HTML and CSS**:如果您已经了解一些HTML和CSS,您可以通过编写html并嵌入其他Cells中定义的变量来立即开始制作交互式可视化。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"simpleHtml = {\n const sigils = {\n setosa: '🌸',\n versicolor: '🌼',\n virginica: '🌺',\n };\n \n const sortedIrises = irisData.slice(0); // note making a copy here to sort\n // because mutation of data from other cells is frowned upon in Observable \n sortedIrises.sort((a, b) => a.petalLength - b.petalLength)\n \n const flowers = sortedIrises.map(flower => html`\n${sigils[flower.species]}`)\n return html`

${flowers}

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"md`与React渲染函数类似，Cells返回最终呈现在页面上的HTML。通过有条件地构建HTML，您可以快速编写仅依赖于来自其他Cells的变量的交互界面。要使可视化具有交互性，您可以使用notebook中其他位置的视图定义的变量：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"viewof scale = slider({min: 1, max: 20, value:7, step: 0.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`**D3**: 深度定制的可视化是Observable的一大卖点。如果想制作不同的可视化效果，D3是很棒的工具\n\n有很多关于Observable的D3文档。[从D3开始](https://observablehq.com/d/5a4c8ad2dcf5d2e1)是最好的起点。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`**Plotly**: JavaScript 中有很多图表库。Plotly是一个简单、流行的工具，在Observable上有很多[例子](https://observablehq.com/@jashkenas/plotly-js)。如果您之前在Python中使用过Plotly，那么它的界面可能是您在Observable中上手最快的界面。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`## 分享你的作品\n\n单击顶部的“发布”按钮：\n\n

\n\n这将共享当前状态的notebook：不会共享任何更改历史记录，而在进行更改后共享新版本，需要再次单击“发布”。当您在第一次单击“发布”后进行更改时，该按钮将变为蓝色以鼓励您使用所做的更改更新您的公共版本。\n\n

\n\n查看者将能够自己对notebook临时更改，并可选择将其fork以将这些修改保存到他们自己的版本中。一个简单但功能强大的更改是让用户通过替换附加文件来交换自己的数据。\n\n要更明智地共享您的笔记本，请单击标题中...按钮出现的菜单中的“启用链接共享”。\n\n

\n\n现在任何拥有这个url的人都可以查看notebook，尝试自己的更改，提出建议，并可以选择fork来制作自己的副本。要共享其他更改，请按蓝色的“重新共享”按钮。\n\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":1381,"value":"embeddingIntro = md`还有另一种重要的共享：在您的上下文中共享可视化。虽然您可以在[observablehq.com](https://observablehq.com)上导入数据、制作可视化原型、与合作者共享预览、提出建议并一起迭代以及发布专业文档，但您不必将查看者发送到该URL来查看您的内容创建。\n\n如果你有一个网站，你可以在那个页面中嵌入一个来自Observable的Cells。如果您有一个Jupyter notebook来处理数据，您也可以在其中嵌入一个Cell。\n\n已发布notebook中的每个命名 Observable Cell都在Cell左侧的**︙**菜单中提供了嵌入代码。\n\n>

\n\n此选项提供的代码如下所示：\n\n> ~~~html\n

\n\n~~~\n\n当此代码嵌入到网页中时，无论是由静态站点生成器生成还是使用Web框架动态生成，它都会生成与其在 Observable中的输出相同的Cell，减去编辑器UI、代码和Observable CSS样式表。您可以[阅读有关嵌入的所有细节](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)，下面我们编写一个最简单的Flask应用程序来显示可视化：\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"embedcode = md`pip install flask之后，将这样的代码粘贴到app.py文件中：\n\n~~~py\nfrom flask import Flask\napp = Flask(__name__)\n\nembed = \"\"\"\n

\n\n\"\"\"\n\n@app.route('/')\ndef hello_world():\n return f\"\"\"\n

This is web page served with Flask

\n {embed}\n\"\"\"\n~~~\n\n然后运行\n~~~\nFLASK_APP=app.py flask run\n~~~\n\n于是您将拥有一个网页，其中嵌入了该Cell中的任何内容，包括任何交互性！`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"html`

\n\n\"\"\"\ndisplay(HTML(embed))\n~~~\n\nObservable的亮点在于制作可立即响应交互的图表：这是与上面相同的图，但具有阈值输入：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"vegaPetalsWidget = vl\n .markPoint()\n .data(irisSubset)\n .encode(\n vl.y().fieldQ(\"petalLength\").scale({domain: [0, Math.max(...petalLengths)]}),\n vl.x().fieldQ('petalWidth'),\n vl.color().fieldN('species')\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2109,"value":"md`这是同一个图表，但我们连接到不同的数据：irisSubset，一组有限的iris数据点。我们将通过过滤具有特定大小范围的萼片的花的原始irisData来构建这个子集。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"viewof sepalLengthLimits = rangeSlider({\n min: Math.min(...irisData.map(i => i.sepalLength)),\n max: Math.max(...irisData.map(i => i.sepalLength)),\n precision: 2,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [5, 7],\n title: 'sepal length limits',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"viewof sepalWidthLimits = rangeSlider({\n min: Math.min(...irisData.map(i => i.sepalWidth)),\n max: Math.max(...irisData.map(i => i.sepalWidth)),\n precision: 2,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2.5, 4],\n title: 'sepal width limits',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"md`这些滑块让查看者无需更改代码中的数字即可指定这些阈值。请参阅本系列的[下一个教程](https://observablehq.com/d/c4e1459a8a99cdaf)，了解这些交互式输入的工作原理。移动滑块以查看图表上的点随着下方irisSubset数组中的对象而变化。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"irisSubset = irisData\n.filter(flower => \n flower.sepalLength >= sepalLengthLimits[0] &&\n flower.sepalLength <= sepalLengthLimits[1])\n.filter(flower => \n flower.sepalWidth >= sepalWidthLimits[0] &&\n flower.sepalWidth <= sepalWidthLimits[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2076,"value":"md`要嵌入多个Cells，我们需要稍微更改复制的嵌入代码:\n\n~~~js\n(new Runtime).module(define, name => (name === \"vegaPetals\") && inspect());\n~~~\n具有指定要检查的Cell的表达式\\`(name === \"vegaPetals\")\\` 我们需要扩展它以评估我们想要嵌入的所有Cells:\\`vegaPetals\\`为真, 还有\\`sepalLengthLimits\\`和\\`sepalWidthLimit\\`的s视图. 我们不需要担心像\\`irisSubset\\`那样包含这些Cells的依赖项。\n\n\\`||\\`如何或在JavaScript中拼写，我们将使用它来扩展检查以允许这三个名称中的任何一个。\n\n~~~js\n(new Runtime).module(define, name => (\n name === \"vegaPetalsWidget\" ||\n name === \"viewof sepalLengthLimits\" ||\n name === \"viewof sepalWidthLimits\") && inspect());\n~~~\n这是我们粘贴到Jupyter Cells中的新代码：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"md`\n~~~py\nfrom IPython.display import display, HTML\nembed = \"\"\"

\n\n\"\"\"\ndisplay(HTML(embed))\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":1835,"value":"FileAttachment(\"2020-01-30 18.44.38.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"md`阅读有关嵌入的[更多信息](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)来了解如何渲染整个notebook以及将数据推入Cells以及从Cells中读取数据。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md`在本系列的下一个notebook中，我们将着手于使可视化具有交互性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"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":680,"value":"md`## 附录\n\n由于Observable中Cells的顺序由notebook作者自行决定，因此无助于讲述notebook事例的Cells通常放在最后。通过这种方式，notebook仍然是可重现的——仍然可以看到运行了哪些代码——但这段代码不会显得很碍事。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"treeData = {\n const convert = (position) => ({\n name: position.title,\n children: position.reports.map(convert)\n })\n \n return convert(await FileAttachment('job_data.json').json());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"import {keys} from \"@observablehq/file-attachments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1699,"value":"import {chart as treeChart} with {treeData as data} from '@d3/collapsible-tree'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"import {rangeSlider, themes} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"import { compareCode } from '@ballingt/comparecode'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null