45:["$","title",null,{"children":"在Observable中用Jupyter对dataframe进行可视化 | 1907040109 | Observable"}] 4d:T4df,{ return html`

${md`**除此之外: 导入到JSON** 另一种在Observable捆绑dataframe的方法是导出到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层次结构](https://observablehq.com/@d3/d3-hierarchy)呈现（单击节点展开）： `}

${treeChart}

`; }4e:[{"id":"283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","href":"https://static.observableusercontent.com/files/283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","name":"2020-01-30 18.44.38.gif","type":"image/gif","lastModified":1636620138506.478,"size":3839051},{"id":"df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","href":"https://static.observableusercontent.com/files/df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","name":"image@10.png","type":"image/png","lastModified":1636620138506.478,"size":3333},{"id":"32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","href":"https://static.observableusercontent.com/files/32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","name":"image@7.png","type":"image/png","lastModified":1636620138506.478,"size":2773},{"id":"f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","href":"https://static.observableusercontent.com/files/f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","name":"2020-01-24 09.52.04.gif","type":"image/gif","lastModified":1636620138506.478,"size":1430617},{"id":"5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","href":"https://static.observableusercontent.com/files/5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","name":"image@9.png","type":"image/png","lastModified":1636620138506.478,"size":33708},{"id":"39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","href":"https://static.observableusercontent.com/files/39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","name":"iris_data.csv","type":"text/csv","lastModified":1636620138506.478,"size":3854},{"id":"8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","href":"https://static.observableusercontent.com/files/8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","name":"image@8.png","type":"image/png","lastModified":1636620138506.478,"size":2807},{"id":"7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","href":"https://static.observableusercontent.com/files/7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","name":"image@5.png","type":"image/png","lastModified":1636620138506.478,"size":362859},{"id":"031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","href":"https://static.observableusercontent.com/files/031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","name":"image@4.png","type":"image/png","lastModified":1636620138506.478,"size":28396},{"id":"049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","href":"https://static.observableusercontent.com/files/049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","name":"2020-01-30 17.14.33.gif","type":"image/gif","lastModified":1636620138506.478,"size":2187674},{"id":"9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","href":"https://static.observableusercontent.com/files/9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","name":"job_data.json","type":"application/json","lastModified":1636620138506.478,"size":326}] 49:{"id":"e47a836550c524b8","slug":"observable-jupyter-dataframe","title":"在Observable中用Jupyter对dataframe进行可视化","thumbnail":"569808e0bb2a545333ab9f841db71e868b67efa19a7484b328f73b72a3aac587","access_level":"public","create_time":"$D2021-11-11T08:42:18.506Z","update_time":"$D2021-12-08T08:38:53.192Z","view_time":null,"first_public_time":"$D2021-11-20T15:55:34.191Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"26a284e1b2d5e24f","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2489,"publish_version":2489,"role":null,"authored":false,"authors":[{"type":"individual","id":"3110ce52e2112fa1","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3110ce52e2112fa1","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4c2bd110a5284e9f","slug":"observable-for-jupyter-users","title":"Observable for Jupyter users","owner":{"id":"26a284e1b2d5e24f","login":"1907040109","name":""}},"type":"notebook","body":{"titling":"auto","title":"在Observable中用Jupyter对dataframe进行可视化","cells":[{"id":0,"value":"md`# 在Observable中用Jupyter对dataframe进行可视化`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`对于Jupyter用户来说，最常见的使用Observable的原因是可视化的创建和分布。让我们把一些数据放到观测中，可视化它，共享可视化，甚至把它放回到Jupyter上。\n\n如果你不熟悉Jupyter，下面的图片看起来也不熟悉，那么你可能更喜欢一个没有Jupyter和 python 角度的可观测数据的概述: [数据的可观测介绍](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":1293,"value":"md`比如说我们要看一些花的数据: 鸢尾花数据集 [Iris dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set)。Vega 和[Altair](https://github.com/altair-viz/vega_datasets)的团队已经很友好地让这个数据集变成可安装型的，通过在Jupyter notebook上 pip install vega_datasets。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"md`用Jupyter notebook，复制这个代码来查看数据\n\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如果您是在 jupyter 步骤之后加入的，那么 csv 是您最有可能从其他来源获得的文件格式。你可以在网上找到这个[鸢尾花数据集](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":"$4d","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文件最直接获取数据的方法就是使用[file attachment](https://observablehq.com/@observablehq/file-attachments)，你*可以* 复制粘贴进你的cell中从而获得到数据.\n\n在编辑单元格时按 ${keys(\"Cmd-Shift-U\")}弹出一个文件上传对话框，或者通过菜单打开文件窗格，将文件拖到窗格中。\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`cell中的代码可以使用多种方法读取文件附件的内容。这些方法中的大多数都会返回[Promises](https://observablehq.com/@observablehq/introduction-to-promises)，这些对象可以像 python 中的[Tasks](https://docs.python.org/3/library/asyncio-task.html)一样被等待。如果您在cell的顶层使用其中一个，那么可以省略 await: 一旦任务完成，cell输出将更新以显示结果(或者用 javascript 术语，“ once the promise has resolved”)。`","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`有关这些方法的完整列表以及关于文件附件如何工作的更多信息，请查看[文件附件文档](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)（如果需要使用[secret credentials](https://observablehq.com/@observablehq/secrets)）调用API，或查询数据库[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()\\`函数](https://observablehq.com/@observablehq/introduction-to-require)用于从GitHub或[npm](https://www.npmjs.com/)等源代码中的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 中我们称之为“ list”)。单击下面的\"▶ 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`你可以通过点击扩展它来手动检查一个对象，比如上面提到的 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`我们需要导入这个table函数，以便在这个notebook中使用它，但是导入不需要出现在它的任何使用之上。notebook作者经常把无趣的导入放在notebook的底部，但我把它放在这里是为了引起你们的注意。过会儿再来看这个，很有用的！`","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)的形式获得数据：对象的数组(当您在JavaScript中听到数组时，使用Python中的思考列表)，每一行数据都有属性。在这种情况下，数组中的每个对象都具有\\`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的数据争论问题有个好消息：浏览器的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`\nT有许多[数组方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)有助于转换这种Tidy形式的数据，一个类似对象的数组\\`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 的data frame 分配: \\`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 的data frame 切片: \\`df[df.prop == 7]\\`\n\n使用这些方法找到所有*virginicas* 的petal lengths是这样的`","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循环](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)和[while循环](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while)；这里有一个for循环，熟悉的可迭代语法类似于Python循环中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处理数据的信息，请查看学习[JavaScript数据指南系列](https://observablehq.com/@dakoop/learn-js-data)notebook，最初由Bocoup编写，最近由[David Koop](https://observablehq.com/@dakoop)移植到Observable notebook中。`","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中，您可以在你的文件中使用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`Vega-Lite是制作图表的一个很好的第一站：得到一个像样的情节非常快，一旦你理解了它，声明性代码就很容易维护。\n\n为了帮助从Altair进行转换，下面是JavaScript代码（右）旁边的Python代码（左）：`","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`**Reusing cells wholesale**:您可以通过查看类似于[可视化集合](https://observablehq.com/collection/@observablehq/visualization)中的Observable notebooks来寻找您喜欢的可视化。一旦你找到了一些东西，点击来了解它是如何制作的，或者查看你想要交换的依赖项。\n\n[\\`import {cell} from \"@user/notebookslug\"\\` syntax](https://observablehq.com/@observablehq/introduction-to-imports) 用于从其他otebook中导入cell。可选的{ cellname as localname }语法允许您导入任何public 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和嵌入在其他cell中定义的变量，立即开始进行交互式可视化`","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`与反应呈现函数类似，此cell返回最终在页面上呈现的HTML。通过有条件地构造HTML，您可以快速编写仅依赖于来自其他cell的变量的交互式接口，并且数据流负责处理转换。要实现可视化交互式，您可以使用由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有很多关于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要与全世界分享一个新的notebook，请点击顶部的“Publish”按钮.\n\n

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

\n\n观看者将能够尝试他们自己对notebook的临时更改，并选择分叉将这些修改保存到他们自己的版本。一个简单但强大的改变是，用户通过替换附加的文件将您的数据交换为自己的数据.\n要更明智地分享你的notebook，请点击在标题中出现的菜单中的“Enable Link Sharing”按钮。\n\n

\n\n现在，任何使用这个url的人都可以查看notebook，尝试自己的更改，提出建议，并选择分叉制作自己的副本。若要共享其他更改，请按蓝色的“Reshare”按钮.\n\n

\n\n通过团队订阅，团队中的所有notebook都将立即被查看，并可供所有团队成员选择编辑，而不需要发布.\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如果你有一个网站，你可以在该页面中嵌入一个Observable的cell。如果你有一个Jupyter notebook，你的数据处理发生，你也可以在那里嵌入一个cell.\n已发布notebook 中的Observable cell都在单元格左侧的 **︙** menu中嵌入代码。\n\n\n>

\n\n此选项提供的此代码看起来类似于此:\n\n> ~~~html\n

\n\n~~~\n\n当这些代码嵌入网页时，无论是由静态网站生成器生成，还是由 web 框架动态生成，它都会生成与Observable的输出相同的cell，减去编辑器ui、代码和Observable的css样式表。你可以阅读所有关于嵌入的细节，但为了刺激你的胃口，让我们写一个最简单的Flask应用程序来显示一个可视化。`","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~~~\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 data数据点。我们将通过过滤特定大小的花的原始数据来建立这个子集。（花萼片是花外面的绿色部分，在物理和语义上介于花瓣和叶子之间。）`","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`这些滑块允许查看器指定这些阈值，而不更改代码中的数字。请参见本系列的下一个教程，以了解这些交互式输入如何工作的。移动滑块以查看图表上的点与下面的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`若要嵌入多个cell，我们需要稍微更改所复制的嵌入代码,\n~~~js\n(new Runtime).module(define, name => (name === \"vegaPetals\") && inspect());\n~~~\n该行具有指定要检查哪些cell的表达式 \\`(name === \"vegaPetals\")\\` .我们需要扩展它来评估所有我们想嵌入的cell的真实性: \\`vegaPetals\\`，但也包括\\`sepalLengthLimits\\`和\\`sepalWidthLimit\\`的视图。我们不需要担心包含这些cell的依赖项，比如irisSubset; 任何依赖项都将根据需要运行，以便为显示的cell提供动力 \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 cell中的新代码：`","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`\n[阅读更多关于嵌入的信息](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)，以了解渲染整个notebook并将数据推送,并从cell中读取数据。`","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由于Observable单元的顺序由notebook作者决定，所以不能帮助讲述notebook故事的单元通常被放在最后。这样，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":"$W4e","stdlib":"1"}} 44:null