2c:["$","title",null,{"children":"Visualize a data frame with Observable, in Jupyter | Observable | Observable"}] 31:T521,{ return html`

${md`**Aside: Exporting to JSON** Another way to bundle up a dataframe for Observable is to export to JSON: ~~~py with open('data.json', 'w') as f: json.dump(df.to_dict(orient='records'), f) ~~~ JSON format has the advantages of not requiring a parser, as JSON parsing is a feature built into the web platform. More importantly, JSON can be used to get non-tabular data across the gap to 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) ~~~ Hierarchical data like the above could be rendered by [D3 Hierarchy](https://observablehq.com/@d3/d3-hierarchy) to look something like this (click nodes to expand): `}

${treeChart}

`; }32:T600,md`## Sharing your work To share a new notebook with the whole world, click the "Publish" button at the top.

This shares the notebook in its current state: no history of changes will be shared, and to share a new version after making more changes you’ll need to click "Publish" again. When you make changes after you’ve clicked "Publish" the first time, the button will turn blue to encourage you to update your public version with the changes you’ve made.

Viewers will be able to try out their own temporary changes to the the notebook and optionally fork it to save those modifications to their own version. One simple but powerful change is for users to swap out your data for their own by replacing an attached file. To share your notebook more judiciously, click "Enable Link Sharing" in the menu that appears from the ... button in the header.

Now anyone with this url can view the notebook, try out their own changes, make suggestions, and optionally fork to make their own copy. To share additional changes, press the blue "Reshare" buton.

With a team subscription all notebooks on the team will immediately be viewable and optionally editable to all team members, with no publishing required. `33:T6b2,embeddingIntro = md`There’s another important kind of sharing: sharing a visualization in *your* context. While you can import data, prototype a visualization, share a preview with collaborators, take suggestions and iterate together, and publish a professional document all on [observablehq.com](https://observablehq.com), you don’t have to send viewers to that URL to see what you’ve created. If you have a website, you can embed a cell from Observable right in that page. If you have a Jupyter notebook where your data processing happens, you can embed a cell there too. Every named Observable cell in a published notebook has embed code available in the **︙** menu to the left of the cell. >

This code that this option provides looks something like this: > ~~~html

~~~ When this code is embedded in a webpage, whether generated by a static site generator or produced dynamically with a web framework, it produces the same cell as its output in Observable minus the editor UI, code, and the Observable CSS stylesheet. You can [read all about the details of embedding](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks), but to whet your appetite let’s write the simplest Flask app we can that shows a visualization.`34:[{"id":"65a5b0823f76b66921ce21e2506abf597db7f99f8375836c62f411e0ceb4e16891abc7db9cbb4cb6a9e280fce917c003e9a95a9f520fdf104a3ea072bfa97f6a","href":"https://static.observableusercontent.com/files/65a5b0823f76b66921ce21e2506abf597db7f99f8375836c62f411e0ceb4e16891abc7db9cbb4cb6a9e280fce917c003e9a95a9f520fdf104a3ea072bfa97f6a","name":"words@1.txt","type":"text/plain","lastModified":1579206829015.662,"size":2824257},{"id":"cfff2e72d88f3834996b0e9e9b3022162f0840d7b55794ad4992c35900c25de974e75eb8fbb45d1d952c0d5641a39f03ff72f2081435e906632544ecc51f69d6","href":"https://static.observableusercontent.com/files/cfff2e72d88f3834996b0e9e9b3022162f0840d7b55794ad4992c35900c25de974e75eb8fbb45d1d952c0d5641a39f03ff72f2081435e906632544ecc51f69d6","name":"data.json","type":"application/json","lastModified":1578618820787.532,"size":16100},{"id":"814936365faaea1fa8bf668cf3b257c3b9a756bbfa63c1bbc2d9376fbbf28055542c95eb967e06ad48254c9fded0d78e1ac896a385f19062dbd5612cc04514e8","href":"https://static.observableusercontent.com/files/814936365faaea1fa8bf668cf3b257c3b9a756bbfa63c1bbc2d9376fbbf28055542c95eb967e06ad48254c9fded0d78e1ac896a385f19062dbd5612cc04514e8","name":"data.csv","type":"text/csv","lastModified":1578618820120.674,"size":3858},{"id":"613e602323c9ea4a0db6e9b6b6e5c5f23b1e0dd03354e459c85ff2dbf135540930d0d3fe100d00eb290be82e445a0ed53dafd9ed9f9a7e3ecc9a30b6229e25e5","href":"https://static.observableusercontent.com/files/613e602323c9ea4a0db6e9b6b6e5c5f23b1e0dd03354e459c85ff2dbf135540930d0d3fe100d00eb290be82e445a0ed53dafd9ed9f9a7e3ecc9a30b6229e25e5","name":"image@2.png","type":"image/png","lastModified":1580424060800.111,"size":229678},{"id":"9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","href":"https://static.observableusercontent.com/files/9cedee7b4186db3dce210ae9dc915fd75c48b0d0f5260c1b2bccd6d5e04b680fa7b6bfe0d2f975503b7b0e548f0031dbab28773c4e284bc63f64ac8d12812c20","name":"job_data.json","type":"application/json","lastModified":1580426160427.099,"size":326},{"id":"ab7b60640258fc6734075f88f10cd15aea27a8d7fbaaf24ce3bcc582f34aa996a26e4a1a243246fa250d38230d37b694be3147963403e0ba6f13ba2d3e3e6c7f","href":"https://static.observableusercontent.com/files/ab7b60640258fc6734075f88f10cd15aea27a8d7fbaaf24ce3bcc582f34aa996a26e4a1a243246fa250d38230d37b694be3147963403e0ba6f13ba2d3e3e6c7f","name":"image@3.png","type":"image/png","lastModified":1580425230941.183,"size":226634},{"id":"7205b51728bce3e0de74b7f6f92f14662cb921e1e71c4cd6591cebe9f6a30d422305d472d89fd3fca017b7e84740a438c8739157d2c2d32b6d8f0e09cb86426c","href":"https://static.observableusercontent.com/files/7205b51728bce3e0de74b7f6f92f14662cb921e1e71c4cd6591cebe9f6a30d422305d472d89fd3fca017b7e84740a438c8739157d2c2d32b6d8f0e09cb86426c","name":"untitled.png","type":"image/png","lastModified":1580426739352.639,"size":38596},{"id":"049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","href":"https://static.observableusercontent.com/files/049b49c48c92f970efa548d1ddfdf84f6ed8a5daa567d004634453ca02821b60d1fec39bb20c1fa0df11e437a82b394140e361801a7c106bd2faf2b070257f87","name":"2020-01-30 17.14.33.gif","type":"image/gif","lastModified":1580433461868.574,"size":2187674},{"id":"031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","href":"https://static.observableusercontent.com/files/031c3c4b83eb270a19e212e3d24a96fd10ee23bf3cd91ac347b9f0b3ba070fc72453d01d6fcf5a5ca7e03e95f6b2c1b98e66157f81ab7c138db0e88d80c3e6f9","name":"image@4.png","type":"image/png","lastModified":1580433592381.336,"size":28396},{"id":"7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","href":"https://static.observableusercontent.com/files/7331d1eb250a02f778c34f21bbe6ce6ad024a21f26a2e214c87086f9a095613909b171bf4a05f0dd442844775df64b18584e612e877b0bb8769019533d20607a","name":"image@5.png","type":"image/png","lastModified":1580434433703.071,"size":362859},{"id":"15a44e396dd90616e0452e86c52e843185225c49fe86b8c621f50f7396881c665316951ba734d1b2869a866c45f91aafd14aba826edd4c38e650a19296fdeb8e","href":"https://static.observableusercontent.com/files/15a44e396dd90616e0452e86c52e843185225c49fe86b8c621f50f7396881c665316951ba734d1b2869a866c45f91aafd14aba826edd4c38e650a19296fdeb8e","name":"image@6.png","type":"image/png","lastModified":1580434523280.791,"size":460081},{"id":"283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","href":"https://static.observableusercontent.com/files/283401627ae4b8815216085cbc8f4860511e32542c4e42361bb9ebd30fcaf9c4adffdfafb9ea075ca88596d75cc042e7e0bf05f43a83ba02230ad2c0901adfdf","name":"2020-01-30 18.44.38.gif","type":"image/gif","lastModified":1580438784167.298,"size":3839051},{"id":"a990ff62f0469c9dddcd223d5c6f2fa97dc3d3a3d01544a769c77698903b2518620f3f7c223adf5c4ca359d69bff25d1d874bbe71a6414958a84b8943a021141","href":"https://static.observableusercontent.com/files/a990ff62f0469c9dddcd223d5c6f2fa97dc3d3a3d01544a769c77698903b2518620f3f7c223adf5c4ca359d69bff25d1d874bbe71a6414958a84b8943a021141","name":"image.png","type":"image/png","lastModified":1579887392351.665,"size":33824},{"id":"f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","href":"https://static.observableusercontent.com/files/f6a47b706774ffff351cf2c770ec31d88b66ca3177c666deecf2f0fced4fcfd55998e23b8079c8a4cf16005fa0e69185f662616ee0552bc5b5fa540fb1554c1e","name":"2020-01-24 09.52.04.gif","type":"image/gif","lastModified":1579888396316.73,"size":1430617},{"id":"32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","href":"https://static.observableusercontent.com/files/32bd6994f7fcab61e268eeb3ef482a19e02d36f330fcd2f498ce33e2f8e93d3cdaa632662e05a3cc391ed48ab8988ea8fd8bca8d8dd08ef4a705305bf02a710d","name":"image@7.png","type":"image/png","lastModified":1580445411913.099,"size":2773},{"id":"df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","href":"https://static.observableusercontent.com/files/df63cf4603c0e836253710e4d0830c2b21e2e47499b2bc8d7bff7dbfaad17a56e3867033262b1cc748200750a0ba759af4a494326178b1ae5e8fa85b44033872","name":"image@10.png","type":"image/png","lastModified":1580445920842.155,"size":3333},{"id":"5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","href":"https://static.observableusercontent.com/files/5041b723b1274bddc14271dd33e16256e06f19d9919c7ddab5bd18b522c0c55597f7554ed4293b84961a9f0b06fb700c0f9da1b8528f472885b22e062ae76421","name":"image@9.png","type":"image/png","lastModified":1580445813325.161,"size":33708},{"id":"8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","href":"https://static.observableusercontent.com/files/8bcb15bd6744a2a649653e07a5cc121839849ef90011c8875bc037b03231cccaf8e47ee7208166f4fc04a288194d348a32c79b3991a79f8e0b3ed26cda3e45e7","name":"image@8.png","type":"image/png","lastModified":1580445537684.334,"size":2807},{"id":"39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","href":"https://static.observableusercontent.com/files/39b6e2d63d62b75aaa157bbf25fadd1c7934a34eb522c932ecfd6f2a21a5a6b12609bd3a0acffb157903de4452a73e2379db20812a3d78f7e7f45c9bbea39d53","name":"iris_data.csv","type":"text/csv","lastModified":1580842967904.761,"size":3854}] 2f:{"id":"eceaa744227c4fea","slug":"visualize-a-data-frame-with-observable-in-jupyter","title":"Visualize a data frame with Observable, in Jupyter","thumbnail":"f314437ff2bf6fe03530d22b3b910c0040daff37b68d8ea9c0e47e06f4ca5b6f","access_level":"unlisted","create_time":"$D2020-01-08T18:51:41.441Z","update_time":"$D2026-05-24T02:12:54.065Z","view_time":null,"first_public_time":"$D2020-03-02T18:50:18.297Z","has_unpublished_edits":null,"fork":false,"stars":95,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":2357,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":55,"collection":{"id":"26400a6ec1b210fa","slug":"observable-for-jupyter-users","title":"Observable for Jupyter users","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`A common reason for Jupyter users to choose Observable is the creation and distribution of visualizations. Let’s get some data into Observable, visualize it, share that visualization and even plop it back into Jupyter.\n\nIf you’re not familiar with Jupyter and the image below doesn’t look familiar, then you might prefer an overview of data in Observable without the Jupyter and Python angle: the Observable [Introduction to Data](https://observablehq.com/@observablehq/introduction-to-data).\n\nOtherwise, let’s begin our journey from the familiar comfort of a Jupyter notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`## Getting your data into Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"md`Say we want to look at some flower data: the [Iris dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set). The [Vega](https://github.com/vega/vega-datasets) and [Altair](https://github.com/altair-viz/vega_datasets) developers have been kind enough to make this data pip installable with \\`pip install vega_datasets\\` in a Jupyter notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"md`If you have a Jupyter notebook handy, copy in this code to take a look at the data.\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","output":"$undefined","database":"$undefined"},{"id":1303,"value":"md`\\`df\\` is a [Pandas](https://pandas.pydata.org/) dataframe, a format familiar to many data scientists.\n\nAnytime we have a dataframe like this in Jupyter we can package it up for Observable by exporting to csv:\n\n~~~py\ndf.to_csv('data.csv')\n~~~\n\nIf you’re joining in after the Jupyter step, a CSV is the file format you’re most likely to have from another source anyway. You can find this Iris dataset many places on the web: [this page](https://forge.scilab.org/index.php/p/rdataset/source/tree/master/csv/datasets/iris.csv) has a copy from the R source code, click \"Download this file\" at the bottom right of that page if you want to follow along and don’t have Jupyter handy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`Once you’ve got a CSV file with your data, the most direct way to get data into a notebook is to use a [file attachment](https://observablehq.com/@observablehq/file-attachments). (You *could* copy and paste the text instead, use a multiline JavaScript string with backticks \\`\\` if you do.)\n\nPress ${keys(\n \"Cmd-Shift-U\"\n)} while editing a cell to bring up a file upload dialog, or open the Files pane by clicking the paperclip on the right side of the page and drag a file into the pane.\n\n

Uploading a different CSV file about brand popularity

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"md`Code in cells can read the contents of a file attachment with a variety of methods. Most of these methods return [Promises](https://observablehq.com/@observablehq/introduction-to-promises), objects that can be awaited like [Tasks](https://docs.python.org/3/library/asyncio-task.html) in Python. If you use one of these at the top level in a cell, you can elide the \\`await\\`: the cell output will update to show the result once the task has completed (or in JavaScript lingo, \"once the promise has resolved\").`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"fullText = FileAttachment(\"iris_data.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`To use these methods within other code you’ll need to use the \\`await\\` keyword.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`For a full list of these methods and more about how file attachments work, check out the [file attachments documentation](https://observablehq.com/@observablehq/file-attachments).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`> If you have *live* data you want to visualize, you might want to make a call to an API with [\\`fetch()\\`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) (if necessary using [secret credentials](https://observablehq.com/@observablehq/secrets)), or query a [database](https://observablehq.com/@observablehq/connecting-to-databases), to make a live dashboard. In the next notebook in this tutorial we’ll look at interactivity like this more.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md`## Parsing text data\n\nAlthough we could try to write our own CSV parsing...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":957,"value":"md`...folks who have worked with lots of CSVs before know how something like this can appear to work but break at the worst times when we change data sources. So let’s require d3-dsv, a library for parsing for CSVs.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"d3 = require(\"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"md`The [\\`require()\\` function](https://observablehq.com/@observablehq/introduction-to-require) is used to pull in JavaScript libraries from sources like GitHub or [npm](https://www.npmjs.com/), the PyPI of JavaScript.\n\nNow let’s use that function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":964,"value":"md`We got back an array (which in Python we’d call a \"list\"). Click \"▶ Array(150)\" below to inspect the value of \\`irisData\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"irisData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"md`You can manually inspect an object like \\`irisData\\` above in Observable by clicking to expand it, but since this is an array of objects each with the same properties, you can also view the data as a table.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"Inputs.table(irisData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md`[\\`Inputs.table\\`](https://observablehq.com/@observablehq/inputs) is a built-in, [open source](https://github.com/observablehq/inputs) component usable from Observable via the always-available \\`Inputs\\` namespace.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`## Transforming data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`Many JavaScript libraries and plotting utilities expect data in this [\"Tidy\" form](https://vita.had.co.nz/papers/tidy-data.pdf): an array (when you hear array in JavaScript, think list in Python) of objects, with properties for each row of the data. In this case each object in the array \\`irisData\\` has properties \\`sepalLength\\`, \\`sepalWidth\\`, \\`petalLength\\`, \\`petalWidth\\`, and \\`species\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"md`There’s good news on the JavaScript-for-data-wrangling front: your browser’s JavaScript runtime is fast. Like [PyPy](https://pypy.org/), JavaScript engines have impressive [JITs](https://en.wikipedia.org/wiki/Just-in-time_compilation) that make number crunching relatively efficient in spite of a dynamic type system. So we don’t necessarily need to move to more efficient data representations like [Apache Arrow](https://observablehq.com/@theneuralbit/introduction-to-apache-arrow) or [Data-Forge](http://js4ds.org/#s:dataforge) for working with tabular data until that data gets pretty big. If you’re just trying to filter a bit of data or pick out fields on arrays of objects, here’s a bit of code to get you started.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`\nThere are many [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) helpful for transforming data in this Tidy form, an array of similar objects. \\`map\\` and \\`filter\\` are the most common:\n\n* \\`data.map(x => expr)\\` is equivalent to the Python list comprehension: \\`[expr for x in data]\\`\n* \\`data.map(x => {...x, newProp: x.prop1 + x.prop2})\\` is analogous to a Pandas data frame assignment: \\`df[\"newProp\"] = df[\"prop1\"] + df[\"prop2\"]\\`\n* \\`data.filter(x => expr)\\` is equivalent to the Python list comprehension: \\`[x for x in data if expr]\\`\n* \\`data.filter(x => x.prop === 7)\\` is analogous to a Pandas data frame slice: \\`df[df.prop == 7]\\`\n\nUsing these methods to find the petal lengths of all *virginicas* looks like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`\nIf you prefer them to the array methods, JavaScript has [for loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and [while loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while); here’s a for loop with the familiar iterable syntax analogous to a \\`for thing in things\\` loop in Python.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`We've barely skimmed the surface here. For more on processing data in JavaScript, check out out the [Learn JavaScript Data guide](https://observablehq.com/@dakoop/learn-js-data) series of notebooks, originally by Bocoup and recently ported to Observable by [David Koop](https://observablehq.com/@dakoop).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`## Making visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`In Observable you have the APIs and libraries of the web at your disposal. The web is a big place! You can start with the pieces you already know.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`**Vega-Lite**: If you're familiar with the Python plotting library Altair, the Vega-Lite JavaScript API will feel very familiar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":64,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`There’s a lot going on here. See [Charting in Observable](https://observablehq.com/d/3c458cfcac4dbda8?collection=@observablehq/observable-for-charting) to quickly get up and running with Vega-Lite or [Intro to Vega-Lite](https://observablehq.com/@uwdata/introduction-to-vega-lite) for a more comprehensive look.\n\nVega-Lite is a great first stop for making charts: getting a decent-looking plot is very quick and once you understand it the declarative code is easy to maintain.\n\nTo help convert from Altair, here’s the Python code (left) next to the JavaScript code (right):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`**Reusing cells wholesale**: You can look for a visualization you like by looking through Observable notebooks like those in the [the Visualizations collection](https://observablehq.com/collection/@observablehq/visualization). Once you’ve found something, click to learn how it was made or to look at dependencies you’d like to swap out.\n\nThe [\\`import {cell} from \"@user/notebookslug\"\\` syntax](https://observablehq.com/@observablehq/introduction-to-imports) is used to import cells from other notebooks. The optional \\`with {cellName as localName}\\` syntax allows you to import any public Observable notebook and rerender it with your own dependencies swapped in; here, a histogram with your own data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"petalLengths = irisData.map(sample => sample.petalLength)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":402,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`**HTML and CSS**: If you already know some HTML and CSS, you can started making interactive visualizations right away by writing html and embedding variables defined in other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1161,"value":"md`Similar to a React render function, this cell returns HTML that ends up rendered on the page. By constructing the HTML conditionally you can quickly write interactive interfaces that depend only on variables from other cells and the dataflow takes care of the transitions. To make a visualization interactive you can use a variable defined by a view somewhere else in the notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2326,"value":"md`**Plot**: The fastest way to make a useful, great-looking plot in Observable is to use [Plot](https://observablehq.com/@observablehq/plot).`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`**D3**: Deeply customized visualizations are a big selling point for Observable. If you want to craft a visualization unlike anything you’ve seen before, D3 might be the best tool to use.\n\nThere’s lots of D3 documentation on Observable. [Get started with D3](https://observablehq.com/d/5a4c8ad2dcf5d2e1) is the best place to begin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`**Plotly**: There are a lot of charting libraries in JavaScript. Plotly is a simple, popular tool with many [examples](https://observablehq.com/@jashkenas/plotly-js) on Observable. If you’ve used Plotly in Python before, its interface might be the quickest for you to get started with in Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"embedcode = md`After a \\`pip install flask\\`, stick code like this in an \\`app.py\\` file:\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\nThen run\n~~~\nFLASK_APP=app.py flask run\n~~~\n\nand you’ll have a web page that embeds whatever content was in that cell, including any interactivity!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"backAgainToJupyter = md`## Back again to Jupyter\n\nYou can take the same code from the \"embed cell\" menu item and copy it into our original Jupyter notebook. There’s just a bit of additional Jupyter window-dressing: \n\n~~~py\nfrom IPython.display import display, HTML\nembed = \"\"\"

\n\n\"\"\"\ndisplay(HTML(embed))\n~~~\n\nWhere Observable shines is making charts that instantly respond to interaction: here’s the same plot as above, but with thresholding inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2109,"value":"md`This is the same chart, but we’re hooked up to different data: \\`irisSubset\\`, a limited set of the iris data points. We’ll build this subset by filtering the original \\`irisData\\` for flowers with sepals of particular range of sizes. (Sepals are the green bits on the outside of a flower, somewhere physically and semantically between petals and leaves.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":2119,"value":"md`These sliders let viewers specify these thresholds without changing numbers in code. See the [next tutorial](https://observablehq.com/d/c4e1459a8a99cdaf) in this series to learn how these interactive inputs work. Move the sliders to see the points on the chart change along with the objects in the \\`irisSubset\\` array below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":2076,"value":"md`To embed multiple cells, we’ll need to change the copied embed code a bit. The line\n~~~js\n(new Runtime).module(define, name => (name === \"vegaPetals\") && inspect());\n~~~\nhas the expression \\`(name === \"vegaPetals\")\\` which specifies which cells to inspect. We need to expand it to evaluate to true for all of the cells we want to embed: \\`vegaPetals\\` yes, but also the views of \\`sepalLengthLimits\\` and \\`sepalWidthLimit\\`. We don’t need to worry about including dependencies of these cells like \\`irisSubset\\`; any dependencies will run as necessary to power the displayed cells.\n\n\\`||\\` is how \\`or\\` is spelled in JavaScript, so we’ll use that to expand the check to allow any one of these three names.\n\n~~~js\n(new Runtime).module(define, name => (\n name === \"vegaPetalsWidget\" ||\n name === \"viewof sepalLengthLimits\" ||\n name === \"viewof sepalWidthLimits\") && inspect());\n~~~\nHere’s the new code for us to paste into a Jupyter cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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\nwhich looks like this in action:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1388,"value":"md`[Read more about embedding](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) to learn about rendering an entire notebook and pushing data into and reading data out of cells.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md`As you can see, things really get exciting when we hook up inputs that allow users – who may be comfortable writing code, but may not – to interact with visualizations. In the next notebooks in this collection we’ll look at making visualizations interactive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"md`## Appendix\n\nSince the order of cells in Observable is at the discretion of the notebook author, cells that don’t help tell the story of the notebook are often placed at the end. This way the notebook is still reproducible – it’s still possible to see what code was run – but this code stays out of the way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":632,"value":"import {keys} from \"@observablehq/file-attachments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1752,"value":"import {rangeSlider, themes} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"import { compareCode } from '@ballingt/comparecode'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@observablehq/visualize-a-data-frame-with-observable-in-jupyter;307;"}