40:null 41:["$","title",null,{"children":"Observable: a companion visualization tool for your data analysis | Juan LB | Observable"}] 47:[] 45:{"id":"e9b4d52411250f39","slug":null,"title":"Observable: a companion visualization tool for your data analysis","thumbnail":"6c2b4c5cc8dffaf9f46bc113fd086dedb77d92aa447b28ceb8568eeca0510519","access_level":"public","create_time":"$D2022-10-28T17:53:21.360Z","update_time":"$D2022-10-28T18:10:54.809Z","view_time":null,"first_public_time":"$D2022-10-28T17:53:21.360Z","has_unpublished_edits":null,"fork":{"id":"ad50f3046097f76d","slug":"rpharma-complete","title":"Observable: a companion visualization tool for your data analysis","owner":{"id":"83798d4067b55eff","login":"demoteam","name":"Observable Demo Team"}},"stars":0,"starred":false,"owner":{"type":"team","id":"44e276990d0625e9","login":"jflbphd","name":"Juan LB","avatar_url":"https://avatars-next.observableusercontent.com/a3c8e6cec8eba3645bcf2b037f57fe59befdcc91bb15c48df7125e23e694f640","tier":"starter_2024","bio":"","following":false},"version":1240,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e235d6d47f5e6bad","login":"jflbphd","name":"Juan LB","avatar_url":"https://avatars-next.observableusercontent.com/a3c8e6cec8eba3645bcf2b037f57fe59befdcc91bb15c48df7125e23e694f640","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e235d6d47f5e6bad","login":"jflbphd","name":"Juan LB","avatar_url":"https://avatars-next.observableusercontent.com/a3c8e6cec8eba3645bcf2b037f57fe59befdcc91bb15c48df7125e23e694f640","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Observable: a companion visualization tool for your data analysis","cells":[{"id":0,"value":"# Observable: a companion visualization tool for your data analysis\n## R in Pharma Workshop, Oct. 28 2022 - completed version!\n[Workshop Slides](https://docs.google.com/presentation/d/1nRAo8QB-3fOSNoyfPsM_HuURhYeFYKwnDPLD3F8h3hY/edit?usp=sharing)\n\n**Data:** [World Bank Development Indicators](https://databank.worldbank.org/source/world-development-indicators)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"---\n## Notebook Essentials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"CODE TOGETHER : Chart and Observable basics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1193,"value":"

Wow, you can write HTML? awesome

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":917,"value":"viewof selectedDogs = Inputs.table(dogs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"selectedDogs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"Click the **+** icon and search for _Bar Chart_ to create a bar chart of our dog's ages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"// Here's some sample data about our dogs\n// This is a code cell, where I\"m writing my code! Output is ^^ up there ^^\ndogs = [\n { name: \"Aida\", age: 2, weight: 64 },\n { name: \"Teddydog\", age: 6, weight: 50 },\n { name: \"Sira\", age: 4, weight: 5.25 },\n { name: \"Sadie\", age: 3, weight: 22 },\n { name: \"Mila\", age: 4, weight: 19 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"viewof selection = Inputs.radio([\"age\", \"weight\"], {\n label: \"Select one\",\n value: \"age\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"Plot.plot({\n // initialze you plot\n marks: [\n // geometries that you want to add to the plot (visual encodings of the data)\n Plot.barY(dogs, {\n // barY of the data\n x: \"name\", // x axis\n y: selection, // y axis\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"ACTIVITY: Create a scatter plot of dog age (x) vs. dog weight.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1225,"value":"Plot.plot({\n marks: [\n Plot.dot(dogs, {\n x: \"age\", \n y: \"weight\", \n fill: \"weight\",\n r: 4}),\n Plot.text(dogs, {\n x: \"age\", \n y: \"weight\", \n fill: \"weight\",\n test: \"name\",\n testAnchor: \"start\",\n dx: 5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"CODE TOGETHER: Insert the attached world bank data. Take a look using `Inputs.table()`. Then, create a subset that only contains values for 2019. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"---\n## ggplot2 → Plot for interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"### Meet [Plot](https://observablehq.com/@observablehq/plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"- [Side-by-side comparison of ggplot2 and Plot essentials](https://observablehq.com/@observablehq/ggplot2-plot-highlight)\n- [Plot cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"CODE TOGETHER: Make a histogram of life expectancy using 2019 data (`data_2019`), with fill color dependent on region. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"CODE TOGETHER: Create a customized scatterplot of gdp (x) and life (y) in 2019. Update the point fill color by \"region\" and set the radius to the population. We'll also update the x-axis to a log scale. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"---\n## Observable Input for nimble interactive visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"CODE TOGETHER: Create a range input that spans all years in the full `wb_data` dataset. Then, create a reactive subset of `wb_data` that only contains values where year is less than or equal to the slider value. Finally, create a scatterplot of gdp (x) versus life (y) showing the filtered data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"**ACTIVITY:** Duplicate the histogram above, and add a radio button input that allows you to change which variable (\"life\", \"co2\", or \"gdp\") appears in the histogram. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"**BONUS ACTIVITY:** Create a horizontal bar plot that shows the top 10 CO2 emitting countries (with country on the y-axis, co2 on the x-axis) for any year in the data, connected to a slider for year. **Hint:** for sorting and only keeping the top 10, you can add the following within the same brackets where you assign variables: `sort: {y: \"x\", reverse: true, limit: 10}`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":746,"value":"### Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":766,"value":"In this notebook, we've imported Mike's `addTooltips` function from his [Plot tooltip](https://observablehq.com/@mkfreeman/plot-tooltip) notebook. Add tooltips to any Plot by wrapping it in `addTooltips()`, then adding a `title` channel to specify what's in the tooltip. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"---\n## Share visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":989,"value":"CODE TOGETHER: Pick a chart above and facet it (then download it, and/or embed it!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"---\n## Advanced techniques and next steps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":992,"value":"import { DuckDBClient } from \"@cmudig/duckdb-client\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"import { Choropleth, countries, countrymesh } from \"@d3/world-choropleth\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"